<title>Loading and playing a sound with the Web Audio API</title>

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>

<style>

* {

font-family: sans-serif;

}

</style>

<script type="text/javascript">

var _gaq = _gaq || [];

_gaq.push(['_setAccount', 'UA-19067049-1']);

_gaq.push(['_trackPageview']);

(function() {

var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

})();

</script>

<h2>Music will start playing automatically, when loaded</h2>

For more information on how this is done look at <a href="http://www.smartjava.org/content/exploring-html5-web-audio-visualizing-sound">this article.</a>.

<script type="text/javascript">

// create the audio context (chrome only for now)

// create the audio context (chrome only for now)

if (! window.AudioContext) {

if (! window.webkitAudioContext) {

alert('no audiocontext found');

}

window.AudioContext = window.webkitAudioContext;

}

var context = new AudioContext();

var audioBuffer;

var sourceNode;

// load the sound

setupAudioNodes();

loadSound("wagner-short.ogg");

function setupAudioNodes() {

// create a buffer source node

sourceNode = context.createBufferSource();

// and connect to destination

sourceNode.connect(context.destination);

}

// load the specified sound

function loadSound(url) {

var request = new XMLHttpRequest();

request.open('GET', url, true);

request.responseType = 'arraybuffer';

// When loaded decode the data

request.onload = function() {

// decode the data

context.decodeAudioData(request.response, function(buffer) {

// when the audio is decoded play the sound

playSound(buffer);

}, onError);

}

request.send();

}

function playSound(buffer) {

sourceNode.buffer = buffer;

sourceNode.start(0);

}

// log if an error occurs

function onError(e) {

console.log(e);

}