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

Алексей Будагов,
Стилизация 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() {
		/**
		 * Пауза, выключение звука и сдвиг ползунка timeline
		 */
		$('.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;
		});

		/**
		 * Перемотка трека по клику на timeline
		 */
		$('.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, можно получить плеер как на картинке вначале страницы.

Опубликовано 24 Августа 2016 | Обновлено 25 Ноября 2016
jquery, верстка, разработчику

Возврат к списку

Комментарии