點擊上方的語言選單以切換語言

🎹 數位音訊與 MIDI 數據處理:多波形合成器與即時轉調實證

💡 數位音訊合成與轉調原理

本網頁底層基於 Tone.js 網頁音訊架構(Web Audio API),核心運作包含以下兩個物理與數學邏輯:

1. JavaScript 轉調演算法

在數位音樂(MIDI)協議中,每個音階都對應一個 0 到 127 的整數 MIDI Number
本程式透過算術運算達成即時轉調:在音符觸發前執行 note.midi + transpose
例如:原本演奏錄製的 C4 (MIDI 編號 60) 加上 3 個半音(transpose = 3),數值會變為 63 (D#4),再由音訊引擎將該編號換算成對應的物理頻率(Hz)發聲。

2. 波形合成(Oscillator)與包絡線(Envelope)

網頁能切換不同的聲音類型,是透過改變訊號產生器(Oscillator)的物理波形與振幅包絡線(ADSR Envelope)來模擬不同樂器的聽感:

⚠️ 核心觀點:技術無法取代演奏能力

雖然程式可以透過演算法輕鬆改變調性與音色,但「優質的旋律數據」必須源於真實且紮實的演奏功底
本網頁所展示的 34 首精選旋律,皆是我本人純手工在行動裝置狹小的螢幕上,完全僅憑「左手大拇指與右手大拇指」的極限協調,在 Perfect Piano 中開啟 MIDI 錄製模式辛苦彈奏而成,絕非使用網路上現成的數位音訊檔案。

在小螢幕上以雙拇指精準駕馭如《魔彈戰記龍劍道》或《假面騎士 Build》等每分鐘超過 130 拍(BPM)、音符密度極高的快節奏特攝曲目,要求創作者具備極高的節奏感、動態掌控力與鍵位空間感。這些親自演奏錄製的 MIDI 數據,完整保留了人類演奏特有的細微情感,是純程式動態生成或死板的 Q 點量化所無法比擬的。

🛠️ MIDI 處理器實作

請上傳你使用 Perfect Piano 或其他工具錄製的 .mid 檔案:







📱 行動裝置(手機)瀏覽發聲重要提示與 Web Audio 原理:
當你使用手機瀏覽本網頁時,請務必將手機側邊的「實體靜音開關」關閉(切換至響鈴模式),否則網頁會完全沒有聲音。

💡 為什麼開啟靜音模式會導致網頁沒聲音?(技術原理探討)
本網頁是利用 HTML5 的 AudioContext(Web Audio API)在前端即時運算並合成波形。在 iOS(Safari/WebKit 核心)與部分 Android 系統的底層音訊類別(Audio Session Category)設計中,網頁即時合成音訊預設會被歸類為 Ambient(環境音效)或次要媒體。

當手機開啟實體靜音鍵時,系統為了不打擾使用者,會強制壓制所有 Ambient 類別的音訊輸出(如同遊戲背景音效會被切斷,但 YouTube 預錄影片的 Playback 類別不會被切斷)。因此,這並非程式邏輯發生 Bug,而是行動作業系統為了維護使用者體驗而設置的硬體層級攔截。播放前請確保響鈴已開啟!

🎵 點擊播放我的演奏 (支援即時轉調與調性還原)

以下旋律皆為我使用 Perfect Piano 錄製,點擊後會依據上方選單的「升降調」與「聲音類型」設定直接動態播放。

💡 演奏調性特調說明:
為了在行動裝置狹小的螢幕上確保雙拇指彈奏的最高精確度與流暢度,本清單中的某些曲子並非按照原調演奏,而是由我改編為最適合鍵盤指法特徵的 C 大調進行實體錄製(例如:原本為 B 大調的《不敗的英雄》、以及原本為 降 D 大調的《淡淡的愛意》,錄音主體皆已統一轉為 C 大調)。

讀者若想聆聽原汁原味的原曲調性,只需在上方「選擇升降調」選單中,動態切換至對應的半音偏移量(例如:《不敗的英雄》選擇 -1+11 即可動態還原為 B 大調),這正是本專案「即時移調演算法」與「演奏數據化」的核心實用價值所在!

🤔 為什麼要改用負數(-1),而不是原本的升調(+11)?(聲學物理與體感痛點)
雖然在純數學與名義樂理上,「降 1 個半音(-1)」「升 11 個半音(+11)」在音名上是等音對應(例如 C 降半音是 B,C 升 11 個半音也是高八度的 B)。但在數位音訊的實際播放中,兩者會帶來完全不同的災難性聽感:

1. 音域暴走失真(Octave Displacement):如果選用 +11,程式會硬生生把所有音符集體往上提拉接近一個完整的八度。這會把我原本在舒適中音區、帶著厚實情感錄製的拇指演奏,強行逼入極高音的「尖銳區」,聽起來會變得單薄、刺耳,完全失去原曲該有的熱血與宏大感。

2. 還原真實音頻頻率:改用 -1 時,音符僅僅是微幅向下修正一個半音,維持在原本演奏的同一個八度音域內。這樣能完美保留我當初模擬實體鋼琴與戰隊電子琴時的飽滿中低音基頻,確保聽覺效果流暢、自然且完全不失真。



































































※我沒有將所有錄製好的檔案都上傳過來,因為我不想佔太多空間。上傳的這些檔案已經足夠展示轉調功能了!

分享到 Facebook | 分享到 Line | 分享到 X