Question

I have a button. Every time it is clicked, a music is played. When it’s clicked the second time, the music resumes. I also want to visualize the music.

So i begin with html5 audio (complete code in http://jsfiddle.net/karenpeng/PAW7r/):

  $("#1").click(function(){
    audio1.src = '1.mp3';
    audio1.controls = true;
    audio1.autoplay = true;
    audio1.loop = true;

    source = context.createMediaElementSource(audio1);

    source.connect(analyser);
    analyser.connect(context.destination);
    });

But when it’s clicked more than once, it console.log error:

    Uncaught Error: INVALID_STATE_ERR: DOM Exception 11 

Then i change to use web audio API, and change the source to:

    source = context.createBufferSource();

The error is gone.

And then, i need to visualize it.
But ironicly, it only works in html5 audio!

(complete code in http://jsfiddle.net/karenpeng/FvgQF/, it does not work in jsfiddle cuz i dont know how to write processing.js script properly, but it does run on my pc)

     var audio = new Audio();
     audio.src = '2.mp3';
     audio.controls = true;
     audio.autoplay = true;
     audio.loop=true;
     var context = new webkitAudioContext();
     var analyser = context.createAnalyser();

     var source = context.createMediaElementSource(audio);
     source.connect(analyser);
     analyser.connect(context.destination);

     var freqData = new Uint8Array(analyser.frequencyBinCount);
     analyser.getByteFrequencyData(freqData);

         //visualization using freqData

when i change the source to :

    source = context.createBufferSource();

it does not show anything.

So is there way to visualize it and yet without error and enable it to resume again and again?

Answer 1

Actually, I believe the problem is that you’re trying to create a SECOND web audio node for the same media element. (Your code, when clicked, re-sets the SRC, controls, etc., but it’s not creating a new Audio().) You should either hang on to the MediaElementAudioSourceNode you created, or create new Audio elements.

E.g.:

var context = new webkitAudioContext();
var analyser = context.createAnalyser();
var source = null;    
var audio0 = new Audio();

$("#0").click(function(){
    audio0.src = 'http://www.bornemark.se/bb/mp3_demos/PoA_Sorlin_-_Stay_Up.mp3';
    audio0.controls = true;
    audio0.autoplay = true;
    audio0.loop = true;

    if (source==null) {
        source = context.createMediaElementSource(audio0);
        source.connect(analyser);
        analyser.connect(context.destination);
    }
});​

Hope that helps!

-Chris Wilson