HTML5 Audio: createMediaElementSource прерывает аудиовыход

Question

Я изучаю webgl, и я прохожу через this учебник для извлечения частот из mp3-файла, чтобы они могли быть визуализированы.

У меня есть работа, где предоставляется mp3-файл, который он играет в файл. Но если я попытаюсь использовать createMediaElementSource для подключения к анализатору AudioContext, чтобы получить частотные данные, он не работает.

Fiddle

JS:

window.onload = function(e) {  
    document.getElementById('music-files').addEventListener('change', selectMusic, false); 
} 

var musicFiles = []; 
var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); 
var audio; 
var audioSrc; 
var analyser; 
var bufferLength; 
var dataArray; 

function selectMusic(e) { 
    musicFiles = e.target.files;  
} 

function getFreq(){ 
    requestAnimationFrame(getFreq); 
    analyser.getByteFrequencyData(dataArray); 
    console.log(">>>>>>>>>>>>>>>"); 
    console.log(dataArray[240]) 
} 

function play(){  
    var num = Math.floor(Math.random()*musicFiles.length); 
    console.log("playing=" + num); 
    var musicFile = URL.createObjectURL(musicFiles[num]); 
    $("#music").attr("src", musicFile); 
    document.getElementById('music').play(); 

    audio = document.getElementById('music'); 
    audioSrc = audioCtx.createMediaElementSource(audio);  
    analyser = audioCtx.createAnalyser(); 
    audioSrc.connect(analyser); 
    bufferLength = analyser.frequencyBinCount; 
    dataArray = new Uint8Array(bufferLength); 
    getFreq(); 
} 

function stop(){ 
    document.getElementById('music').pause(); 
} 

Если вы посмотрите на скрипке, вы можете выбрать mp3-файл и нажмите игру, и он будет регистрировать одну из полос частот в консоли браузера, но нет звука (по крайней мере на моем компьютере), что, вероятно, означает, что он играет песню, но звука нет. Но если вы прокомментируете эти строки ниже, он воспроизводит песню, и я могу ее услышать.

Fiddle with commented code

/*audioSrc = audioCtx.createMediaElementSource(audio); 
    analyser = audioCtx.createAnalyser(); 
    audioSrc.connect(analyser); 
    bufferLength = analyser.frequencyBinCount; 
    dataArray = new Uint8Array(bufferLength); 
    getFreq();*/ 

Моя установка: Windows 10/Chrome52

Любые советы по этому вопросу ценится. Спасибо.

Answer 1

Нет звука, потому что когда вы создаетеMediaElementSource для элемента, он отключает вывод. (Это позволит вам анализировать и обрабатывать аудио без его выводимого необработанного, а также.) Все, что вам нужно сделать, это:

audioSrc.connect(audioCtx.destination); 

сразу после подключения audioSrc к анализатору.