使用 renderedBuffer 作为 HTML5 音频标签

Question

所以我使用 WebAudioAPI 从代码中创建了音乐。我使用 OfflineAudioContext 来创建音乐，它的 oncomplete 事件类似于：

function(e) {
    var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    var song = audioCtx.createBufferSource();
    song.buffer = e.renderedBuffer;
    song.connect(audioCtx.destination);
    song.start();
}

播放声音。它有效。但我想将它存储为 <audio> 元素，因为它更容易播放、循环、暂停和停止，我需要重新使用歌曲。

可能吗？我在谷歌上搜索了好几天，但找不到方法！

我的想法是使用 var song = new Audio() 和一些东西来将 e.renderedBuffer 复制到它。

Answer 1

好的，所以我发现这段代码四处飘荡：http://codedbot.com/questions-/911767/web-audio-api-output . I've created a copy here too: http://pastebin.com/rE9a1PaX .

我已经设法使用此代码动态创建和存储音频，使用此 link 中提供的所有功能。

offaudioctx.oncomplete = function(e) {
    var buffer   = e.renderedBuffer;
    var UintWave = createWaveFileData(buffer);
    var base64   = btoa(uint8ToString(UintWave));

    songsarr.push(document.createElement('audio'))
    songsarr[songsarr.length-1].src = "data:audio/wav;base64," + base64;
    console.log("completed!");
};

它不是很漂亮，但是很管用。我把所有东西都留在这里，以防有人找到更简单的方法。

使用 renderedBuffer 作为 HTML5 音频标签

Use renderedBuffer as HTML5 Audio tag

javascript

audio

html5-audio

web-audio-api