Создание настраиваемого HTML5 Audio Player

В этом уроке я собираюсь познакомить вас с аудио в HTML5 и показать, как создать собственный плеер.

Если вы хотите быстрее, взгляните на готовый HTML5 Audio Player, доступный на Envato Market. Он позволяет создавать списки воспроизведения из самых разных источников и поставляется с огромным набором параметров настройки.

Вы найдёте множество HTML5 experts в Envato Studio, чтобы помочь вам.

Введение

До сих пор внедрение аудио в веб-проект было утомительным процессом, в значительной степени зависящим от сторонних плагинов, вроде Flash. После пресловутого отказа iPhone от плагина и новости о том, что Adobe больше не поддерживает Flash для мобильных устройств, многие разработчики ищут другие способы включения аудио в свои проекты. Именно здесь вступает в действие HTML5 audio, чтобы решить проблему.

Хотя HTML5 предоставляет стандарт воспроизведения аудиофайлов в Интернете, он находится в зачаточном состоянии и ещё долго не сможет предоставить то, что есть у других, таких как Flash. Однако в большинстве случаев этого будет достаточно.

Простой Html5 Audio

Самый простой способ внедрить аудио в веб-страницу с использованием HTML5 - использовать новый audio тег. Добавьте его в свой документ HTML5 со следующим кодом:

1

<audio controls="controls">

2

  <source src="track.ogg" type="audio/ogg" />

3

  <source src="track.mp3" type="audio/mpeg" />

4

Your browser does not support the audio element.

5

</audio>

Если вы посмотрите на приведенный выше код, вы увидите, что я объявил тег <audio> и определил атрибут controls, чтобы мы увидели элементы управления проигрывателя по умолчанию.  

Вложенные в <audio>у нас есть 2 'src' тега. Один определяет дорожку MP3, а другой определяет формат OGG. Формат OGG особенно нужен, чтобы позволить музыке играть в Firefox из-за проблем с лицензированием. Firefox не поддерживает MP3 без использования плагина. Строка текста Ваш браузер не поддерживает аудио элемент. Позволяет пользователям с неподдерживаемыми браузерами знать, что происходит.

Плейер HTML5 по умолчанию  

Html5 Audio атрибуты тега

Помимо поддержки глобальных атрибутов HTML5, тег также поддерживает набор уникальных для себя атрибутов.

• autoplay - для этого можно установить значение «true» или «left blank» «», чтобы определить, должен ли трек автоматически воспроизводиться сразу после загрузки страницы.
• controls - как показано в примере выше, это определяет, должны ли отображаться нативные элементы управления, такие как «play, pause» и т. д.
• loop - это может быть установлено в «loop» и определяет, должен ли трек снова воспроизводиться после его завершения.
• preload - для этого может быть установлен «auto» (описывает, должен ли файл загружаться сразу после загрузки страницы), «metadata» (определяют, должны ли загружаться только метаданные, название дорожки и т. д.), «none» (диктует, что браузер не должен загружать файл при загрузке страницы).
• src - как в примере выше, определяет URL-адрес музыки, которую должен воспроизводить audio tag.

Запустим его на полную (Cranking it up to Eleven)

В последних нескольких шагах мы рассмотрели простейшую форму аудио в формате HTML5. Когда мы начинаем использовать аудио-тег с javascript, мы можем начать создание действительно интересных и полезных аудиоплееров. Давайте посмотрим, что может сделать для нас jQuery. Когда мы определили document ready в jQuery, мы можем создать новую звуковую переменную, чтобы держать наш аудиофайл таким простым:

1

var myaudio = new Audio('mysong.mp3');

Это действительно настолько просто! Тогда, когда мы хотим выполнить действие над аудио, мы можем вызвать его, используя переменную 'myaudio'. Вот список действий, которые мы можем предпринять с переменной. Запомните это, мы будем использовать некоторые из них позже, когда создадим наш аудиоплеер.

1

myaudio.play(); - This will play the music.

2

myaudio.pause(); - This will stop the music.

3

myaudio.duration; - Returns the length of the music track.

4

