隨著HTML5技術(shù)的逐漸成熟，它對(duì)于Web開(kāi)發(fā)工程師而言，變得越來(lái)越有趣。其中一個(gè)新特性是支持錄制音頻的API。下面我們就來(lái)分享一段使用HTML5錄制音頻的代碼。

//獲取元素
var recordBtn = document.getElementById('recordBtn');
var stopBtn = document.getElementById('stopBtn');
var audioPlayer = document.getElementById('audioPlayer');
//媒體對(duì)象
var mediaRecorder = null;
var chunks = [];
recordBtn.onclick = function () {
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({audio: true})
.then(function (stream) {
//開(kāi)始錄制
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start();
//收集音頻
mediaRecorder.ondataavailable = function (e) {
chunks.push(e.data);
};
//結(jié)束收集
mediaRecorder.onstop = function () {
//將收集到的音頻進(jìn)行拼接并生成Blob
var blob = new Blob(chunks, { type: 'audio/mp3' });
//通過(guò)URL.createObjectURL將Blob轉(zhuǎn)化為URL
var url = URL.createObjectURL(blob);
//將URL賦給audioPlayer
audioPlayer.src = url;
chunks = []; //重置chunks
};
})
.catch(function (err) {
console.error(err.name + ": " + err.message);
});
}
};
stopBtn.onclick = function () {
if (mediaRecorder !== null) {
mediaRecorder.stop();
}
};

在這段代碼中，我們首先獲取了三個(gè)元素，分別是“開(kāi)始錄音”按鈕、 “停止錄音”按鈕和音頻播放器。我們通過(guò) getUserMedia 函數(shù)獲取了音頻流，并使用 MediaRecorder 對(duì)象來(lái)實(shí)現(xiàn)捕獲音頻的功能。捕獲的數(shù)據(jù)保存為 Blob 對(duì)象，并通過(guò)使用 URL.createObjectURL 將其轉(zhuǎn)化為在播放器中可以使用的 URL。

這就是一段基本的HTML5錄制音頻功能代碼。開(kāi)發(fā)者們可以根據(jù)自己的需要加以修改和擴(kuò)展，實(shí)現(xiàn)更多有趣的功能。