如何使用 javascript 擷取語音資料并播放

該網站想要使用你的麥克風

在我們開發網頁的時候，偶爾會有需要使用者錄音的情況。那麼就需要用到這個API：navigator.mediaDevices.getUserMedia

一調用這個方法，一般浏覽器就會彈出标題的這句話，這是在問使用者索要權限。該方法可以問使用者索取麥克風以及攝像頭的權限，不過這裡我們就隻需要麥克風就足夠。

var constraints = { audio: true, video:false };
var promise = navigator.mediaDevices.getUserMedia(constraints);
           

這個方法傳回一個 Promise 對象，成功後會resolve回調一個 MediaStream 對象。若使用者拒絕了使用權限，或者需要的媒體源不可用，promise會reject回調一個 PermissionDeniedError 或者 NotFoundError 。

如果調用成功，我們就可以獲得MediaStream，而我們需要做的就是吧MediaStream記錄下來，形成一段資料，之後不論是播放還是上傳到伺服器都更容易。

這時我們就需要新的類。MediaRecorder。MediaRecorder會幫助我們将MediaStream對象中的資料記錄下來。

具體代碼如下：

var constraints = { audio: true,video:false }
var promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then(function (stream) {
    var audio = document.createElement('audio');
    var recorder = new MediaRecorder(stream);
    recorder.start(); // 開始記錄

    setTimeout(() => { recorder.stop() }, 5000); // 5秒後停止記錄

    recorder.ondataavailable = function (event) {
    	// 當停止記錄後播放資料
        console.log(event.data); // Blob
        audio.src = URL.createObjectURL(event.data);
        audio.play()
    }
});

promise.catch(function (error) {
    console.log(error)
});
           

這樣當運作的時候就會自動記錄5s并播放剛才的錄音了。

需要将MediaRecorder.stop方法執行後就會觸發ondataavailable的回調函數，如果需要将資料記錄或者上傳，隻需要在回調函數中進行處理即可。