Web應用實例：音頻可視化

準備

　　語言：TypeScript

　　工具：Visual Studio Code

　　演示：Audio Visualiazer

　　小明告訴我，他但願打開一個網頁，當即聽到他喜歡的音樂，若是有視覺特效就更棒了。

第一節 本地音頻

 　　「但是個人電腦裏沒有 MP3 文件！」

　　「爲何須要打開一個本地文件？」小明問。

　　「我不知道你喜歡聽什麼。」

　　「...既沒有音頻資源的版權。」

　　「...也沒有足夠的服務器帶寬。」

　　「...更沒法向你解釋什麼是跨域訪問限制。」

　　...

　　「總之，你只能先去其餘網站下載一個 MP3 文件，而後拖進來。」我說。

　　「那我爲何不直接在其餘網站聽？？？」他困惑道。

　　「聽起來不錯。」

圖1-1 啓動視圖

第二節 頻譜變換

　　經過傅里葉變換將時域數據變換到頻域。

　　「無所謂了，我最但願的是有炫酷的視效。」小明說。

　　「什麼是炫酷？」

　　「聽聽你的想法。」小明回答。

　　「下一代，將來，史無前例的。」

　　「感受還行，你會怎麼呈現視覺效果呢？」小明接着問。

　　「自由地繪製。」

　　「什麼意思？」

　　「通俗點講，想怎麼畫就怎麼畫。」

　　「......」

圖2-1 時域數據

 

圖2-2 頻域數據

第三節 歷史軌跡

　　像素保留歷史，並向四周彌散。

　　「這就是你說的下一代？」小明有些失望。

　　「不是。下一代老是創建在已有的設計上，而後當心翼翼地加入一些變化。」

　　「哦，那會有什麼變化呢？」

　　「我已經掌握了一種成熟的變化技巧。」

　　「總體效果像是石頭拋入平靜的水面，水波逐漸蔓延開來。」

　　「有沒有合適的名字，我可不喜歡《下一代頻譜》。」

　　「固然，‘下一代’只是咱們的內部代號，它叫《水波粼粼》。」

圖3-1 擴散示例一

圖3-2 擴散示例二

圖3-3 擴散示例三

第四節 旋轉

 　　將旋轉矩陣做用於整個畫面。

　　「你剛纔提到當心翼翼，有沒有大膽的設計呢？」

　　「有的，我管它們叫‘實驗性質的特性’。」

　　「首先是旋轉，讓整個畫面旋轉起來。」

　　「有的人不喜歡旋轉，那會讓他感到眩暈。」小明質疑道。

　　「是的，對用戶來講，這就像 EDM 和輕音樂的區別。」

　　「還有嗎？」

　　「把任意兩個場景混在一塊兒。我有個飛鳥場景，鳥兒隨音樂起舞，是否是很棒？」

　　「我不看好它，這有些難以理解。」

　　「若是用戶不喜歡，你會移掉它們的對嗎？」小明接着問。

　　「很敏銳，實驗性質的特性只會有兩個結果。」

　　「...即在將來的版本中獲得增強，或者完全移除。」

圖4-1 旋轉

圖4-2 場景混疊

第五節 移動端適配

　　限於移動端的硬件水準，對此不要抱有太多幻想。

　　「移動端是潮流，還有其餘特性嗎？」

　　「本地化支持。界面上的文字和使用習慣根據瀏覽器語言調整。」

　　「我有個想法，這個網站能夠支持聽力障礙的人羣。」小明靈機一動。

　　「你是指聽音樂的網站，對聽覺障礙者作可訪問性支持？」我懷疑本身聽錯了。

　　「是音畫網站！用戶能夠觀看畫面。」

　　「......」

　　「特性不是越多越好，如今讓咱們回到起點。」

　　「你但願打開一個網頁，自動播放喜歡的音樂？」我提問。

　　「彷佛只能手動播放。」看起來小明並不介意這一點。

　　「炫酷的視覺效果？」

　　「基本滿意。」

　　「那麼，還有其餘問題嗎？」

　　...

　　「個人手機裏也沒有 MP3 文件！」

附錄

　　在線演示：Audio Visualizer

　　Github 開源：general-engine