的原因是,录制的音频数据以Blob对象的形式保存,而浏览器无法直接播放Blob对象。为了在浏览器上播放录制的音频,需要将Blob对象转换为可播放的音频格式,如MP3、WAV等。
以下是一种解决方案:
let recordedBlobs = [];
function handleDataAvailable(event) {
if (event.data && event.data.size > 0) {
recordedBlobs.push(event.data);
}
}
mediaRecorder.ondataavailable = handleDataAvailable;
function download() {
const blob = new Blob(recordedBlobs, { type: 'audio/webm' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = 'recorded_audio.webm';
document.body.appendChild(a);
a.click();
setTimeout(() => {
document.body.removeChild(a);
URL.revokeObjectURL(url);
}, 100);
}
在上述代码中,我们将录制的音频数据保存在recordedBlobs数组中,并通过Blob对象的URL.createObjectURL方法创建一个可播放的URL。然后,我们创建一个隐藏的链接a,设置其href属性为该URL,并指定下载的文件名。最后,通过模拟点击链接a来下载音频文件。
这是一个简单的解决方案,如果需要更复杂的音频处理或播放功能,可以使用第三方库或API来实现,如Web Audio API、Howler.js等。
腾讯云相关产品推荐:
领取专属 10元无门槛券
手把手带您无忧上云