Использовать renderedBuffer в качестве тега аудио HTML5

Поэтому я использовал 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.


javascript audio html5-audio web-audio-api
person eri0o    schedule 30.05.2015    source источник
comment
Метод, который вы нашли, насколько мне известно, единственный способ сделать это. Как вы сказали, это не особенно элегантно, но в то же время удивительно, что это возможно. По сути, вы создаете аудиофайл в браузере с помощью JavaScript, и это довольно круто.   -  person Kevin Ennis    schedule 30.05.2015
comment
См. этот ответ тоже.   -  person    schedule 02.06.2015

Ответы (1)


arrow_upward
0
arrow_downward

Итак, я нашел этот код: 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!");
};

Это некрасиво, но это работает. Я оставляю все здесь, если кто-то найдет более простой способ.

person eri0o    schedule 13.05.2016