Working with AudioContext with a source from audio tag

Question

I'm building a music player and I'd like to add a pulsation effect depending on the track currently played.

Here some examples of what I'd want:

http://www.htmlfivewow.com/demos/hal/index.html

http://www.schillmania.com/projects/soundmanager2/demo/360-player/canvas-visualization.html

My problem is that in the first example, sound is loaded via xhr, and in the second it uses flash.

I'd want to be able to get the sound that I want to analyze from the audio tag.

I'm afraid it could not be possible, it would cause a big lack of security because we could load web pages instead of sound and then analyse it. Is there a solution anyway?

Answer 1

You can use createMediaElementSource method in AudioContext.

<audio id="audio" src="test.mp3"></audio>
<script type="text/javascript">
    var context = new webkitAudioContext;
    var el = document.getElementById('audio');
    var source = context.createMediaElementSource(el);
    source.connect(context.destination);
    el.play();
</script>