如何在Javascript中重放音頻Blob？

我想重播一個音頻blob（wav），使用Web Audio API以javascript記錄。如何在Javascript中重放音頻Blob？

我試過如下：

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播放此音頻數據？

來源

2016-01-21 user2212461

你確定斑是wav格式？這意味着如果你下載的blob，它會播放媒體播放器... – dandavis

是的，它播放媒體播放器。任何其他想法，爲什麼我可能聽不到任何東西？ – user2212461

嘗試添加控件並將其附加到身體，看看你是否可以這樣玩 – dandavis

如果您使用網絡音頻錄製，我想你也可以使用它進行播放，對吧？如果是這樣，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); 
}

來源

2016-01-22 06:53:10

最簡單的方法是轉換到64位編碼

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

來源

2017-10-25 08:57:20 Gibolt

如何在Javascript中重放音頻Blob？

回答

相關問題