myaudio.currentTime = 0; - This will rewind the audio to the beginning.

5

myaudio.loop = true; - This will make the audio track loop.

6

myaudio.muted = true; - This will mute the track

Если вы хотите, чтобы функция была вызвана после завершения воспроизведения звука, вы можете использовать 'myaudio.addEventListener (' ended ', myfunc)' - это вызовет функцию 'myfunc ()', как только аудио закончится.

Создание HTML5 Audio Player: разметка

Теперь, когда у вас есть немного фона HTML5 и вы понимаете основные принципы, пришло время применить их на практике и создать настроенный HTML5 audio player. Я пропущу этап дизайна, поскольку он выходит за рамки этого урока, но вы можете загрузить accompanying source code и просмотреть PSD, чтобы получить представление о том, как он собирается.

Верхняя часть документа состоит из HTML5 doctype. Yahoos CSS Reset, Google web font 'Lobster' для титула. Берём последний jQuery и делаем JavaScript file js.js. Наконец, у нас есть html5 slider.js, который позволяет Firefox отображать диапазон ввода HTML5, который мы будем использовать для аудио scrubber.

1

<!DOCTYPE html>

2

<head>

3

  <title>HTML5 Audio Tutorial</title>

4

	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">

5

	<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

6

	<link rel="stylesheet" type="text/css" href="css/style.css">

7

	<script src="http://code.jQuery.com/jQuery-latest.js" type="text/javascript"></script>

8

	<script type="text/javascript" src="js/js.js"></script>

9

	<script type="text/javascript" src="js/html5slider.js"></script>

10

</head>

После названия h1 я создал div с классом "container" и "gradient". Я создал отдельный класс градиента, поскольку он будет повторно использоваться для некоторых других элементов. Внутри ".container"  я добавил изображение (которое будет обложкой альбома), тогда три якорных тега будут действовать как элементы управления для проигрывателя. Между ними вы найдете поле ввода scubber/HTML5 range.

1

<body>

2

3

	<h1>HTML 5 Audio Player</h1>

4

5

	<div class="container gradient">

6

7

		<img class="cover" src="images/cover.jpg" alt="">

8

9

		<div class="player gradient">

10

11

			<a class="button gradient" id="play" href="" title=""></a>

12

			<a class="button gradient" id="mute" href="" title=""></a>

13

14

				<input type="range" id="seek" value="0" max=""/>

15

16

			<a class="button gradient" id="close" href="" title=""></a>

17

18

		</div><!-- / player -->

19

20

	</div><!-- / Container-->

21

</body>

22

</html>

Создание HTML5 Audio Player: стили

Вместо того, чтобы перебирать каждый аспект CSS, я собираюсь дать обзор и обратить внимание на отдельные части, на которые вы, возможно, захотите обратить внимание.

В коде ниже я создал градиент плеера, который был сгенерирован с помощью этого CSS gradient editor. Затем я создал «.container» с некоторыми переходами CSS3.

Вы заметите, что я использовал атрибут размера окна CSS3, установленный в 'border-box'. Это отступ 10px вокруг контейнера, шириной, в данном случае 427px. Если этого не сделать, добавление padding к 427px сделало бы контейнер больше, чем мне надо. В наши дни становится обычной практикой применять * {box-sizing: border-box;}, что фактически делает более интуитивно понятным способ стилизации.

Я также добавил CSS3-переходы в «.coverlarge», чтобы позволить некоторые приятные переходы при первом открытии проигрывателя. Сначала CSS может показаться немного подавляющим, но многое здесь - это префиксы браузера, чтобы убедиться, что аудиоплеер выглядит и работает одинаково в разных браузерах.

1

.gradient {

2

	border: 1px solid black;

3

4

	-webkit-box-shadow: inset 0 1px 0px rgba(255,255,255,.2);

5

	-moz-box-shadow: inset 0 1px 0px rgba(255,255,255,.2);

6

	box-shadow: inset 0 1px 0px rgba(255,255,255,.2);

7

	background: #494949; /* Old browsers */

8

background: -webkit-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);

9

10

	background: -moz-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);

