Загрузка звукового буфера и воспроизведение его с помощью звукового тега

Question

Я пытаюсь загрузить звуковой буфер с URL-адреса, а затем воспроизвести его. Я получил большую часть кода этого HTML5 Rocks Tutorial.

var request = new XMLHttpRequest(); 
request.open('GET', $(this).attr('data-url'), true); 
request.responseType = 'arraybuffer'; 

request.onload = function() { 
    console.log(request); 
    context.decodeAudioData(request.response, function(buffer) { 
     console.log(buffer); 
     $('#play').click(function() { 
       var source = context.createBufferSource(); 
       source.connect(context.destination); 
       source.noteOn(0); 
     }).removeAttr('disabled'); 
    }, function(err) { console.log(err); }); 
}; 
request.send(); 

Однако затем я нажимаю кнопку #play, ничего не происходит. source.noteOn(0), я проверил его с помощью отладчика. И все объекты правильно загружены и созданы, но я не слышу звука.

Кроме того, как мне кажется, мне нужно будет перестроить полноценного игрока со всеми элементами управления, когда я использую этот подход. То, что я хотел бы сделать, чтобы сохранить работу и обеспечить ее работу лучше, заключается в том, чтобы поставить buffer в <audio/>, чтобы его можно было сыграть там.

Я знаю, что есть audio.src для размещения имени файла, но мне нужно использовать звуковой буфер. Я пробовал

audio.src = buffer; 
audio.load() 

Но это не сработало.

Есть ли данные?

Answer 1

Если вы просто хотите играть в аудио-файлы, вы, вероятно, захотите использовать тег <audio> для простоты. (и не ограничиваясь веб-браузерами).

В вашем примере вы не установили буфер вашего буфера исходного узла:
если вы хотите сохранить общую структуру, вы можете просто добавить строку source.buffer = buffer, как:

context.decodeAudioData(request.response, function(buffer) { 
    $('#play').click(function() { 
      var source = context.createBufferSource(); 
      source.buffer = buffer; 
      source.connect(context.destination); 
      source.noteOn(0); 
    }).removeAttr('disabled'); 
}, function(err) { console.log(err); }) 

(читаемость вашего кода улучшится, отделив декодирование звука от обработки событий).

ваш другой вопрос на audio.src:
вы должны установить audio.src в URL аудиофайла.