如何在Javascript中重播Audio-Blob? [英] How to Replay an Audio-Blob in Javascript?

问题描述

我想重播使用Web Audio API用javascript录制的音频blob(wav).

I want to replay an audio blob (wav), recorded in javascript using the Web Audio API.

我尝试了以下操作:

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

但是此代码不会重播音频Blob.

But this code does not replay the audio blob.

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

I also tried replaying the blob via an html audio tag:

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

使用以下方法通过程序设置Blob源:

with the blob source being set programmatically using:

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

和使用以下方法进行音频播放通话:

and the audio play call using:

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

但没有声音播放.

为了进行验证，我使用以下命令下载了Blob:

For verification, I downloaded the blob with:

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播放音频数据?

The downloaded blob contains the correct audio data in the wav format. How can I play this audio data from the blob in javascript?

推荐答案

如果您正在使用Web Audio进行录制，我想您也可以将其用于回放，对吗?如果是这样，recorder.js在自述文件中有一个操作方法: https://github.com/mattdiamond/Recorderjs

If you're using Web Audio to record, I figure you can use it for playback as well, right? If so, recorder.js has a how-to in the README: https://github.com/mattdiamond/Recorderjs

我会继续复制此处的要点，以防将来recorder.js发生更改.您有两个Float32Arrays(左右声道)，然后执行此操作；

I'll go ahead and copy the gist of here, in case recorder.js changes in the future. You have two Float32Arrays (left and right channel) and then do this;

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

这篇关于如何在Javascript中重播Audio-Blob?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！