本項目旨在利用LVGL驅動的 Xiao-expansion-board的OLED顯示屏實現FFT聲音數據的實時可視化。關鍵內容包括利用LVGL庫在OLED屏幕上進行數據可視化展示，在XIAO ESP32S3 Sense上進行聲音數據的高速采集和預處理，以及同步進行FFT (快速傅里葉) 變換計算。該項目利用了XIAO ESP32S3 Sense開發板的I2S麥克風組件和XiaoExpansion board的OLED實現音頻數據可視化的過程，深入地了解聲音數據處理與可視化的技術細節，為實時聲音及音樂數據監測與展示提供參考和應用價值。

材料清單

硬件：

XIAOESP32S3 Sense

XiaoExpansion board

軟件：

Visual Studio Code

STEP1 - LovyanGFX驅動oled屏幕

XiaoExpansionboard拓展了多個grove接口，同時還配備了一個入門級別的ssd1306_oled,按照常規ssd1306就該使用u8g2這樣的功耗上古神器來驅動，但隨著很多高性能嵌入式開發板出現了，圖形驅動更新迭代的速度也加快了,驅動ssd1306也有了更多選擇。我們值得擁有最好的， 本項目中使用LovyanGFX圖形驅動庫來驅動ssd1306。LovyanGFX庫受TFT_eSPI啟發，深度改造而來，是很多大眾創客的摯愛，它不單只可以驅動常見的LCD屏幕，同時還可以支持一些oled屏幕，使用這個庫使得最簡單入門級別的ssd1306 oled屏幕也可以共享LCD屏幕才有的作圖函數。

在本項目完成了對xiao系列擴展板上的ss1306的適配，更進一步地，按照當下最流行的lvgl圖形庫的作圖機理進行了移植，極大的豐富了xiao擴展板的ssd1306的應用場景，希望你也能從中受到啟發，這個項目能為你今后的工作帶來便利。

STEP2 -基于ssd1306的lvgl移植

傳統的圖形繪制庫（例如經典TFT_eSPI,Adafruit_GFX,Lovyan_GFX等）可以幫助用戶快速的完成方案。LVGL（Light and Versatile Graphics Library）的出現給嵌入式開發在最終產品呈現上提供了一種更優雅的解決方案。LVGL相對于傳統圖形庫更適合用于嵌入式系統，它在性能、資源占用和靈活性方面都有一定的優勢。然而在ssd1306上運行lvgl曾經是多么高遠的夢想呀，如今我們在Arduino編程環境上就可以輕松使用上，也可以共享廣闊的開源繁榮，是一次重大的進步。

移植完成后，在ssd1303上可以流暢運行lvgl的項目，但在程序設計的時候注意顏色最好能指定白色或者黑色，這樣顯示效果更清晰。

LVGL它與傳統的圖形庫有幾個顯著的差異：

1.硬件加速支持：LVGL具有對硬件加速的支持，可以利用硬件功能來加快圖形渲染速度和降低CPU負載，而傳統的圖形庫則通常依賴于軟件渲染。

2. 內存需求：LVGL設計時考慮了嵌入式系統的資源限制，因此在內存占用上更為高效，這使得它在資源受限的嵌入式設備上表現更出色。

3. 事件處理：LVGL提供了靈活且強大的事件處理機制，能夠方便地實現觸摸屏、按鍵等輸入設備的交互，而傳統圖形庫在這方面可能需要額外的定制和開發。

4. 主題和樣式：LVGL提供了豐富的主題和樣式支持，可以輕松地定制界面外觀和風格，而傳統圖形庫可能需要較多的工作來實現相同的效果。

5. 跨平臺支持：LVGL被設計成可跨平臺使用，可以在不同的嵌入式系統上運行，而傳統圖形庫可能需要針對特定平臺進行適配或者重新開發。

STEP3-聲音頻譜解析

（1）I2S麥克風的設置