11

	background: -o-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);

12

	background: -ms-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);

13

	background: linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%); /* W3C */

14

-image  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#494949', endColorstr='#0b0b0b',GradientType=0 ); /* IE6-9 */

15

}

16

17

.container {

18

	-webkit-transition: all .7s ease;

19

	-moz-transition: all .7s ease;

20

	-o-transition: all .7s ease;

21

	-ms-transition: all .7s ease;

22

	transition: all .7s ease;

23

	position: absolute;

24

	width: 427px;

25

	height: 70px;

26

27

	-webkit-border-radius: 10px;

28

	-moz-border-radius: 10px;

29

	border-radius: 10px;

30

31

	-webkit-box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2);

32

	-moz-box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2);

33

	box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2);

34

	top: 50%;

35

	left: 50%;

36

	margin: -214px 0px 0px -214px;

37

	padding: 10px;

38

39

	-webkit-box-sizing: border-box;

40

	-moz-box-sizing: border-box;

41

	-ms-box-sizing: border-box;

42

	box-sizing: border-box;

43

}

44

45

46

.containerLarge {

47

	height: 427px;

48

}

49

50

.cover {

51

	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

52

	filter: alpha(opacity=0);

53

	opacity: 0;

54

	width: 398px;

55

	height: 10px;

56

	border: 2px solid black;

57

58

	-webkit-border-radius: 5px;

59

	-moz-border-radius: 5px;

60

	border-radius: 5px;

61

62

	-webkit-box-shadow: inset 0px 5px 5px rgba(0,0,0,1);

63

	-moz-box-shadow: inset 0px 5px 5px rgba(0,0,0,1);

64

	box-shadow: inset 0px 5px 5px rgba(0,0,0,1);

65

}

66

67

.coverLarge {

68

	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

69

	filter: alpha(opacity=100);

70

	opacity: 1;

71

	height: 398px;

72

73

	-webkit-transition: opacity .7s ease;

74

	-moz-transition: opacity .7s ease;

75

	-o-transition: opacity .7s ease;

76

	-ms-transition: opacity .7s ease;

77

	transition: opacity .7s ease;

78

79

	-webkit-transition-delay: .5s;

80

	-moz-transition-delay: .5s;

81

	-o-transition-delay: .5s;

82

	-ms-transition-delay: .5s;

83

	transition-delay: .5s;

84

}

Как аудио плеер должен смотреться на этом этапе

Поскольку контейнер для player завершён, пришло время создать элементы управления. Большинство кнопок были созданы с помощью CSS sprites

К сожалению, IE ещё не поддерживает ввод диапазона HTML5, поэтому я решил не показывать аудио-скруббер пользователям IE. Если для вас это неприемлемо, можете использовать jQuery UI slider аналогично методу, который я использовал. Тем не менее, я просто скрыл скруббер input{display:none\9!important;} Это скрывает ввод от пользователей ie (check out this thread on Stack Overflow дополнительной информации об  \ 9).

Проблема с ползунком диапазона HTML5 заключается в том, что его поддерживает только несколько браузеров; в основном браузеры WebKit (Chrome и Safari). К сожалению, Opera и Firefox покажут только стандартный слайдер. Если вам нужен пользовательский стиль во всех браузерах, вы можете использовать jQuery UI slider, как упоминалось ранее. Вы видите пользовательский стиль для браузеров WebKit в атрибуте input :: - webkit-slider-thumb.

1

.player {

2

	-webkit-box-sizing: border-box;

3

	-moz-box-sizing: border-box;

4

	-ms-box-sizing: border-box;

5

	box-sizing: border-box;

6

	position: absolute;

7

	width: 300px;

8

	bottom: 10px;

9

	width: 95%;

10

11

	-webkit-border-radius: 3px;

12

	-moz-border-radius: 3px;

13

	border-radius: 3px;

14

	padding: 5px;

15

}

16

17

.button {

18

	display: block;

19

	width: 34px;

20

	height: 34px;

21

	background-image: url(../images/sprite.png);

22

	background-repeat: no-repeat;

23

	float: left;

24

	margin-right: 5px;

25

}

