【創意編程】使用網頁-讀取麥克風聲音

前陣子在兩廳院駐館的呈現中,我們嘗試使用網頁讀入環境的聲音,做為控制、觸發作品走向的條件。今天就來分享從網頁使用 Javascript 讀取麥克風聲音的簡單概念吧!

 

網頁難道一直在收音嗎?

回想一下,當你打開新下載的 APP ,有時會跳出「是否同意使用相簿」、「是否同意使用行事曆」或「是否同意使用麥克風」等各種詢問視窗。對網頁而言亦是如此:故事的起頭得從要求權限開始。

網頁跳出允許視窗

首先使用 WebRTC(Web Real-Time Communication)中的 API getUserMedia() 要求使用用戶裝置的音訊。在用戶點選同意後,API 會回傳一筆麥克風的資料(stream)。

const handleMic = (stream) => {
	// handle stream here
}
navigator.mediaDevices.getUserMedia({audio: true}).then(handleMic);

得到麥克風的資料以後,再使用 Web Audio API 來處理資料。

 

在網頁蓋一個聲音工廠

Web Audio API 是一套幫助開發者在網頁上操作與處理音訊的程式介面。要使用 Web Audio API,必須先創建一個 AudioContext。AudioContext 就像一座聲音工廠,這座工廠中有多個單位或設備協力產出目標產品(聲音或相關資料)。

// global variable
let AudioContext = window.AudioContext||window.webkitAudioContext;
let context = new AudioContext();

創立了聲音工廠(AudioContext)後,可以選擇適合的單位或設備,並因應需求設計操作與執行的步驟。在 Web Audio API 裡,每個單位及設備被稱作一個 AudioNode。由於今天的目的是讀取麥克風資料,我們使用 createMediaStreamSource()createAnalyser() 得到兩個需要的工廠單位(AudioContext): MediaStreamAudioSourceNodeAnalyserNode

// in Handle Mic function
microphone = context.createMediaStreamSource(stream);
analyser = context.createAnalyser();

其中,MediaStreamAudioSourceNode 是個音訊來源。在聲音工廠中,它負責接收工廠外部的物料,再將物料(音訊)傳遞給後續處理的單位。而 AnalyserNode 主責分析,它不改造與加工音訊,但能分析音訊、提供相關數據。

AnalyserNode 示意圖 ( 圖片來源:https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode ).

創造出工廠單位後,接著使用 connect() 函式建立溝通管道——讓接收物料的窗口把音訊傳遞給分析單位。

microphone.connect(analyser);

做到這裡,聲音工廠的大致架構就完成了!目前有了一個小工廠,單位部門、工作流程都設計妥當。除了還不會發生任何事。

 

所以我說那個數據呢?

最後階段是跟分析單位(AnalyserNode)要資料。AnalyserNode 可以提供即時的時域(time-domain)頻域(frequency-domain)數據。

在得到數據以前,我們需要先給定 AnalyserNode 的 fftSize。由於 fftSize 牽涉到域轉頻域的數學運算,這裡不多做解釋。只要先記得 fftSize 需要設定成 2 的倍數,數字越大,代表頻域的數據被切分得越細。選定 fftSize 後,創造一個長度為 frequencyBinCount (frequencyBinCount 是 fftSize 數量的一半)、空的 Uint8 陣列,作為未來讀取數據的容器。

接著,如果需要時域數據,可以使用:

analyser.getByteTimeDomainData(dataArray);

得到 dataArray 陣列中存著各個 frame 的音訊數值。

或在需要頻域時使用:

analyser.getByteFrequencyData(dataArray);

將各頻率區間的數值大小存入 dataArray 陣列。

如此一來,音訊數據到手,除了可以應用在視覺化上,也可以從陣列中提取其他資訊(音量、頻率⋯⋯)啦!更多 AnalyserNode 介紹可以參考:WebAudioApi Analysis and Visualization

1 thought on “【創意編程】使用網頁-讀取麥克風聲音”

  1. 太酷了,老師好,我是去年在清大修你的msp程式設計的理鈞,剛好最近在爬文怎麼用網頁做音訊方面的處理,找到這裡發現居然在讀老師的文(?教學風格真的太友善了好好懂~~謝謝老師

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。

相關文章

把錄音室搬進耳朵裡? 淺談Ambisonics技術與應用

相信不少人都看過360度全景視角影片,畫面會隨著觀者的滑鼠移動來到不同的角度,然而不知道是否有人感到奇怪,為何視角變了,聲音的方向卻沒有改變呢?柏克萊音樂學院教授John Escobar 製作了一系列關於Spatial Audio的課程,在這個影片中,你會發現樂手的聲音方向會隨著視角而有所改變,彷彿是將整間錄音室搬進耳朵裡,這是怎麼做到的呢?讓我們簡單談談Ambisonics 這項技術吧!

閱讀全文 »

Touch Board 基礎設定教學

這塊觸摸板是一個可以使你的項目變得可互動、有響應、變聰明或是變有趣的工具。通過將材料表面轉換成觸摸感應介面,就可以利用這塊互動板來改變周圍世界!可以在你的牆上做一個女巫燈、紙鋼琴或者創造一些從來沒有人想到的東西。不管是帶領工作坊、設計教案、展覽或現場表演,Touch Board都會是最佳入門工具!

閱讀全文 »
回到頂端