XIAOESP32S3 Sense除了裝備有攝像頭還有一個I2Smicrophone,所以可以開展天馬行空的語音類的項目。本項目正是利用了I2S microphore的優良特性，在本項目中發揮了鍵作用。i2s_config 中我們主要關注的參數包括sample_rate、dma_buf_cout、dma_buf_len這3個參數。采樣率、dma數量、dma_buf長度參數的不同會對數據最終呈現產生明顯區別。采樣率越快就更能捕獲聲音的細節信息，但也不是可以無限的放大，我這里設了64000，意思是1秒鐘能采集64000個數值，這個能力是ADC機制的麥克風無法企及的。DMA 是 "Direct Memory Access"（直接內存訪問）允許外部設備直接訪問系統內存，而無需CPU的干預。這樣可以提高數據傳輸的效率，減少對CPU的負擔，從而提升系統整體性能。這里我們用一個比喻來幫助大家理解體會DMA和MCU之間的關系，DMA它就像會自己獨立好學的孩子，它完成“作業”后，就會向老爸（cpu/mcu）報告，然后在老爸忙檢查作業的時候，這個好孩子又自覺得跑去做另一門作業了，一刻也沒停過，反倒老爸忙個不停。這樣理解的話dma_buf_count 參數至少是2，（就是給孩子布置兩份作業一個數學，一個語文，輪流干，不然做完一門作業他就沒事干了，肯定會跑去玩手機，也可設為3，多布置一份英語作業）。dma_buf_len這里呢，就更有意思了，因為好孩子一把作業做完就會立即送去給老爸看，如果這孩子做一個題目就去給老爸看，就不斷的去打擾老爸，老爸就會很煩，老爸就跟孩子說你把這一整頁都做完了再來找我，所以為了減少對cpu的占用次數和時間，也把這參數設得盡量大，但也有個范圍是8-1024，這樣孩子跟老爸默契的配合下，老爸工作安心工作，孩子認真學習，其樂融融，大家的工作都完成得很漂亮。

? ??

（I2S調參指南）

（2）FFT數據處理

在臺面上我們只看到兩個入口函數，第一步用FreeRTOS 在esp32的第二個核心上創建一個音頻數據處理任務，這個任務的句柄是processing_task_handle，第二個是 i2s_sampler.start 函數，我們把剛才配置好的i2s設置傳遞給它，它就會在后臺默默的干活并通過上述句柄將dma采集到的數據釋放出來。在I2SSampler里面FreeRTOS的經典招式都用上了，包括消息隊列，消息直接通知，多任務創建，看似慌亂，實際是在密鑼緊鼓的忙乎著給老板們“做飯”。另外一個功臣是Processor，它就是FFT的化身，它接收了I2SSampler傳來的消息，然后嚼爛消化成漂亮干凈的數據。我就是喜歡這樣的好同事，一直默默無聞地工作，做好事不留名。實際這些在后臺默默無聞埋頭苦干的小伙伴們才這個項目的精華部分。

(3)LVGL動態繪圖

我們采用一個振幅更新函數（bar_value_update）來處理頻譜和屏幕大小適配的工作，它接受一個傅里葉變換計算得到的浮點型數組mag，循環遍歷mag數組的每隔兩個元素，計算它們的平均值ave，并將其與窗口高度進行比較得到柱狀圖的值。整體邏輯是計算加權平均值，然后根據條件判斷，更新柱狀圖的值和峰值，并且采用了一階滯后的平滑處理，使得柱狀圖的變化更加平穩。

而圖形的繪制關鍵環節在于把頻譜對象作為一個容器進行繪制（spectrum_draw_event_cb），繪圖沒有采用lvgl常規的使用預設的作圖函數，而是采用底層的繪圖方法。繪圖實際發生在LV_EVENT_DRAW_POST（繪圖結束后）事件，會對頻譜對象進行繪制操作。整個過程中使用了繪制矩形（lv_draw_rect）、繪制線條（lv_draw_line）機制等。矩形圖代表瞬時的頻譜強度，線條用于代表頻譜峰值的滯后響應，由于線條的寬度是2 像素，所以看起來也是一個小長方體。它通過循環遍歷一個大小為頻譜分析結果數據SAMPLE_SIZE的數組，繪制矩形和兩條線條，其中bar_chart和bar_chart_peaks是用于確定柱狀圖高度的數據數組。快速地在spectrum_obj對象上繪制柱狀圖，并通過柱狀圖的高度數據進行實時更新。即使是在非黑即白的Oled屏上也能夠響應及時，產生了良好的動態效果。

總結

最終在xiao expansion board的屏幕上展示了經過FFT處理的音樂信息，它能夠即時的對當前麥克風采集到聲音作出反饋。它就好像是一座小型的音樂的噴泉，在水平面被音符的動能彈起，形成了美麗的水花飛濺的壯觀場景。每一個頻率成分就如同飛濺的水花一樣，展現出音樂中多姿多彩的細節和紋理，從低頻的穩重沉郁到高頻的輕盈活潑，每個音符都呈現出獨特的張力與韌性。充分展現了FFT解析音樂的魅力和神奇之處，通過這種方式讓人仿佛能夠透過頻譜數據看到音樂的靈魂，令人陶醉。






審核編輯：劉清