26

27

#play {

28

	background-position: 6px 5px;

29

}

30

31

#pause {

32

	background-position: -32px 5px;

33

}

34

35

#mute {

36

	background-position: -63px 5px;

37

}

38

39

#muted {

40

	background-position: -106px 5px;

41

}

42

43

input[type="range"] {

44

	width: 250px;

45

	margin-top: -5px;

46

}

47

48

#close {

49

	float: right;

50

	background-position: -146px 5px;

51

	display: none;

52

}

53

54

.volume {

55

	position: absolute;

56

	height: 100px;

57

	width: 34px;

58

	border: 1px solid black;

59

	background-color: #242323;

60

	top: -97px;

61

	display: none;

62

}

63

input{

64

	display:none\9!important;

65

}

66

input[type="range"] {

67

	-webkit-appearance: none;

68

	border: 1px solid black;

69

	position: absolute;

70

	top: 18px;

71

	display: block;

72

	width: 63%;

73

	height: 15px;

74

75

	-webkit-border-radius: 20px;

76

	-moz-border-radius: 20px;

77

	border-radius: 20px;

78

	background-color: #242323;

79

	left: 90px;

80

81

	-webkit-box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);

82

	-moz-box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);

83

	box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);

84

}

85

86

input::-webkit-slider-thumb {

87

	-webkit-appearance: none;

88

	width: 20px;

89

	height: 20px;

90

	border:1px solid black;

91

92

	-webkit-border-radius: 10px;

93

	border-radius: 10px;

94

	background: #80e4df; /* Old browsers */

95

background: -webkit-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);

96

97

	background: -moz-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);

98

	background: -o-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);

99

	background: linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%); /* W3C */

100

}

Создание HTML5 Audio Player: jQuery

Поскольку стиль и разметка сделаны, пришло время оживить player.    Сделаем это с помощью javascript framework jQuery. Поскольку jQuery document ready был объявлен, мы создаём некоторые переменные, внутри которых можем хранить наши объекты jQuery.

1

container = $('.container');

2

	cover = $('.cover');

3

	play = $('#play');

4

	pause = $('#pause');

5

	mute = $('#mute');

6

	muted = $('#muted');

7

	close = $('#close');

8

	song = new Audio('music/track1.ogg','music/track1.mp3');

9

	duration = song.duration;

В приведенной выше переменной "song" вы видите, что мы заявили два трека. Формат OGG для Firefox и MP3 для других браузеров. Затем я создаю условный  IF, чтобы мы могли проверить, может ли браузер воспроизводить MP3. Если да, тогда мы превращаем источник "song" в MP3-трек, если нет, тогда он будет воспроизводиться в формате «OGG».

1

if (song.canPlayType('audio/mpeg;')) {

2

  	song.type= 'audio/mpeg';

3

  	song.src= 'music/track1.mp3';

4

	} else {

5

  	song.type= 'audio/ogg';

6

  	song.src= 'music/track1.ogg';

7

	}

Следующее, что мы собираемся создать - это функции кликов, которые позволят нам play и pause музыку. Я использую функцию play(), чтобы запустить звук, а затем метод jQuery replaceWith, который заменяет кнопку воспроизведения кнопкой паузы.

Я также добавил классы «coverLarge» и «containerLarge» в "container" и "cover". Поскольку я добавил CSS3 переходы ранее в CSS, то появится переход, когда начнётся воспроизведение. Функция "pause" работает аналогично, но без переходов. Нажатие заменяет кнопку pause на кнопку "play".

1

play.live('click', function(e) {

2

		e.preventDefault();

3

		song.play();

4

5

		$(this).replaceWith('<a class="button gradient" id="pause" href="" title=""></a>');

6

		container.addClass('containerLarge');

7

		cover.addClass('coverLarge');

8

		$('#close').fadeIn(300);

9

		$('#seek').attr('max',song.duration);

10

	});

11

12

	pause.live('click', function(e) {

13

		e.preventDefault();

14

		song.pause();

15

		$(this).replaceWith('<a class="button gradient" id="play" href="" title=""></a>');

16

17

	});

