準備 語言：TypeScript 工具：Visual Studio Code 演示：Audio Visualiazer 小明告訴我，他希望打開一個網頁，立即聽到他喜歡的音樂，如果有視覺特效就更棒了。 第一節 本地音頻 “可是我的電腦里沒有 MP3 文件！” “為什麼需要打開一個本地文件？”小明問。 ...
準備
語言：TypeScript
小明告訴我，他希望打開一個網頁，立即聽到他喜歡的音樂，如果有視覺特效就更棒了。
第一節 本地音頻
“可是我的電腦里沒有 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
