畫一條線如何變成旋律：Web Audio 排程實作

先把空間轉成音樂參數

MelodyCanvas 將橫座標解讀為時間、縱座標解讀為音高、線條顏色解讀為樂器。畫布以 4/4 拍與十六分音符時間格取樣，因此使用者不必精準點在某個音符上，系統也能得到有序事件。增加小節時，既有線條保留原本的絕對時間；增加音域時，既有線條保留原本的音高。

量化讓自由繪畫能穩定播放，但也會失去部分手勢細節。產品沒有假裝每個像素都對應無限精確的音樂，而是把它定位為低門檻的創作工具。

連續線條不能變成一串生硬短音

如果每個時間格都獨立播放取樣，斜線聽起來會像快速重複觸發，長橫線也可能不斷重新起音。實作中會補齊同一條連續線經過的時間格，並在相鄰聲音間加入短交叉淡化，使音高變化連續，同時避免前一個音過早被截斷。

實際錄音取樣不可能涵蓋所有音高與每種裝置格式。系統會從鄰近取樣做小幅變調，並同時提供 Ogg Opus 與 AAC/M4A，讓瀏覽器選擇可播放格式；單一取樣失敗時則回退到本機合成聲音，而不是讓整首作品停止。

為什麼不能只依賴頁面計時器

頁面動畫通常跟著螢幕更新，背景分頁、手機省電與主執行緒繁忙都會讓計時器延遲。音訊系統有自己的連續時鐘，更適合安排「某個聲音在未來哪個時間點開始」。MelodyCanvas 使用滾動式預先排程：先安排接下來數秒的聲音，再定期補上後續事件。

播放游標也讀取音訊輸出時間，而不是另外使用一套頁面秒錶。這樣畫面會跟著使用者真正聽到的進度，也能減少手機音訊裝置緩衝造成的視覺超前。

密集作品先保護聲音，再降低裝飾成本

大量線條可能在同一時間觸發許多聲音。混音匯流排需要限制峰值並壓縮過高音量，以避免疊加削波。作品超過 400 條線時，頁面會降低非關鍵動畫與畫面更新頻率，但不會因此刪除音符或截斷長音：視覺效能可以降級，作品內容不能悄悄改變。