Простенький html5 audio-плэер с кастомными контрольками

$('#simplePlayer').each(function() {
	
	// audio
	var player = this;
	// прогрессбар
	var bar = $('.audio-bar');
	// ширина прогрессбара
	var barWidth = bar.parent().width();
	// обновление прогрессбара
	var barChange = false;
	// "количество пикселей" в секунде
	var perSecond = 0;
	// "количество секунд" в пикселе
	var perPixel = 0;
	
	// обновление прогрессбара
	function changeBar() {
		bar.width(player.currentTime * perSecond);
	}
	
	// начало воспроизведения
	player.addEventListener(
		'playing', 
		function() {
			// начинаем обновлять прогрессбар
			barChange = setInterval(
				changeBar,
				500
			);
		}
	);
	
	// пауза
	player.addEventListener(
		'pause', 
		function() {
			// перестаем обновлять прогрессбар :)
			clearInterval(barChange);
			barChange = false;
			changeBar();
		}
	);
	
	// конец воспроизведения
	player.addEventListener(
		'ended', 
		function() {
			// так же перестаем обновлять прогрессбар
			clearInterval(barChange);
			barChange = false;
		}
	);
	
	// получение метаданных
	player.addEventListener(
		'loadedmetadata', 
		function() {
			
			// считаем коэффиценты
			perSecond = barWidth / player.duration;
			perPixel = player.duration / barWidth;
			
			// биндим
			// при клике на прогрессбар - перемотка
			$('.audio-bg').click(function(e) {
				var x = e.pageX - this.offsetLeft;
				player.pause();
				player.currentTime = x * perPixel;
				player.play();
			});
			
			// кнопка play
			$('#play').click(function() {
				player.play();
			});
			
			// кнопка pause
			$('#pause').click(function() {
				player.pause();
			});
			
			// кнопка stop
			$('#stop').click(function() {
				player.pause();
				player.currentTime = 0;
			});
			
			// увеличение громкасти
			$('#volumep').click(function() {
				var v = player.volume + 0.1;
				player.volume = v >= 1 ? 1 : v;
			});
			
			// уменьшение громкости
			$('#volumem').click(function() {
				var v = player.volume - 0.1;
				player.volume = v <= 0 ? 0 : v;
			});
		}
	);
});