Кнопки отключения звука работают аналогично кнопкам воспроизведения и паузы, но вызывают соответствующие действия и заменяют кнопки соответствующими альтернативами.

1

mute.live('click', function(e) {

2

		e.preventDefault();

3

		song.volume = 0;

4

		$(this).replaceWith('<a class="button gradient" id="muted" href="" title=""></a>');

5

6

	});

7

8

	muted.live('click', function(e) {

9

		e.preventDefault();

10

		song.volume = 1;

11

		$(this).replaceWith('<a class="button gradient" id="mute" href="" title=""></a>');

12

13

	});

Когда пользователь нажимает кнопку "close", мы вызываем jQuery для удаления классов «containerLarge» и «coverLarge». Это скроет обложку и закроет плеер. Затем мы приостанавливаем проигрыватель, вызывая действие pause () и восстанавливая аудио currentTime на 0. Это возвращает дорожку к началу.

1

$('#close').click(function(e) {

2

		e.preventDefault();

3

		container.removeClass('containerLarge');

4

		cover.removeClass('coverLarge');

5

		song.pause();

6

		song.currentTime = 0;

7

		$('#pause').replaceWith('<a class="button gradient" id="play" href="" title=""></a>');

8

		$('#close').fadeOut(300);

9

	});

Пришло время перейти на звуковой скруббер, которому присвоен идентификатор "seek". Первая функция позволяет нам переместить скруббер в любую часть аудио. Это делается путем обнаружения изменений, когда кто-либо перемещает скруббер. Затем мы устанавливаем song.currentTime, чтобы он соответствовал части песни, в которую переместился скруббер. Мы также устанавливаем атрибут max, чтобы отражать продолжительность песни.

1

$("#seek").bind("change", function() {

2

		song.currentTime = $(this).val();

3

		$("#seek").attr("max", song.duration);

4

	});

Заключительная часть jQuery состоит в том, чтобы заставить скруббер "#seek" двигаться вместе с продолжительностью звука. Мы добавим к нему прослушиватель событий, а при обновлении звукового времени вызываем функцию. Я установил переменную «curtime», чтобы получить текущее время песни. Затем я обновляю значение скруббера, чтобы отобразить текущую временную позицию аудио.

1

song.addEventListener('timeupdate',function (){

2

	curtime = parseInt(song.currentTime, 10);

3

		$("#seek").attr("value", curtime);

4

	});

И вот оно! Аудиоплеер HTML5, который вы можете внедрить на своем сайте или в приложении.

Заключение

Как упоминалось ранее, аудио HTML5  находится в зачаточном состоянии и требует усовершенствований. На данный момент аудио передаётся с сервера, поэтому некоторые браузеры имеют проблемы с воспроизведением. Это не всегда проблема, просто означает, что иногда начнёт воспроизведение до того, как аудио полностью загрузится.

Это может быть проблемой, если вы хотите использовать аудио HTML5 для таких вещей, как звуковые эффекты в играх или приложения с интенсивным звуком. По этой причине наши друзья из Google разработали метод улучшения слабых мест аудиотеки. Компания Google разработала и представила предложение к W3C для «Web Audio API». Это оказывается намного более мощным, чем встроенный звук HTML5, однако проблема в том, что на этом этапе (вы можете догадаться ?!) он работает только в Chrome.

Вы можете узнать больше об API Web Audio Google, а также ознакомиться с примерами в Google code или с  web audio specification.

Надеюсь, вам понравился урок об аудио HTML5 и о том, как можно создать собственный плеер. Мой player включает в себя элементарные элементы управления, но вам ничто не мешает добавить функции, такие как управление громкостью и даже добавление собственных пользовательских анимаций. Если немного подумать и попробовать, вы действительно можете создать отличные аудиоплееры. Download the source code, я с нетерпением жду того, что вы придумали!

Если вы хотите увидеть больше возможностей для работы с аудиоплеерами и другими медиафайлами в HTML5, ознакомьтесь с материалами HTML5 Media на Envato Market.