javascript - 使用 renderBuffer 作为 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 。我也在这里创建了一个副本:http://pastebin.com/rE9a1PaX .

我已成功使用此代码，使用此链接中提供的所有功能来动态创建和存储音频。

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

虽然不太漂亮，但是很有效。我将把所有内容留在这里，以防有人找到更简单的方法。