使用 MediaRecorder 录制后，音频将不再在浏览器上播放

Question

（请参阅https://github.com/norbjd/wavesurfer-upload-and-record 以获取最小的可重现示例）。

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

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

document
    .querySelector('[data-action="record"]')
    .addEventListener('click', () => {
        // re-use audio context from wavesurfer instead of creating a new one
        const audioCtx = wavesurfer.backend.getAudioContext();
        const dest = audioCtx.createMediaStreamDestination();
        const audioStream = dest.stream;

        audioCtx.createMediaElementSource(audio).connect(dest);

        const chunks = [];
        const rec = new MediaRecorder(audioStream);
        rec.ondataavailable = (e) => {
            chunks.push(e.data);
        }
        rec.onstop = () => {
            const blob = new Blob(chunks, { type: "audio/ogg" });
            const a = document.createElement("a");
            a.download = "export.ogg";
            a.href = URL.createObjectURL(blob);
            a.textContent = "export the audio";
            a.click();
            window.URL.revokeObjectURL(a.href);
        }

        wavesurfer.play();
        rec.start();

        setTimeout(() => {
            rec.stop();
            wavesurfer.stop();
        }, 5 * 1000);
    });

单击录制按钮时，wavesurfer 应该会播放 (wavesurfer.play())，但我在浏览器中听不到任何声音（但我可以看到光标移动）。在录制结束时（5 秒，用setTimeout 设置），我可以下载录制的音频（rec.onstop 功能），并且声音可以在 VLC 或任何其他媒体播放器中正确播放。

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

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

audioCtx.createMediaElementSource(audio).connect(dest);

是问题，但没有它，我无法录制音频。

我还尝试重新创建一个新的AudioContext，而不是使用 wavesurfer 的：

const audioCtx = new AudioContext();

但效果不好（同样的问题）。

我已经在一个最小的可重现示例中重现了该问题：https://github.com/norbjd/wavesurfer-upload-and-record，因此请随时检查。欢迎任何帮助！

Answer 1

您不需要单独的音频上下文，但您需要使用与要录制的音频节点相同的音频上下文（在您的情况下来自 wavesurfer.js）创建的 MediaStreamDestination，并且您需要将音频节点连接到那个目的地。

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

https://github.com/petersalomonsen/javascriptmusic/blob/master/wasmaudioworklet/screenrecorder/screenrecorder.js

（在line 52 开始录制后，将音频节点连接到录制完成）

您可以在这里进行现场测试：https://petersalomonsen.com/webassemblymusic/livecodev2/?gist=c3ad6c376c23677caa41eb79dddb5485

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

您可以在此视频中看到正在完成的实际录制：https://youtu.be/FHST7rLxhLM

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

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

特别是针对您使用 wavesurfer 的情况：

不仅仅是backend: 'MediaElement'，而是切换到backend: 'MediaElementWebAudio',

除了audioCtx.createMediaElementSource(audio).connect(dest);，您可以更改为wavesurfer.backend.sourceMediaElement.connect(dest); 以重用wavesurfer 中的现有源（但没有这个也可以工作）。