點選上方語言選單切換頁面語言。
在進行數位樂器互動介面的研究與示範時，我錄製了《Perfect Piano》的操作影片作為範例。最初使用的影片並非原始錄製，而是從我的小紅書帳號下載後再上傳至 WebStorm 專案中，透過 HTML 的 <video> 元素進行播放。播放結果顯示：聲音可以正常輸出，但琴鍵被按下的動畫並未正確顯示（如下影片所示）。
進一步分析發現，此問題並非僅僅來自影片壓縮或編碼錯誤，更是與應用程式本身的視覺回饋設計有關。《Perfect Piano》在互動設計上僅呈現「琴鍵被按下」的最終狀態，並未顯示手指觸控或按壓的過程。這樣的設計雖能減少視覺負擔，但在影片播放時會導致使用者難以直覺地對應觸發動作與聲音之間的關係。
相較之下，另一款應用程式《Marimba Real》在互動時會顯示琴槌敲擊琴鍵的完整動畫。這種視覺回饋的呈現方式不僅提高了使用者對聲音觸發過程的理解，也讓畫面與聲音之間的關聯更為明確。因此，視覺動態反饋的設計可視為數位樂器介面中一項重要的互動要素。所以同一首曲子在Marimba Real上演奏時，畫面與聲音能夠達到較高的一致性，如下影片所示。
為了提升影片示範的品質，我重新在Perfect Piano上錄製了這首曲子。此次錄製後，我將影片上傳至 TikTok 並進行後製處理（包含歌名、歌詞與中文翻譯等元素）。值得注意的是，TikTok 會在上傳成功後自動生成可下載的版本，該版本的畫質與原始錄製幾乎一致，顯示該平台在影片壓縮與轉碼上的優化技術相當成熟。
綜合上述觀察，可以發現數位樂器的使用體驗不僅取決於聲音輸出品質，更受到觸控回饋、畫面反應與多媒體資料處理技術的共同影響。這些因素彼此交織，形成了使用者與數位音樂互動時的整體感知體驗。
從計算機科學的角度來看，這樣的現象涉及多個層面：包含人機互動（Human–Computer Interaction, HCI）、多媒體資料壓縮與傳輸、以及使用者介面設計（User Interface Design）。因此，這次的案例不僅是影片播放的技術問題，更可作為探討數位音樂互動系統中技術與感知之間關係的具體例證。
從全端開發與多媒體處理的角度來看，影片品質與裝置的儲存空間（Disk Space）息息相關。當手機剩餘空間不足（例如低於 10%）時，作業系統為了維持運作，會強行降低螢幕錄影的位元率 (Bitrate) 以減輕寫入壓力。
這種「初級母帶」在經過小紅書等社群平台的暴力壓縮（Aggressive Compression）後，演算法會優先捨棄變動細節較小的像素。在《Perfect Piano》中，琴鍵變色屬於極微小的像素變動，常被演算法誤認為「數位雜訊」而遭到抹除，這正是造成「聲音在跑、畫面沒動」的技術主因。
實證建議：維持約 100 GB 的緩衝空間，能確保系統以最高位元率錄製原始訊號，保留更多視覺細節與真實音質，從根本上提升作品的「說服力」。
<video> 元素這裡的<video>元素是HTML中一個用來播放視頻的標籤，讓你可以在網頁上嵌入和播放各種視頻檔案。透過這個元素，我們可以像觀看YouTube影片那樣直接在網頁內播放視頻。不過，有時候，視頻格式或解析度等技術問題會影響其播放效果，就像這次《Perfect Piano》的問題一樣。
如果你將影片文件上傳到專案中，必須在<video>元素裡使用<source>來指定影片的路徑。比如，假設你的影片檔案叫做`example.mp4`並放在專案的`videos`資料夾中，代碼會是：
<video controls>
<source src="videos/example.mp4" type="video/mp4">
<source src="videos/example.ogv" type="video/ogg">
您的瀏覽器不支援影片播放。
</video>
如果影片存放在外部伺服器上，也可以提供完整的URL來引入影片。這樣，瀏覽器就會根據指定的路徑來尋找並播放影片。