Стилизация html5 audio, управление с помощью jquery

У стандартного <audio> разное отображение в различных браузерах и часто оно не вписывается в дизайн сайта. Но это не проблема, плеером можно управлять с помощью js/jquery, а значит можно сделать свой плеер.

Для примера сделаем плеер с 3 кнопками (старт/пауза, выключение звука и "временная шкала" )

Верстка выглядит примерно так:

<div class="js--audio-wrap">
	<div>Аудиозапись</div>
	<audio class="js--audio-cont">
		<source src="/path/to/file.mp3" type="audio/mpeg">
		Тег audio не поддерживается вашим браузером.
		<a href="/path/to/file.mp3">Скачайте музыку</a>.	 
	</audio>
	<a href="#" class="js--audio-play" >
		<span class="glyphicon glyphicon-play" data-toggle-class="glyphicon glyphicon-pause"></span>
	</a>
	<div class="js--timeline">
		<a href="#" class="js--timeline-control"></a>
	</div>
	<a href="#" class="js--audio-mute">
		<span class="glyphicon glyphicon-volume-up" data-toggle-class="glyphicon glyphicon-volume-off"></span>
	</a>
</div>

В обертке js--audio-wrap лежит сам элемент <audio> (скрытый) и 3 элемента управления (js--audio-play, js--timeline, js--audio-mute)

Управляет этими кнопочками вот такой jquery скрипт

(function($) {
	$(document).ready(function() {
		
		$('.js--audio-play, .js--audio-mute').on('click', function () {
			// Меняем иконку
			glyphicon = $(this).find('.glyphicon');
			toggleClass = glyphicon.data('toggle-class');
			glyphicon.data('toggle-class', glyphicon.attr('class')).removeClass().addClass(toggleClass);

			audio = $(this).closest('.js--audio-wrap').find('.js--audio-cont');
			timeline = audio.closest('.js--audio-wrap').find('.js--timeline');
			duration = audio.prop('duration');
			width = timeline.width();
			if ($(this).hasClass('js--audio-play')) {
				// Старт/пауза и двигаем ползунок
				if(audio.prop('paused')) {
					audio.trigger('play');
					idInterval = setInterval(function () {
						currentTime = audio.prop('currentTime');
						left = width*currentTime/duration;
						timeline.find('.js--timeline-control').css('left', left+'px');
						if (currentTime == duration) {
							clearInterval(idInterval);
						}
					}, 1000);
				} else {
					audio.trigger('pause');
					clearInterval(idInterval);
				}
			} else {
				// Переключаем звук
				audio.prop("muted",!audio.prop("muted"));
			}
			return false;
		});

		
		$('.js--timeline').on('click', function (e) {
			audioTime = $(this).closest('.js--audio-wrap').find('.js--audio-cont');
			duration = audioTime.prop('duration');
			if (duration > 0) {
				offset = $(this).offset();
				left = e.clientX-offset.left;
				width = $(this).width();
				$(this).find('.js--timeline-control').css('left', left+'px');
				audioTime.prop('currentTime', duration*left/width);
			}
			return false;
		});
	});
})(jQuery);

Таким образом, добавив css, можно получить плеер как на картинке вначале страницы.

Есть вопросы или нашли ошибку? Напишите комментарий (можно без регистрации), отвечать стараюсь быстро.