在現代Web開發中，音頻錄制功能越來越受到開發者的關注。無論是在線會議、語音識別還是簡單的語音留言，音頻錄制都是一個重要的功能。然而，實現一個跨瀏覽器的音頻錄制功能并非易事，因為不同瀏覽器對音頻錄制API的支持存在差異。本文將探討如何實現一個兼容Chrome、Firefox、Safari和Edge的音頻錄制功能，并生成標準的WAV格式音頻文件。
一、瀏覽器兼容性概述
在開始之前，我們需要了解不同瀏覽器對MediaRecorder API的支持情況，以及它們支持的音頻格式。
1. Chrome
- 支持：
MediaRecorderAPI。 - 音頻格式：默認生成
audio/webm格式。 - 注意事項：不支持直接生成
audio/wav格式。
2. Firefox
- 支持：
MediaRecorderAPI。 - 音頻格式：支持生成
audio/wav格式。 - 注意事項：也支持
audio/webm格式。
3. Safari
- 支持：
MediaRecorderAPI。 - 音頻格式：默認生成
audio/webm格式。 - 注意事項：不支持直接生成
audio/wav格式。
4. Edge
- 支持：
MediaRecorderAPI。 - 音頻格式：默認生成
audio/webm格式。 - 注意事項：不支持直接生成
audio/wav格式。
二、解決方案
為了實現一個跨瀏覽器的音頻錄制功能，我們有兩種主要的解決方案：
1. 統一使用audio/webm格式
在所有瀏覽器中使用audio/webm格式進行錄制。如果后端服務需要處理audio/wav格式，可以在服務器端將audio/webm轉換為audio/wav。這種方法的優點是簡單，缺點是需要后端支持格式轉換。
2. 在客戶端生成audio/wav格式
使用AudioContext和ScriptProcessorNode（或AudioWorkletNode）來錄制音頻，并生成標準的audio/wav文件。這種方法的優點是可以在客戶端生成標準的WAV文件，無需依賴后端轉換。缺點是實現相對復雜。
三、實現客戶端生成audio/wav格式
為了實現一個跨瀏覽器的音頻錄制功能，我們選擇第二種方案：在客戶端生成audio/wav格式。以下是實現步驟和代碼示例。
1. HTML結構
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Audio Recorder</title>
</head>
<body><button id="startButton">開始錄音</button><button id="stopButton" disabled>停止錄音</button><script src="recorder.js"></script>
</body>
</html>
2. JavaScript實現
let audioContext;
let processor;
let source;
let audioChunks = [];
let sampleRate = 16000;document.getElementById('startButton').addEventListener('click', async () => {try {const stream = await navigator.mediaDevices.getUserMedia({ audio: true });audioContext = new (window.AudioContext || window.webkitAudioContext)({ sampleRate });source = audioContext.createMediaStreamSource(stream);processor = audioContext.createScriptProcessor(4096, 1, 1);processor.onaudioprocess = event => {const inputBuffer = event.inputBuffer.getChannelData(0);audioChunks.push(new Float32Array(inputBuffer));};source.connect(processor);processor.connect(audioContext.destination);document.getElementById('startButton').disabled = true;document.getElementById('stopButton').disabled = false;} catch (error) {console.error('Error accessing microphone:', error);alert('無法訪問麥克風，請檢查權限設置');}
});document.getElementById('stopButton').addEventListener('click', () => {processor.disconnect();source.disconnect();audioContext.close();const mergedData = mergeArrays(audioChunks);const wavBlob = createWAVBlob(mergedData, sampleRate);const url = URL.createObjectURL(wavBlob);const a = document.createElement('a');a.href = url;a.download = 'recording.wav';a.click();document.getElementById('startButton').disabled = false;document.getElementById('stopButton').disabled = true;audioChunks = [];
});function mergeArrays(arrays) {const totalLength = arrays.reduce((acc, arr) => acc + arr.length, 0);const result = new Float32Array(totalLength);let offset = 0;for (const arr of arrays) {result.set(arr, offset);offset += arr.length;}return result;
}function createWAVBlob(audioData, sampleRate) {const numChannels = 1;const bitDepth = 16;const byteRate = sampleRate * numChannels * bitDepth / 8;const blockAlign = numChannels * bitDepth / 8;const buffer = new ArrayBuffer(44 + audioData.length * 2);const view = new DataView(buffer);writeString(view, 0, 'RIFF');view.setUint32(4, 36 + audioData.length * 2, true);writeString(view, 8, 'WAVE');writeString(view, 12, 'fmt ');view.setUint32(16, 16, true);view.setUint16(20, 1, true);view.setUint16(22, numChannels, true);view.setUint32(24, sampleRate, true);view.setUint32(28, byteRate, true);view.setUint16(32, blockAlign, true);view.setUint16(34, bitDepth, true);writeString(view, 36, 'data');view.setUint32(40, audioData.length * 2, true);const int16Data = new Int16Array(audioData.length);for (let i = 0; i < audioData.length; i++) {int16Data[i] = Math.min(1, Math.max(-1, audioData[i])) * 0x7FFF;}let offset = 44;for (let i = 0; i < int16Data.length; i++) {view.setInt16(offset, int16Data[i], true);offset += 2;}return new Blob([view], { type: 'audio/wav' });
}function writeString(view, offset, string) {for (let i = 0; i < string.length; i++) {view.setUint8(offset + i, string.charCodeAt(i));}
}
四、代碼說明
1. 開始錄音
- 使用
navigator.mediaDevices.getUserMedia獲取麥克風權限。 - 創建
AudioContext和ScriptProcessorNode，捕獲音頻數據并存儲到audioChunks中。
2. 停止錄音
- 斷開
ScriptProcessorNode和AudioContext的連接。 - 合并所有音頻數據片段，生成
audio/wav格式的Blob。
3. 生成WAV文件
- 使用
createWAVBlob函數將PCM數據轉換為WAV格式。 - 使用
URL.createObjectURL創建一個可下載的鏈接。
4. 工具函數
mergeArrays：合并所有音頻數據片段。createWAVBlob：生成WAV文件頭并轉換音頻數據。writeString：將字符串寫入DataView。
五、優點
- 跨瀏覽器兼容性：這種方法在所有現代瀏覽器中都能正常工作，包括Chrome、Firefox、Safari和Edge。
- 靈活性：可以在客戶端生成標準的WAV文件，無需依賴后端轉換。
六、結論
實現一個跨瀏覽器的音頻錄制功能并非易事，但通過使用AudioContext和ScriptProcessorNode，我們可以在客戶端生成標準的WAV文件，從而實現一個兼容所有現代瀏覽器的音頻錄制功能。希望本文的介紹和代碼示例能幫助你實現自己的音頻錄制功能。
