如何在Javascript中重新播放音频Blob？

Question

我希望能够回放使用Web Audio API在javascript中录制的音频blob（wav）。

我尝试了以下方法：

function replayBlob( blob ) {
    var blobURL = window.URL.createObjectURL(blob);
    var audio0 = new Audio(blobURL);
    audio0.play();
}

但是这段代码无法重播音频blob。

我还尝试通过html音频标签重播blob：

<audio id="wavSource" 
    src="blob:http%3A//localhost/f0b6bae9-7c70-4793-8436-7755a40bae3f" 
    type="audio/wav" controls>
</audio>

使用编程方式设置Blob源，代码如下：

var blobURL = window.URL.createObjectURL(blob);
document.getElementById("wavSource").src = blobURL;

使用以下代码进行音频播放调用：

document.getElementById("wavSource").play();

但是没有声音播放。

为了验证，我使用以下命令下载了blob：

var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
a.href = blobURL;
a.download = "test.wav";
a.click();

下载的 Blob 包含正确的音频数据，格式为 wav。我该如何在 JavaScript 中从 Blob 中播放这些音频数据？

- user2212461

---

你确定这个Blob是wav格式的吗？这意味着如果你下载这个Blob，它将可以在媒体播放器中播放。 - dandavis

是的，它可以在媒体播放器中播放。还有其他什么原因导致我听不到声音吗？ - user2212461

尝试添加控件并将其附加到主体，看看是否可以通过这种方式播放它。 - dandavis

你不能在源代码中硬编码一个 Blob URL，它必须通过 JavaScript 设置。 - dandavis

我遇到了类似的问题。原来我的blobUrl最初是null。它导致了播放器崩溃，所以即使稍后将其设置为正确的值，播放器也不会响应。 - Chuanqi Sun

Answer 1

最简单的选择是转换为64位编码。

const reader = new FileReader();
reader.onload = function(e) {
    const srcUrl = e.target.result;
    audioNode.src = srcUrl;
};
reader.readAsDataURL(blob);

- Gibolt

Answer 2

如果你正在使用Web Audio进行录制，那么你也可以用它来进行播放，对吧？ 如果是这样的话，Recorder.js在README中提供了如何操作的方法：https://github.com/mattdiamond/Recorderjs 我会把核心内容复制在这里，以防 Recorder.js 在未来发生变化。你有两个 Float32Array（左声道和右声道），然后做这件事：

function getBufferCallback( buffers ) {
    var newSource = audioContext.createBufferSource();
    var newBuffer = audioContext.createBuffer( 2, buffers[0].length, audioContext.sampleRate );
    newBuffer.getChannelData(0).set(buffers[0]);
    newBuffer.getChannelData(1).set(buffers[1]);
    newSource.buffer = newBuffer;

    newSource.connect( audioContext.destination );
    newSource.start(0);
}

- Oskar Eriksson

---

请问您能否解释一下如何在上下文中应用recorder.js？ - Salmanul Faris