如何在Javascript中重放音频Blob？

Question

我想重播一个音频blob（wav），使用Web Audio API以javascript记录。

我试过如下：

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

但这代码不重放音频斑点。

我还试图通过HTML音频标记重放斑：

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

但没有声音播放。

为了验证，我下载了斑点与：

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

我会继续并复制这里的要点，以防万一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); 
} 

Answer 2

最简单的方法是转换到64位编码

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