在上述代码添加播放录音功能
时间: 2024-03-19 19:45:36 浏览: 16
好的,以下是添加了播放录音功能的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML5在线录音示例</title>
<meta charset="utf-8">
</head>
<body>
<button id="startRecordingButton">开始录音</button>
<button id="stopRecordingButton" disabled>停止录音</button>
<button id="playRecordingButton" disabled>播放录音</button>
<audio id="recordedAudio" controls></audio>
<script>
// 获取页面中的元素
var startRecordingButton = document.getElementById('startRecordingButton');
var stopRecordingButton = document.getElementById('stopRecordingButton');
var playRecordingButton = document.getElementById('playRecordingButton');
var recordedAudio = document.getElementById('recordedAudio');
// 定义录音机和媒体流
var mediaRecorder;
var mediaStream;
// 定义录音数据
var recordedChunks = [];
// 当点击“开始录音”按钮时调用此函数
function startRecording() {
navigator.mediaDevices.getUserMedia({ audio: true })
.then(function(stream) {
// 获取到麦克风的媒体流后,创建一个MediaRecorder对象
mediaStream = stream;
mediaRecorder = new MediaRecorder(stream);
// 开始录音
mediaRecorder.start();
// 更新页面中的按钮状态
startRecordingButton.disabled = true;
stopRecordingButton.disabled = false;
playRecordingButton.disabled = true;
// 当MediaRecorder开始录音时,将数据保存到一个Blob对象中
mediaRecorder.addEventListener('dataavailable', function(e) {
recordedChunks.push(e.data);
});
// 当录音结束时,将保存的数据合并成一个Blob对象,并将其设置为<audio>元素的src属性
mediaRecorder.addEventListener('stop', function() {
var blob = new Blob(recordedChunks, { type: 'audio/ogg; codecs=opus' });
recordedAudio.src = URL.createObjectURL(blob);
// 更新页面中的按钮状态
startRecordingButton.disabled = false;
stopRecordingButton.disabled = true;
playRecordingButton.disabled = false;
});
})
.catch(function(error) {
alert('无法访问麦克风:' + error);
});
}
// 当点击“停止录音”按钮时调用此函数
function stopRecording() {
// 停止录音,并释放麦克风的媒体流
mediaRecorder.stop();
mediaStream.getTracks().forEach(function(track) {
track.stop();
});
}
// 当点击“播放录音”按钮时调用此函数
function playRecording() {
var blob = new Blob(recordedChunks, { type: 'audio/ogg; codecs=opus' });
var audioUrl = URL.createObjectURL(blob);
var audio = new Audio(audioUrl);
audio.play();
}
// 为按钮添加事件处理程序
startRecordingButton.addEventListener('click', startRecording);
stopRecordingButton.addEventListener('click', stopRecording);
playRecordingButton.addEventListener('click', playRecording);
</script>
</body>
</html>
```
在此示例代码中,我们添加了一个“播放录音”按钮,并在录音结束后将录音数据保存到了一个数组中。当点击“播放录音”按钮时,我们将保存的录音数据合并成一个`Blob`对象,并使用`<audio>`元素来播放录音。同时,我们还更新了按钮的状态,以禁用不需要使用的按钮。