HTML5 Audio: createMediaElementSource breaks audio output

Question

I am learning webgl and I am going through this tutorial to extract the frequencies from an mp3 file so they can be visualized.

I have it working where given an mp3 file it plays the file. But if I try to use createMediaElementSource to connect to AudioContext's analyser to get the frequency data, it does not work.

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();
}

If you take a look at the fiddle, you can select an mp3 file and hit play and it will log one of the frequency bands in the browser console but there is no sound (atleast on my pc), which probably means it is playing the song but there is no sound. But if you comment these lines below, it plays the song and I can hear it.

Fiddle with commented code

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

My setup: Windows 10/Chrome52

Any advice regarding this issue is appreciated. Thank you.

Answer 1

There's no sound because when you createMediaElementSource on an element, it disconnects the output. (This would let you analyse or process the audio without it being outputted unprocessed as well.) All you need to do is:

audioSrc.connect(audioCtx.destination);

right after you connect the audioSrc to the analyser.