要实现HTML5录音功能，可以使用Web API中的MediaRecorder接口。下面是一个简单的示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5录音示例</title>
</head>
<body>
<h1>HTML5录音示例</h1>
<button id="startBtn">开始录音</button>
<button id="stopBtn" disabled>停止录音</button>
<script>
const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');
let chunks = []; // 存储录音数据的数组
let mediaRecorder; // 媒体录制器对象
// 开始录音
function startRecording() {
navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
// 创建媒体录制器对象
mediaRecorder = new MediaRecorder(stream);
// 监听数据可用事件，将数据存入数组
mediaRecorder.addEventListener('dataavailable', event => {
chunks.push(event.data);
});
// 监听录制结束事件，将数据转化为Blob对象
mediaRecorder.addEventListener('stop', () => {
const audioBlob = new Blob(chunks, { type: 'audio/mpeg' });
const audioUrl = URL.createObjectURL(audioBlob);
const audio = new Audio(audioUrl);
audio.controls = true;
document.body.appendChild(audio);
});
// 开始录制
mediaRecorder.start();
startBtn.disabled = true;
stopBtn.disabled = false;
});
}
// 停止录音
function stopRecording() {
// 停止录制
mediaRecorder.stop();
// 重置数组
chunks = [];
startBtn.disabled = false;
stopBtn.disabled = true;
}
// 绑定按钮点击事件
startBtn.addEventListener('click', startRecording);
stopBtn.addEventListener('click', stopRecording);
</script>
</body>
</html>
在这个html5实现录音功能代码示例中，我们首先获取了“开始录音”和“停止录音”两个按钮的DOM对象，以及一个数组chunks，用来存储录音数据。在startRecording()函数中，我们调用getUserMedia()方法获取麦克风权限并创建MediaRecorder对象。接着，我们监听了dataavailable事件和stop事件，分别在事件处理函数中将录音数据存入数组，并将数组中的数据转化为Blob对象，最后创建一个Audio对象并将其添加到页面中。在stopRecording()函数中，我们停止了录制并重置了数组。
需要注意的是，不同浏览器对MediaRecorder的支持程度不同，具体可以参考MDN文档。此外，在生产环境中，我们需要考虑音频格式、压缩方式、采样率等因素，以及如何上传、存储和处理录音数据。
评论