将renderedBuffer用作HTML5音频标记

时间:2015-05-30 17:40:03

标签: javascript audio html5-audio web-audio

所以我使用WebAudioAPI从代码创建音乐。我使用了OfflineAudioContext创建了一个音乐,它的完成事件与此类似:

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

播放声音。它有效。但我希望将其存储为<audio>元素,因为它更容易播放,循环,暂停和停止,我需要重复使用该歌曲。

有可能吗?我在Google上搜索了几天,但我无法找到它!

我的想法是使用var song = new Audio()和其他内容将e.renderedBuffer复制到其中。

1 个答案:

答案 0 :(得分:0)

好的,所以我发现这个代码漂浮在: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!");
};

它不漂亮,但它有效。我把所有东西留在这里以防万一有人找到一种更简单的方法。