Javascript 音频赢得'；使用MediaRecorder录制后，不再在浏览器上播放

（有关最小可复制示例，请参阅）

我正在使用将用户上传的音频显示为波形，并尝试添加一个功能来录制上传的部分音频

所以我创建了一个“录制”按钮（现在只录制5秒钟的音频），当点击它时，使用以下代码。我正在使用

MediaRecorder

API:

文档
.querySelector（“[data action=“record”]”）
.addEventListener（'单击'，（）=>{
//重新使用wavesurfer中的音频上下文，而不是创建新的音频上下文
const audioCtx=wavesurfer.backend.getAudioContext（）；
const dest=audioCtx.createMediaStreamDestination（）；
const audioStream=dest.stream；
createMediaElementSource（audio）.connect（dest）；
常量块=[]；
const rec=新媒体记录器（音频流）；
rec.ondataavailable=（e）=>{
推送（如数据）；
}
rec.onstop=（）=>{
constblob=newblob（块，{type:“audio/ogg”}）；
常量a=document.createElement（“a”）；
a、 下载=“export.ogg”；
a、 href=URL.createObjectURL（blob）；
a、 textContent=“导出音频”；
a、 单击（）；
window.URL.revokeObjectURL（a.href）；
}
海浪冲浪者；
rec.start（）；
设置超时（（）=>{
建议停止（）；
wavesurfer.stop（）；
}, 5 * 1000);
});

单击录制按钮时，wavesurfer应该播放（

wavesurfer.play（）

），但我无法从浏览器中听到任何声音（但我可以看到光标移动）。录制结束时（5秒，设置为

setTimeout

），我可以下载录制的音频（

rec.onstop

功能），声音可以在VLC或任何其他媒体播放器中正确播放

但是，我不能再通过浏览器在网页上播放音频了。我仍然可以录制音频，录制的音频可以正确下载和播放

我想知道为什么在第一次点击“录制”按钮后，浏览器上就不会播放音频了。我认为这一行：

audioCtx.createMediaElementSource（音频）.connect（目的地）；

这是个问题，但没有它，我就无法录制音频

我还尝试重新创建一个新的

AudioContext

，而不是使用wavesurfer的：

const audioCtx=new AudioContext（）；

但它并没有起到更好的作用（同样的问题）

---

我在一个最小的可复制的例子中复制了这个问题：，所以请随意查看。欢迎任何帮助

您不需要单独的audiocontext，但需要一个MediaStreamDestination，该MediaStreamDestination使用与要录制的audionode相同的audiocontext（在您的案例中来自wavesurfer.js）创建，并且您需要将audionode连接到该目的地

您可以在此处看到捕获音频和屏幕视频的完整示例：

（将audionode连接到录制是在上开始录制后完成的）

您可以在这里进行现场测试：

（切换“捕获”复选框开始录制，按“播放”按钮开始播放音乐，再次切换“捕获”复选框停止录制）

你可以看到这段视频的实际录制过程：

正如您在该示例中所看到的，录制完成后仍然可以播放音频

请注意，此示例仅针对Chrome和Firefox进行了测试

特别是针对wavesurfer的情况：

---

不要只使用

后端：“MediaElement”

，而是切换到

后端：“MediaElementWebAudio”

---

而不是

audioCtx.createMediaElementSource（audio）.connect（dest）

，您可以更改为

wavesurfer.backend.sourcemedialelement.connect（dest）

重用wavesurfer的现有源代码（但也可以不使用该源代码）。

谢谢您的回答。实际上，我已经用

wavesurfer.js

：

wavesurfer.backend.getAudioContext（）

中的现有上下文替换了新上下文，并遇到了相同的问题。但我如何才能获得“您已经拥有的MediaStreamDestination”？再次感谢：）您应该使用wavesurfer.js中的audiocontext创建mediastream目标：

wavesurfer.backend.getAudioContext（）.createMediaStreamDestination（）

感谢您的快速回答。我已经更新了代码：，但仍然存在问题。您是否看到其他可能出错的内容？请切换到

后端：“MediaElement”

，而不是

后端：“MediaElementWebAudio”

，然后切换到

audioCtx.createMediaElementSource（audio）.connect（dest）

，改为

wavesurfer.backend.sourcemedialelement.connect（dest）后端：“MediaElement”

更改为

后端：“MediaElementWebAudio”

就成功了！你能更新你的答案吗？这样我就可以接受了？非常感谢你！