大家好！想跟大家分享一個結合「數位樂器手動演奏」與「前端 Web Audio 實作」的個人專案。 先說結論：這是一個用左手＋右手大拇指在手機螢幕上「純手工硬幹出來」的血汗結晶，也是一個探索前端音訊工程的實驗室 😂。 網址如下：

很多人以為現代網頁只能處理文字、排版、圖片或影片播放。但事實上，現代瀏覽器底層早就內建了具備專業錄音室等級的 Web Audio API！ 這次我不想只是上網隨便抓現成的 .mid 檔案跑跑看，而是想玩真的——清單裡的每一首曲目（目前已累積數十首且持續擴充中），全部是我戴著耳機聽音（耳コピ採譜），只靠兩隻大拇指在手機的 Perfect Piano 上一鍵一鍵彈奏錄製成 MIDI，再用原生 JavaScript、Midi.js 與 Tone.js 架構刻出一個具備「多波形合成器」與「即時移調演算法」的互動網頁！ 🌐 為什麼要在網頁上搞音樂？Web 開發中的音訊應用場景 在進入硬核採譜之前，先聊聊很多人好奇的問題：「學 Web 音訊處理能幹嘛？」 過去網頁音訊大多只是放個 <audio> 標籤播 MP3，但現在 Web Audio 的應用早已無所不在： 1. 網頁遊戲與互動娛樂（Web Games）：不需載入笨重的大型音效檔，直接靠程式碼產生動態爆炸聲、打擊音效與空間 3D 環繞音（Spatial Audio）。 2. 微互動與使用者體驗（UI Micro-interactions）：按鈕點擊、拖曳成功時的輕脆提示音，透過程式即時調配頻率與衰減，大幅增加操作體感。 3. 線上音樂教育與數位工作站（Web DAW / EdTech）：像是 Soundtrap、BandLab，或是即時視唱練耳、互動指法教學工具。 4. 數據可視化與聲音化（Data Sonification）：將股票走勢、地震波或科學數據轉換為聲音頻率，讓使用者「用聽的」感受數據變化。 這個專案，就是把瀏覽器當成一台可程式化的硬體合成器與播放器！ 🎶 Part 1：獵奇又跨界的龐大神曲庫（持續收錄更新中） 打開我的曲目清單，大家可能會以為走錯棚，因為題材跨度實在太大了： 1. 港片殭屍情懷（林正英道長宇宙）： 《一眉道人》、《殭屍先生》 《殭屍家族》（超催淚的溫馨小殭屍配樂） 《新殭屍先生》（沒錯，就是紅白雙煞迎親那段超詭異的《百鬼霧林》！） 2. 生活迷因與時代記憶： 全家便利商店進門新鈴聲（腦內自動響起叮咚聲） 台灣路上每天都在聽的「資源回收車配樂」（其實是台語老歌《收酒矸》） Samsung 經典手機鈴聲《Homecoming》 經典手遊《神魔之塔》戰鬥背景音樂《夜幕下的旅途》、抖音爆紅神曲《一笑江湖》 3. 童年動漫熱血與回憶殺： 《灌籃高手》片頭曲《好想大聲說喜歡你》 《犬夜叉》經典催淚插曲《穿越時空的思念》 4. 龐大的特攝宇宙（超過 30 首經典）： 《鎧甲勇士》全系列（熱血處刑曲《戰鬥–通往勝利》、《帝皇再臨》、《不敗的英雄》等） 《超人力霸王》橫跨數十年的經典（初代、雷歐、迪卡《Take Me Higher》、帝納、高斯、納克斯《英雄》、梅比斯、捷德等） 《忍風戰隊破裏劍者》（主題曲以及全網零樂譜的傳奇神曲《幸せSHAKING HANDS》） 《假面騎士空我》、《假面騎士Build》、《魔彈戰記龍劍道》、《超星神》 像林正英的配樂或忍風戰隊的插曲，在網路上根本查不到官方樂譜，全球各大樂譜社群也幾乎沒有純淨 MIDI。不自己聽音彈出來，網頁根本沒數據可以放！未來我也會繼續把更多回憶殺曲目聽音錄製進去。 🎹 Part 2：設備受限下的「雙拇指極限挑戰」 其實，如果有條件的話，最完美的做法是外接一台具備 MIDI 錄製功能的實體電子鋼琴。實體琴鍵完全符合人體工學，能靠十根手指靈活彈奏，不僅能同時兼顧複雜的多指和弦與飽滿的低音伴奏，演奏時的手感也流暢得多。 但殘酷的現實是——我家裡根本沒有那種昂貴的實體電鋼琴 🥲。 沒有實體樂器，就只能靠手邊現有的工具硬上！我只能在手機小小的螢幕上，完全依賴「左手大拇指＋右手大拇指」在 Perfect Piano 上一鍵一鍵敲出來。 用兩根拇指彈琴有極大的物理限制： 1. 配樂不得不單純化：手指數量有限，無法像十指連彈那樣鋪出華麗的多聲部對位伴奏，只能將重心放在精準的主旋律與核心節奏上。 2. 高速曲目的手指抽筋地獄：要在玻璃小螢幕上用兩隻拇指彈奏 BPM 130 以上的曲子（像《假面騎士 Build》或《龍劍道》），鍵位密密麻麻，黑白鍵交錯極容易按錯，手指真的彈到快抽筋！ 但也正是因為這個硬體限制，逼出了一個工程師的硬核解法： 既然手指在手機黑白鍵上轉不過來，那我何不把曲子全部先改編成最順手、只有白鍵的 C 大調來彈奏錄製，到了網頁端，再靠自己寫的演算法幫聽眾即時還原成原曲調性？ 💡 Part 3：JavaScript 轉調演算法怎麼做？ 在 MIDI 數位通訊協定中，每個音高都是一個 0～127 的整數（例如中央 C，即 C4 是 60）。 轉調的本質，在程式底層其實就是純量數學加減： const targetMidiNote = note.midi + transpose; synth.triggerAttackRelease( Tone.Frequency(targetMidiNote, "midi"), note.duration, startTime + note.time ); 例如《不敗的英雄》原曲是 B 大調，我在手機上用雙拇指錄製時，先用最好按的 C 大調（60）錄音；到了網頁上，使用者只要在選單切換 -1，音訊引擎就會在發聲瞬間換算成對應的物理頻率（Hz），完美還原原曲調性！ 這就是程式設計的魅力：當硬體設備有限制時，就用演算法把它補回來！ 🤔 Part 4：聲學物理冷知識：為什麼要選「-1」，千萬不能選「+11」？ 在純樂理計算上，「降 1 個半音（-1）」 和 「升 11 個半音（+11）」，算出來的音名都是 B。 但如果你真的在程式裡把音符 +11，聽覺上會發生災難性的音域暴走失真（Octave Displacement）！ 如果選 +11：等於把整首歌往上硬拔了接近一個八度，原本在中低音區熱血沉穩的英雄戰鬥曲，瞬間變成尖銳刺耳的蚊子叫。 改選 -1：音符僅向下微幅平移半音，牢牢鎖在原本演奏時的同一個八度區間，保留飽滿的基頻。 這是我在寫這個專案時深刻體會到的一點：數學上的等價，不等於聲學物理與人耳體感上的等價！ 🔊 Part 5：波形合成（Oscillator）與 ADSR 包絡線 除了轉調，我還加入了 4 種基礎振盪器（Oscillator）波形切換，讓網頁透過計算產生不同音色： 1. 圓潤鋼琴風 (Triangle)：三角波諧波衰減快，搭配短 Attack、長 Release 的包絡線，模擬實體打擊樂器的餘音。 2. 明亮電子琴 (Sawtooth)：鋸齒波包含豐富連續諧波，一秒還原昭和特攝的復古電子合成器感！ 3. 復古 8-bit (Square)：方波滿滿奇數諧波，秒回紅白機時代。 4. 柔和純音 (Sine)：乾淨的正弦波。 📱 Part 6：行動端踩坑血淚（iOS 實體靜音鍵之謎） 做完丟到手機上測試時，我一度懷疑人生：「為什麼手機上播完全沒聲音？但電腦上好好的？」 最後查底層規範才抓到兇手： 在 iOS（Safari / WebKit）的機制中，網頁端使用 AudioContext 即時合成的聲音，預設被歸類在 Ambient（環境音） 類別。 當你的 iPhone 側邊撥動開關切在「靜音模式」時，系統為了不打擾使用者，會硬生生攔截所有 Ambient 音訊輸出（這就是為什麼 YouTube 影片有聲音，但網頁合成音效被吃掉的原因）。切回響鈴模式，聲音立刻就出來了！ 🛠️ 結語與心得 這個專案結合了耳聽採譜、手機拇指體感彈奏、MIDI 二進位解析、AudioContext 時間軸排程校準，到前端音訊物理特性的控制。 雖然沒有專業的實體電鋼琴與十指連彈的華麗伴奏，但在受限的環境下用兩根手指硬幹出來的旋律，再搭配程式演算法去克服痛點，這整個過程讓我更深刻體會到科技與音樂交織的樂趣。 網頁前端遠不只是排版與打 API，透過 Web Audio API，瀏覽器完全有能力成為強大的音訊處理工作站。每一首親手彈出的音符，搭配程式碼的即時運算，讓科技與音樂產生了最純粹的共鳴。 大家平常寫 Web 或 Side Project 時，也嘗試過將音樂或聲音元素整合進自己的專案中嗎？歡迎一起在留言區交流討論！