利用 GetUserMedia 和 MediaRecorder API 玩轉音頻錄制、播放和下載
在這個數字化的時代，網頁端的音頻處理能力已經成為一個非常熱門的需求。本文將詳細介紹如何利用 getUserMedia 和 MediaRecorder 這兩個強大的 API，實現網頁端音頻的錄制、處理和播放等功能。
讓我們開始這個音頻處理的旅程吧!
1、getUserMedia 和 MediaRecorder API 簡介
getUserMedia 和 MediaRecorder 是 HTML5 中兩個非常重要的 API，用于訪問設備媒體輸入流并對其進行操作。
getUserMedia
getUserMedia 允許網頁端訪問用戶設備的媒體輸入設備，比如攝像頭和麥克風。通過該 API，在獲得用戶授權后，我們可以獲取這些媒體流的數據，并用于各種網頁應用場景中。
典型的使用方式如下:
// 請求獲取音頻流
navigator.mediaDevices.getUserMedia({
audio: true
})
.then(stream => {
// 在此處理音頻流
})getUserMedia 接受一個 constraints 對象作為參數,通過設置配置來請求獲取指定的媒體類型，常見的配置有:
- audio: Boolean 值，是否獲取音頻輸入。
- video: Boolean 值，是否獲取視頻輸入。
- 以及更詳細的各種音視頻參數設置。
MediaRecorder
MediaRecorder API 可以獲取由 getUserMedia 生成的媒體流，并對其進行編碼和封裝，輸出可供播放和傳輸的媒體文件。
典型的用法如下:
// 獲取媒體流
const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
// 創建 MediaRecorder 實例
const mediaRecorder = new MediaRecorder(stream);
// 注冊數據可用事件,以獲取編碼后的媒體數據塊
mediaRecorder.ondataavailable = event => {
audioChunks.push(event.data);
}
// 開始錄制
mediaRecorder.start();
// 錄制完成后停止
mediaRecorder.stop();
// 將錄制的數據組裝成 Blob
const blob = new Blob(audioChunks, {
type: 'audio/mp3'
});簡單來說，getUserMedia 獲取輸入流，MediaRecorder 對流進行編碼和處理，兩者結合就可以實現強大的音視頻處理能力。
2、獲取和處理音頻流
了解了基本 API 使用方法后，我們來看看如何獲取和處理音頻流。
獲取音頻流
首先需要調用 getUserMedia 來獲取音頻流，典型的配置是:
const stream = await navigator.mediaDevices.getUserMedia({
audio: {
channelCount: 2,
sampleRate: 44100,
sampleSize: 16,
echoCancellation: true
}
});我們可以指定聲道數、采樣率、采樣大小等參數來獲取音頻流。
選擇錄音設備
使用 navigator.mediaDevices.enumerateDevices() 可以獲得所有可用的媒體設備列表，這樣我們就可以提供設備選擇功能給用戶，而不僅僅是默認設備。
舉例來說，如果我們想要讓用戶選擇要使用的錄音設備:
// 1. 獲取錄音設備列表
const audioDevices = await navigator.mediaDevices.enumerateDevices();
const mics = audioDevices.filter(d => d.kind === 'audioinput');
// 2. 提供設備選擇 UI 供用戶選擇
const selectedMic = mics[0];
// 3. 根據選擇配置進行獲取流
const constraints = {
audio: {
deviceId: selectedMic.deviceId
}
};
const stream = await navigator.mediaDevices.getUserMedia(constraints);這樣我們就可以獲得用戶選擇的設備錄音了。
處理音頻流
獲得原始音頻流后，我們可以利用 Web Audio API 對其進行處理。
例如添加回聲效果:
// 創建音頻環境
const audioContext = new AudioContext();
// 創建流源節點
const source = audioContext.createMediaStreamSource(stream);
// 創建回聲效果節點
const echo = audioContext.createConvolver();
// 連接處理鏈
source.connect(echo);
echo.connect(audioContext.destination);
// 加載回聲沖擊響應并應用
const impulseResponse = await fetch('impulse.wav');
const buffer = await impulseResponse.arrayBuffer();
const audioBuffer = await audioContext.decodeAudioData(buffer);
echo.buffer = audioBuffer;通過這樣的音頻處理鏈，我們就可以在錄音時添加回聲、混響等音效了。
3、實現音頻的錄制和播放
接下來看看如何利用這些 API 實現音頻的錄制和播放。
錄制音頻
點擊開始錄音后，我們進行以下步驟:
- 調用 getUserMedia 獲取音頻流。
- 創建 MediaRecorder 實例,傳入音頻流。
- 注冊數據可用回調,以獲取編碼后的音頻數據塊。
- 調用 recorder.start() 開始錄制。
- 錄制完成后調用 recorder.stop()。
let recorder;
let audioChunks = [];
// 開始錄音 handler
const startRecording = async () => {
const stream = await navigator.mediaDevices.getUserMedia({
audio: true
});
recorder = new MediaRecorder(stream);
recorder.ondataavailable = event => {
audioChunks.push(event.data);
};
recorder.start();
}
// 停止錄音 handler
const stopRecording = () => {
if(recorder.state === "recording") {
recorder.stop();
}
}播放音頻
錄音完成后，我們可以將音頻數據組裝成一個 Blob 對象，然后賦值給一個 <audio> 元素的 src 屬性進行播放：
// 錄音停止后
const blob = new Blob(audioChunks, { type: 'audio/ogg' });
const audioURL = URL.createObjectURL(blob);
const player = document.querySelector('audio');
player.src = audioURL;
// 調用播放
player.play();這樣就可以播放剛剛錄制的音頻了。
后續也可以添加下載功能等。
4、音頻效果的處理
利用 Web Audio API，我們可以添加各種音頻效果，進行音頻處理。
例如添加回聲效果:
const audioContext = new AudioContext();
// 原始音頻節點
const source = audioContext.createMediaStreamSource(stream);
// 回聲效果節點
const echo = audioContext.createConvolver();
// 連接處理鏈
source.connect(echo);
echo.connect(audioContext.destination);
// 加載沖擊響應作為回聲效果
const impulseResponse = await fetch('impulse.wav');
const arrayBuffer = await impulseResponse.arrayBuffer();
const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
echo.buffer = audioBuffer;這樣在錄制時音頻流就會經過回聲效果處理了。
此外，我們還可以添加混響、濾波、均衡器、壓縮等多種音頻效果，使得網頁端也能處理出專業級的音頻作品。
5、實時語音通話的應用
利用 getUserMedia 和 WebRTC 技術，我們還可以在網頁端實現實時的點對點語音通話。
簡述流程如下:
- 通過 getUserMedia 獲取本地音視頻流。
- 創建 RTCPeerConnection 實例。
- 將本地流添加到連接上。
- 交換 ICE 候選信息,建立連接。
- 當檢測到連接后,渲染遠端用戶的音視頻流。
這樣就可以實現類似 Skype 的網頁端語音通話功能了。
// 1. 獲取本地流
const localStream = await navigator.mediaDevices.getUserMedia({
audio: true,
video: true
});
// 2. 創建連接對象
const pc = new RTCPeerConnection();
// 3. 添加本地流
localStream.getTracks().forEach(track => pc.addTrack(track, localStream));
// 4. 交換 ICE 等信令,處理 ONADDSTREAM 等事件
// ...
// 5. 收到遠端流,渲染到頁面
pc.ontrack = event => {
remoteVideo.srcObject = event.streams[0];
}獲取本地輸入流后，經過編碼和傳輸就可以實現語音聊天了。
6、兼容性和 Latency 問題
盡管 getUserMedia 和 MediaRecorder 在現代瀏覽器中已經得到了較好的支持，但由于不同廠商和版本實現存在差異，在實際應用中還是需要注意一些兼容性問題：
- 檢測 API 支持情況，提供降級方案。
- 注意不同瀏覽器對 Codec、采樣率等參數支持的差異。
- 封裝瀏覽器差異，提供統一的 API。
此外，錄音和播放也存在一定的延遲問題。我們需要針對 Latency 進行優化，比如使用更小的 buffer 大小，壓縮數據包大小等方法。
7、結語：開啟音頻創作的新紀元
getUserMedia 和 MediaRecorder 為網頁端帶來了強大的媒體處理能力。通過它們，現在我們可以方便地在網頁中實現錄音、音頻效果處理以及實時語音通話等功能了。
當然，在使用時也需要注意瀏覽器兼容性，以及保障用戶隱私等問題。了解這些 API 的工作原理，可以讓我們開發出更加優秀的音頻類 Web 應用。
