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

Answer 1

如果你正在使用网络音频录制，我想你也可以用它来播放，对吗？如果是这样，recorder.js在自述文件中有一个方法：https://github.com/mattdiamond/Recorderjs

我将继续复制这里的要点，以防将来记录.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);
}

Answer 2

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

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

如何在Javascript中重播音频Blob？

2 个答案: