html5声音录制代码下载
时间: 2023-09-02 08:04:32 浏览: 45
要在HTML5中进行声音录制,可以使用Web Audio API和MediaStream Recording API。首先,需要一个可以触发录制的按钮,用户点击该按钮时将开始录制。然后,需要创建一个具有音频输入的MediaStream对象,将其传递给MediaRecorder对象以进行录制。
以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>声音录制</title>
</head>
<body>
<button id="recordBtn">开始录制</button>
<audio controls></audio>
<script>
const recordBtn = document.getElementById('recordBtn');
const audio = document.querySelector('audio');
let mediaRecorder;
let chunks = [];
// 录制开始时触发
function handleStart() {
chunks = [];
mediaRecorder.start();
console.log('录制开始');
}
// 录制结束时触发
function handleStop() {
mediaRecorder.stop();
console.log('录制结束');
}
// 录制数据可用时触发
function handleDataAvailable(e) {
chunks.push(e.data);
}
// 录制完成时触发
function handleRecordingReady() {
const blob = new Blob(chunks);
const url = URL.createObjectURL(blob);
audio.src = url;
}
// 获取音频流并创建录制对象
function initializeRecording(stream) {
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.addEventListener('dataavailable', handleDataAvailable);
mediaRecorder.addEventListener('stop', handleRecordingReady);
}
// 按钮点击事件监听器
recordBtn.addEventListener('click', () => {
navigator.mediaDevices.getUserMedia({ audio: true })
.then(initializeRecording)
.then(handleStart);
});
</script>
</body>
</html>
```
该代码通过`getUserMedia()`方法从用户的音频输入设备(例如麦克风)获取音频流,并使用`MediaRecorder`对象开始录制。录制完成后,将生成的录制数据转换为Blob对象,并通过URL.createObjectURL()方法将其转换为可在`<audio>`元素中播放的URL。
请注意,由于浏览器的安全性限制,在使用该代码之前,可能需要在HTTPS协议下运行该页面或 localhost 环境下测试。