如何在 Javascript 中重放音频 Blob？答案

【问题标题】：How to Replay an Audio-Blob in Javascript?如何在 Javascript 中重放音频 Blob？
【发布时间】：2016-04-28 08:30:04
【问题描述】：

我想重放音频 blob (wav)，使用 Web Audio API 录制在 javascript 中。

我尝试了以下方法：

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 的音频数据？

【问题讨论】：

你确定 blob 是 wav 格式吗？这意味着如果您下载 blob，它将在媒体播放器中播放...
是的，它在媒体播放器中播放。任何其他想法为什么我可能什么都听不到？
尝试添加控件并将其附加到正文中，看看是否可以这样玩
我试过了，但还是没有声音，请在帖子中找到我的更新。有什么想法我在这里做错了吗？
您不能将 blob url 硬编码到源代码中，必须使用 javascript 设置。

标签： javascript audio web-audio-api

【解决方案1】：

如果您使用网络音频进行录制，我想您也可以使用它进行播放，对吧？如果是这样，recorder.js 在 README 中有一个操作方法：https://github.com/mattdiamond/Recorderjs

我会继续复制这里的要点，以防将来 recorder.js 发生变化。你有两个 Float32Arrays（左声道和右声道），然后执行此操作；

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);
}

【讨论】：

您能否解释一下它如何适用于上述情况？（使用 recoder.js）

【解决方案2】：

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

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

【讨论】：