kitty meow

fade out

HTML

<img id="kitty" src="https://dl.dropboxusercontent.com/u/957/leo.jpg">

CSS

img{
 width: 100%;

JavaScript

var meowAudioURL = "https://dl.dropboxusercontent.com/u/957/meow.wav";
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var audioContext = new AudioContext();
var audioBuffer; 
var audio;
var gain;
var length;

loadAudioBuffer(meowAudioURL, audioContext, function(buffer){
	audioBuffer = buffer;
	length = buffer.length/audioContext.sampleRate;
	audio = createNewPlayer(audioBuffer);
});

kitty.addEventListener('click', function(){
  audio.player.start(0);
  audio.gain.gain.setValueAtTime(1, audioContext.currentTime + length - 0.1);
  audio.gain.gain.linearRampToValueAtTime(0, audioContext.currentTime + length);
  audio = createNewPlayer(audioBuffer);
});

// helpers

function createNewPlayer(audioBuffer){
	var player = audioContext.createBufferSource();
	var gain = audioContext.createGain();
	player.connect(gain);
	gain.connect(audioContext.destination);
	player.buffer = audioBuffer;

	return {
		player: player,
		gain: gain
	}
}

function loadAudioBuffer(url, audio, callback){
	var request = new XMLHttpRequest();
	request.open('GET', url, true);
	request.responseType = 'arraybuffer';
	request.onload = function () {
	  audioContext.decodeAudioData(request.response, function(buffer){
        callback(buffer)
    });
  }
  request.send();
}