音樂創作領域中，除了非常厲害的音樂本身以外更重要當然是 MV 影像的創作，這兩個都是在推廣行銷中必備的元素。​那除了這兩個以外還可以再玩點什麼或增加些什麼更接近民眾呢？​

在電腦問世後，音樂製作的技術也進入了新的時代。可以利用電子合成的音色，經由電腦傳輸取代實體運送的音樂檔案，以及不需使用硬體的效果器軟體，正式讓數位音樂( Digital Music )的時代來臨與普及。

即使現在不需要一間大型的錄音室以及昂貴的樂器也能製作音樂，但對於編曲、作曲的原理以及數位音樂工作站（DAW, Digital Audio Workstation）的操作，對非專業音樂工作者來說並不友善，沒有相關樂理以及使用經驗下仍舊很難輕鬆做出音樂作品，於是開始有一些跨領域的創作者以及希望推廣音樂製作技術普及的學者開始尋找在更多平台上創作音樂的可能性。

在網頁越來越多以沉浸式體驗為追求的趨勢下，音樂也成為網站中更加重要的元素。在網頁上能做到與音樂相關創作的可能性也越來越多元，以下為各位分類介紹幾項較知名以及特別的音樂相關網站作品：

---

【教育類】

利用不需下載以及操作容易的特性，網站成為了一項使學習音樂更加容易的工具。搭配圖像的操作，使不同年齡層也能在不必了解生澀的原理下接觸音樂，並瞭解聲音生成的方式。

 

❶ Google Music Lab

由 Google 推出的 Chrome Music Lab ，主要以簡單可愛的互動效果，讓大家簡單瞭解基本的聲音原理，例如各種聲波的音色差異，聲音的高低如何產生等。特別是「OSCILLATORS」這款 Demo ，可以拉動、拖曳、長按小人來感受音樂的變化，用視覺化的方式瞭解音樂頻率、音色的變化概念。

https://musiclab.chromeexperiments.com/

 

❷ Ableton – Learning Synth

Ableton 是一個以電子音樂為主的編曲軟體，他們推出了這個網頁來特別介紹合成器的作用，我們可以親自使用鍵盤彈奏，並利用網頁上的旋鈕、滑桿等，改變想要的參數，網頁會依我們給的參數做出立即的調整，不需要專業器材也能了解關於合成器以及混音的大致概念。

https://learningsynths.ableton.com/

---

【音樂作品類】

許多音樂人及歌手也開始以網頁的方式讓人體驗他們的作品，搭配視覺之下，可以藉由觀賞及操作場境物件的方式，影響音樂的氛圍以及樂器的比重，同時在網頁動態之下更能體會音樂人想傳達的氣氛與情境。

 

❶ Yume – Helios

可以拖動畫面中的3D物件來添增音色、調整音樂豐富度到自己喜歡的情緒。

https://musiclab.chromeexperiments.com/

 

❷ Computerized Forms

Computerized Forms 是使用 Web Audio API 將海報設計轉換為音樂的實驗計畫。
每個作品都是由兩位創作者（平面設計、DJ）所聯名創作的，以平面視覺為主，加入動態海報手法，搭配音樂所呈現，非常棒的概念！

http://computerizedforms.com/marleigh-culver-dj-cndo/

---

【互動創作類】

隨著越來越多人加入研究此領域，也誕生了一些專為音樂打造的網頁程式語言的套件，例如 tone.js、howler.js 等，許多跨域創作者也開始挑戰更多有創意的互動方式，例如將聲音視覺化來幫助理解學習與創作的網站，或利用鏡頭捕捉動作來控制音樂產生的互動頁面，也開始挑戰更多結合與進化的可能性。

 

❶ BLOKDUST

將聲音的特色視覺化，選擇自己喜歡的音色，或依據喜歡的外型，組建自己的方塊組合，完成後可以聆聽或者分享自己產生的結果。

https://blokdust.com/

 

❷ Patatap

這個網站非常經典！大約在 6 年建立，因為這網站概念、手法、技術而衍生的網站也不在少素，算首次結合 Motion Graphics 的音樂互動網站 。操作是搭配 A~Z 不同按鍵創造畫面、聲音，長案可以混在一起，並且視覺重疊 MG 效果！手速夠快的話，就可以聽起來像是一段連續的音樂。

https://www.patatap.com/

 

❸ Theremix