Web應用實例：音頻可視化
準備
語言：TypeScript
小明告訴我，他希望打開一個網頁，立即聽到他喜歡的音樂，如果有視覺特效就更棒了。
第一節(jié) 本地音頻
“可是我的電腦里沒有 MP3 文件！”
“為什么需要打開一個本地文件？”小明問。
“我不知道你喜歡聽什么。”
“...既沒有音頻資源的版權。”
“...也沒有足夠的服務器帶寬。”
“...更無法向你解釋什么是跨域訪問限制。”
...
“總之，你只能先去其他網站下載一個 MP3 文件，然后拖進來。”我說。
“那我為什么不直接在其他網站聽？？？”他困惑道。
“有點道理。”
圖1-1 啟動視圖
第二節(jié) 頻譜變換
通過傅里葉變換將時域數(shù)據變換到頻域。
“無所謂了，我最希望的是有炫酷的視效。”小明說。
“什么是炫酷？”
“聽聽你的想法。”小明回答。
“下一代，未來，前所未有的。”
“感覺還行，你會怎么呈現(xiàn)視覺效果呢？”小明接著問。
“自由地繪制。”
“什么意思？”
“通俗點講——想怎么畫就怎么畫。”
“聽起來不錯。”
圖2-1 時域數(shù)據
圖2-2 頻域數(shù)據
第三節(jié) 歷史軌跡
像素保留歷史，并向四周彌散。
“這就是你說的下一代？”小明有些失望。
“不是。下一代總是建立在已有的設計上，然后小心翼翼地加入一些變化。”
“哦，那會有什么變化呢？”
“我已經掌握了一種成熟的變化技巧。”
“整體效果像是石頭拋入平靜的水面，水波逐漸蔓延開來。”
“有沒有合適的名字，我可不喜歡《下一代頻譜》。”
“當然，‘下一代’只是我們的內部代號，它叫《水波粼粼》。”
“針不戳。”
圖3-1 擴散示例一
圖3-2 擴散示例二
圖3-3 擴散示例三
第四節(jié) 旋轉
將旋轉矩陣作用于整個畫面。
“你剛才提到小心翼翼，有沒有大膽的設計呢？”
“有的，我管它們叫‘實驗性質的特性’。”
“首先是旋轉，讓整個畫面旋轉起來。”
“有的人不喜歡旋轉，那會讓他感到眩暈。”小明質疑道。
“是的，對用戶來說，這就像 EDM 和輕音樂的區(qū)別。”
“還有嗎？”
“把任意兩個場景混在一起。我有個飛鳥場景，鳥兒隨音樂起舞，是不是很棒？”
“我不看好它，這有些難以理解。”
“如果用戶不喜歡，你會移掉它們的對嗎？”小明接著問。
“很敏銳，實驗性質的特性只會有兩個結果。”
“——即在未來的版本中得到加強，或者徹底移除。”
“乍一聽像是廢話。”
圖4-1 旋轉
圖4-2 場景混疊
第五節(jié) 移動端適配
渲染質量限于移動端的硬件水準。
“移動端是潮流，還有其他特性嗎？”
“本地化支持。界面上的文字和使用習慣根據瀏覽器語言調整。”
“我有個想法，這個網站還可以支持聽力障礙的人群。”小明靈機一動。
“你是指聽音樂的網站，對聽覺障礙者做可訪問性支持？”我懷疑自己聽錯了。
“是音畫網站！用戶可以觀看畫面。”
“......”
“特性不是越多越好，現(xiàn)在讓我們回到起點。”
“——你希望打開一個網頁，自動播放喜歡的音樂？”我提問。
“似乎只能手動播放。”看起來小明并不介意這一點。
“炫酷的視覺效果？”
“基本滿意。”
“那么，還有其他問題嗎？”
...
“我的手機里也沒有 MP3 文件！”
附錄
在線演示：Audio Visualizer
Github 開源：general-engine
浙公網安備 33010602011771號