Создание настраиваемого 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 со следующим кодом:
Если вы посмотрите на приведенный выше код, вы увидите, что я объявил тег <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, мы можем создать новую звуковую переменную, чтобы держать наш аудиофайл таким простым:
Это действительно настолько просто! Тогда, когда мы хотим выполнить действие над аудио, мы можем вызвать его, используя переменную ‘myaudio’. Вот список действий, которые мы можем предпринять с переменной. Запомните это, мы будем использовать некоторые из них позже, когда создадим наш аудиоплеер.
Если вы хотите, чтобы функция была вызвана после завершения воспроизведения звука, вы можете использовать ‘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.
После названия h1 я создал div с классом «container» и «gradient». Я создал отдельный класс градиента, поскольку он будет повторно использоваться для некоторых других элементов. Внутри «.container» я добавил изображение (которое будет обложкой альбома), тогда три якорных тега будут действовать как элементы управления для проигрывателя. Между ними вы найдете поле ввода scubber/HTML5 range.
Создание HTML5 Audio Player: стили
Вместо того, чтобы перебирать каждый аспект CSS, я собираюсь дать обзор и обратить внимание на отдельные части, на которые вы, возможно, захотите обратить внимание.
В коде ниже я создал градиент плеера, который был сгенерирован с помощью этого CSS gradient editor. Затем я создал «.container» с некоторыми переходами CSS3.
Вы заметите, что я использовал атрибут размера окна CSS3, установленный в ‘border-box’. Это отступ 10px вокруг контейнера, шириной, в данном случае 427px. Если этого не сделать, добавление padding к 427px сделало бы контейнер больше, чем мне надо. В наши дни становится обычной практикой применять *
Я также добавил CSS3-переходы в «.coverlarge», чтобы позволить некоторые приятные переходы при первом открытии проигрывателя. Сначала CSS может показаться немного подавляющим, но многое здесь — это префиксы браузера, чтобы убедиться, что аудиоплеер выглядит и работает одинаково в разных браузерах.
Как аудио плеер должен смотреться на этом этапе
Поскольку контейнер для player завершён, пришло время создать элементы управления. Большинство кнопок были созданы с помощью CSS sprites
К сожалению, IE ещё не поддерживает ввод диапазона HTML5, поэтому я решил не показывать аудио-скруббер пользователям IE. Если для вас это неприемлемо, можете использовать jQuery UI slider аналогично методу, который я использовал. Тем не менее, я просто скрыл скруббер input
Проблема с ползунком диапазона HTML5 заключается в том, что его поддерживает только несколько браузеров; в основном браузеры WebKit (Chrome и Safari). К сожалению, Opera и Firefox покажут только стандартный слайдер. Если вам нужен пользовательский стиль во всех браузерах, вы можете использовать jQuery UI slider, как упоминалось ранее. Вы видите пользовательский стиль для браузеров WebKit в атрибуте input :: — webkit-slider-thumb .
Создание HTML5 Audio Player: jQuery
Поскольку стиль и разметка сделаны, пришло время оживить player. Сделаем это с помощью javascript framework jQuery. Поскольку jQuery document ready был объявлен, мы создаём некоторые переменные, внутри которых можем хранить наши объекты jQuery.
В приведенной выше переменной «song» вы видите, что мы заявили два трека. Формат OGG для Firefox и MP3 для других браузеров. Затем я создаю условный IF , чтобы мы могли проверить, может ли браузер воспроизводить MP3. Если да, тогда мы превращаем источник «song» в MP3-трек, если нет, тогда он будет воспроизводиться в формате «OGG».
Следующее, что мы собираемся создать — это функции кликов, которые позволят нам play и pause музыку. Я использую функцию play() , чтобы запустить звук, а затем метод jQuery replaceWith , который заменяет кнопку воспроизведения кнопкой паузы.
Я также добавил классы «coverLarge» и «containerLarge» в «container» и «cover». Поскольку я добавил CSS3 переходы ранее в CSS, то появится переход, когда начнётся воспроизведение. Функция «pause» работает аналогично, но без переходов. Нажатие заменяет кнопку pause на кнопку «play».
Кнопки отключения звука работают аналогично кнопкам воспроизведения и паузы, но вызывают соответствующие действия и заменяют кнопки соответствующими альтернативами.
Когда пользователь нажимает кнопку «close», мы вызываем jQuery для удаления классов «containerLarge» и «coverLarge». Это скроет обложку и закроет плеер. Затем мы приостанавливаем проигрыватель, вызывая действие pause () и восстанавливая аудио currentTime на 0. Это возвращает дорожку к началу.
Пришло время перейти на звуковой скруббер, которому присвоен идентификатор «seek». Первая функция позволяет нам переместить скруббер в любую часть аудио. Это делается путем обнаружения изменений, когда кто-либо перемещает скруббер. Затем мы устанавливаем song.currentTime, чтобы он соответствовал части песни, в которую переместился скруббер. Мы также устанавливаем атрибут max, чтобы отражать продолжительность песни.
Заключительная часть jQuery состоит в том, чтобы заставить скруббер «#seek» двигаться вместе с продолжительностью звука. Мы добавим к нему прослушиватель событий, а при обновлении звукового времени вызываем функцию. Я установил переменную «curtime», чтобы получить текущее время песни. Затем я обновляю значение скруббера, чтобы отобразить текущую временную позицию аудио.
И вот оно! Аудиоплеер 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.
Cross-browser audio basics
The code below is an example of a basic audio implementation using HTML5:
Note: You can also use an MP4 file instead of MP3. MP4 files typically contain AAC encoded audio. You can use type=»audio/mp4″ . (Currently, browsers that support mp3 also support mp4 audio).
- Here we define an <audio> element with multiple sources — we do this as not all browsers support the same audio formats. To ensure reasonable coverage, we should specify at least two different formats. The two formats that will give maximum coverage are mp3 and ogg vorbis.
- We do this using the <source> element, which takes the attributes src and type .
- src contains the path to the audio file to be loaded (relative or absolute).
- type is used to inform the browser of the file type. If omitted, most browsers will attempt to guess this from the file extension.
HTML audio in detail
Now we’ve looked at a basic example, let’s now explore the different aspects of HTML audio in more detail.
Audio HTML attributes
We can specify a number of attributes with the audio tag to further determine the way audio is initialized.
autoplay
Specifying autoplay will cause the audio to start playing as soon as possible and without any user interaction — in short, the audio will autoplay.
Note: This value is often ignored on mobile platforms, and its use is not recommended unless really necessary. Autoplaying audio (and video) is usually really annoying. Plus browsers have policies that will block autoplay entirely in many situations. See the Autoplay guide for media and Web Audio APIs for details.
The loop attribute will ensure that upon getting to the end of the audio clip, the audio clip will loop back to the beginning and start playing again.
muted
If you want the audio to start muted (no volume), add the muted attribute.
Note: This value is often ignored on mobile platforms.
preload
The preload attribute allows you to specify a preference for how the browser preloads the audio, in other words, which part of the file it downloads when the <audio> element is initialized, and before the play button is pressed.
preload can take 3 different values:
- none : Don’t download anything before the play button is pressed.
- metadata : Download the audio metadata; this is usually the best option, as it allows you to access and display information such as audio length, and allow the browser to work out which audio file it should use.
- auto : Download the whole audio file as soon as possible. This is generally not a good option unless you can guarantee your users will have a fast network connection.
Note: This value is often ignored on mobile platforms.
controls
We specify the controls attribute when we require the browser to provide us with its default playback controls.
As mentioned above, you can use the <source> element to specify one or more source audio files. Alternatively, you can include the src attribute directly on the <audio> element to specify a single source file.
As mentioned above, to be sure that the browser knows what type of file is being specified, it’s good practice to specify a type attribute alongside the src attribute. The type attribute specifies the MIME type or Internet Media Type of the file.
Manipulating the Audio Element with JavaScript
In addition to being able to specify various attributes in HTML, the <audio> element comes complete with several properties and methods that you can manipulate via JavaScript.
Given the following HTML:
You can grab the <audio> element like this:
Alternatively, you can create a new element. Here’s an example of creating an <audio> element, setting the media to play, playing and pausing, and then playing from 5 seconds into the audio:
Let’s explore the available properties and methods in more detail.
The play() method is used to tell the audio to play. It takes no parameters.
pause
The pause() method is used to tell the audio to pause. It takes no parameters.
Note: There is no stop method — to implement a stop function, you’d have to pause the media then set the currentTime property value to 0.
canPlayType
The canPlayType() method asks the browser whether a certain audio file type is supported. It takes the mime type of the type to check as a parameter.
canPlayType() returns one of three values:
- probably
- maybe
- «» (an empty string)
In practice, we usually check if the result is true or false. Non-empty strings are true.
Note: A very early spec specified that the browser should return no instead of an empty string, but thankfully the number of people using older browsers that implement this version of the spec are few and far between.
currentTime
The currentTime property gets or sets the current time the audio should play at. This is useful in many ways, for example since play() does not take a parameter we need to set the point to play from separately if we don’t want it to be 0.
The value of currentTime is a number which represents the time in seconds.
volume
The volume property allows us to set the audio volume, as a number between 0 and 1.
Creating your own custom audio player
The JavaScript media API allows you to create your own custom player. Let’s take a look at a very minimal example. We can combine HTML and JavaScript to create a very simple player with a play and a pause button. First, we’ll set up the audio in the HTML, without the controls attribute, since we are creating our own controls:
Next, we attach some functionality to the player using JavaScript:
Media loading events
Above we have shown how you can create a very simple audio player, but what if we want to show progress, buffering and only activate the buttons when the media is ready to play? Fortunately, there are a number of events we can use to let our player know exactly what is happening.
First, let’s take a look at the media loading process in order:
loadstart
The loadstart event tells us that load process has started and the browser is connecting to the media.
durationchange
If you just want to know as soon as the duration of your media is established, this is the event for you. This can be useful because the initial value for duration is NaN (Not a Number), which you probably don’t want to display to your users.
loadedmetadata
Metadata can consist of more than just duration — if you want to wait for all the metadata to download before doing something, you can detect the loadedmetadata event.
loadeddata
The loadeddata event is fired when the first bit of media arrives. The playhead is in position but not quite ready to play.
progress
The progress event indicates that the download of media is still in progress. It is good practice to display some kind of ‘loader’ at this point.
canplay
canplay is a useful event to detect should you want to determine whether the media is ready to play. You could, for example, disable custom controls until this event occurs.
canplaythrough
canplaythrough is similar to canplay but it lets you know that the media is ready to be played all the way through (that is to say that the file has completely downloaded, or it is estimated that it will download in time so that buffering stops do not occur).
Media loading event order
To recap, the order of the media loading events are:
loadstart > durationchange > loadedmetadata > loadeddata > progress > canplay > canplaythrough
Loading interruption events
We also have a few events available that will fire when there is some kind of interruption to the media loading process.
Media data is no longer being fetched even though the file has not been entirely downloaded.
Media data download has been aborted but not due to an error.
An error is encountered while media data is being downloaded.
The media buffer has been emptied, possibly due to an error or because the load() method was invoked to reload it.
Media data is unexpectedly no longer available.
Media Playing Events
We also have another set of events that are useful for reacting to the state of the media playback.
timeupdate
The timeupdate event is triggered every time the currentTime property changes. In practice, this occurs every 250 milliseconds. This event can be used to trigger the displaying of playback progress.
playing
The playing event is initiated when playback is ready to start after having being paused due to lack of media data.
waiting
The waiting event is triggered when playback has stopped due to lack of media data, although it is expected to resume once data becomes available.
The play event is initiated after the play() method is returned or when the autoplay attribute has caused playback to begin. This is when the state of the media switches from paused to playing.
pause
The pause event is triggered after the pause() method is returned. This is when the states switch from playing to paused.
ended
The ended event is initiated when the end of the media is reached.
volumechange
The volumechange event signifies that the volume has changed; that includes being muted.
An Audio Player with Feedback
Consider this snippet of HTML:
Now let’s wire this thing up with JavaScript:
You should end up with something like this:
Seeking using the seek bar
This is a good start, but it would be nice to be able to navigate the audio using the progress bar. Fortunately this isn’t too difficult to implement.
First of all, we apply a quick update to the progress bar CSS to display the hand pointer on hover:
Then we add the code that detects the click and moves the ‘playhead’ to the correct position:
Buffering
Ok, we’re getting there, but there is another piece of useful information we can display: the amount of audio has been buffered or downloaded in advance.
There are a couple of properties we haven’t looked at yet, buffered and seekable .
buffered
This property lets us know which parts of the audio has been buffered (downloaded in advance). It returns something called a TimeRanges object.
seekable
The seekable property informs you of whether you can jump directly to that part of the media without further buffering.
Buffering events
There are also a couple of events related to buffering:
The seeking event is fired when media is being sought.
seeked occurs when the seeking attribute changes to false .
Note: You can read more on Buffering, Seeking and Time Ranges elsewhere.
Browser support
The following tables list basic audio support across desktop and mobile browsers, and what audio codecs are supported.
Desktop
Desktop Browser Version Chrome 4+ Firefox 3.5+ Internet Explorer 9+ Opera 10.5+ Safari 4+ Mobile
Mobile Browser Version Chrome (Android) 32+ Firefox (Android) 26+ IE Mobile 10+ Opera Mobile 11+ Safari (iOS) 4+ Android Browser 2.3+ Blackberry 7+ Audio Codec Support
Browser Ogg MP3 AAC PCM Opus Firefox 3.5+ ✓ ✓ *26+ ✓ ✓ *14+ Safari 5+ ✓ ✓ Chrome 6+ ✓ ✓ ✓ ✓ *9+ Opera 10.5+ ✓ Internet Explorer 9+ ✓ ✓ Firefox Mobile ✓ ✓ ✓ ✓ ✓ Safari iOS3+ ✓ ✓ ✓ *4.2+ Chrome Mobile ✓ ✓ ✓ ✓ Opera Mobile ✓ ✓ ✓ ✓ Internet Explorer Mobile ✓ ✓ ✓ ✓ Android 2.3+ ✓ ✓ ✓ ✓ Note: Nearly all browsers support MP3 — for more details see this page on media format browser compatibility.
Создание настраиваемого HTML5 Audio Player.
В этом уроке я собираюсь познакомить вас с аудио в HTML5 и показать, как создать собственный плеер.
Если вы хотите быстрее, взгляните на готовый HTML5 Audio Player , доступный на Envato Market. Он позволяет создавать списки воспроизведения из самых разных источников и поставляется с огромным набором параметров настройки.
HTML5 Audio Player with PlaylistВы найдёте множество HTML5 experts в Envato Studio, чтобы помочь вам.
Введение
До сих пор внедрение аудио в веб-проект было утомительным процессом, в значительной степени зависящим от сторонних плагинов, вроде Flash. После пресловутого отказа iPhone от плагина и новости о том, что Adobe больше не поддерживает Flash для мобильных устройств, многие разработчики ищут другие способы включения аудио в свои проекты. Именно здесь вступает в действие HTML5 audio, чтобы решить проблему.
Хотя HTML5 предоставляет стандарт воспроизведения аудиофайлов в Интернете, он находится в зачаточном состоянии и ещё долго не сможет предоставить то, что есть у других, таких как Flash. Однако в большинстве случаев этого будет достаточно.
Простой Html5 Audio
Самый простой способ внедрить аудио в веб-страницу с использованием HTML5 — использовать новый audio тег. Добавьте его в свой документ HTML5 со следующим кодом:
Если вы посмотрите на приведенный выше код, вы увидите, что я объявил тег <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, мы можем создать новую звуковую переменную, чтобы держать наш аудиофайл таким простым:
Это действительно настолько просто! Тогда, когда мы хотим выполнить действие над аудио, мы можем вызвать его, используя переменную «myaudio». Вот список действий, которые мы можем предпринять с переменной. Запомните это, мы будем использовать некоторые из них позже, когда создадим наш аудиоплеер.
Если вы хотите, чтобы функция была вызвана после завершения воспроизведения звука, вы можете использовать «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.
После названия h1 я создал div с классом «container» и «gradient». Я создал отдельный класс градиента, поскольку он будет повторно использоваться для некоторых других элементов. Внутри «.container» я добавил изображение (которое будет обложкой альбома), тогда три якорных тега будут действовать как элементы управления для проигрывателя. Между ними вы найдете поле ввода scubber/HTML5 range.
Создание HTML5 Audio Player: стили
Вместо того, чтобы перебирать каждый аспект CSS, я собираюсь дать обзор и обратить внимание на отдельные части, на которые вы, возможно, захотите обратить внимание.
В коде ниже я создал градиент плеера, который был сгенерирован с помощью этого CSS gradient editor . Затем я создал «.container» с некоторыми переходами CSS3.
Вы заметите, что я использовал атрибут размера окна CSS3, установленный в «border-box». Это отступ 10px вокруг контейнера, шириной, в данном случае 427px. Если этого не сделать, добавление padding к 427px сделало бы контейнер больше, чем мне надо. В наши дни становится обычной практикой применять *
Я также добавил CSS3-переходы в «.coverlarge», чтобы позволить некоторые приятные переходы при первом открытии проигрывателя. Сначала CSS может показаться немного подавляющим, но многое здесь — это префиксы браузера, чтобы убедиться, что аудиоплеер выглядит и работает одинаково в разных браузерах.
Как аудио плеер должен смотреться на этом этапеПоскольку контейнер для player завершён, пришло время создать элементы управления. Большинство кнопок были созданы с помощью CSS sprites
К сожалению, IE ещё не поддерживает ввод диапазона HTML5, поэтому я решил не показывать аудио-скруббер пользователям IE. Если для вас это неприемлемо, можете использовать jQuery UI slider аналогично методу, который я использовал. Тем не менее, я просто скрыл скруббер input
Проблема с ползунком диапазона HTML5 заключается в том, что его поддерживает только несколько браузеров; в основном браузеры WebKit (Chrome и Safari). К сожалению, Opera и Firefox покажут только стандартный слайдер. Если вам нужен пользовательский стиль во всех браузерах, вы можете использовать jQuery UI slider , как упоминалось ранее. Вы видите пользовательский стиль для браузеров WebKit в атрибуте input :: — webkit-slider-thumb .
Создание HTML5 Audio Player: jQuery
Поскольку стиль и разметка сделаны, пришло время оживить player. Сделаем это с помощью javascript framework jQuery. Поскольку jQuery document ready был объявлен, мы создаём некоторые переменные, внутри которых можем хранить наши объекты jQuery.
В приведенной выше переменной «song» вы видите, что мы заявили два трека. Формат OGG для Firefox и MP3 для других браузеров. Затем я создаю условный IF , чтобы мы могли проверить, может ли браузер воспроизводить MP3. Если да, тогда мы превращаем источник «song» в MP3-трек, если нет, тогда он будет воспроизводиться в формате «OGG».
Следующее, что мы собираемся создать — это функции кликов, которые позволят нам play и pause музыку. Я использую функцию play() , чтобы запустить звук, а затем метод jQuery replaceWith , который заменяет кнопку воспроизведения кнопкой паузы.
Я также добавил классы «coverLarge» и «containerLarge» в «container» и «cover». Поскольку я добавил CSS3 переходы ранее в CSS, то появится переход, когда начнётся воспроизведение. Функция «pause» работает аналогично, но без переходов. Нажатие заменяет кнопку pause на кнопку «play».
Кнопки отключения звука работают аналогично кнопкам воспроизведения и паузы, но вызывают соответствующие действия и заменяют кнопки соответствующими альтернативами.
Когда пользователь нажимает кнопку «close», мы вызываем jQuery для удаления классов «containerLarge» и «coverLarge». Это скроет обложку и закроет плеер. Затем мы приостанавливаем проигрыватель, вызывая действие pause () и восстанавливая аудио currentTime на 0. Это возвращает дорожку к началу.
Пришло время перейти на звуковой скруббер, которому присвоен идентификатор «seek». Первая функция позволяет нам переместить скруббер в любую часть аудио. Это делается путем обнаружения изменений, когда кто-либо перемещает скруббер. Затем мы устанавливаем song.currentTime, чтобы он соответствовал части песни, в которую переместился скруббер. Мы также устанавливаем атрибут max, чтобы отражать продолжительность песни.
Заключительная часть jQuery состоит в том, чтобы заставить скруббер «#seek» двигаться вместе с продолжительностью звука. Мы добавим к нему прослушиватель событий, а при обновлении звукового времени вызываем функцию. Я установил переменную «curtime», чтобы получить текущее время песни. Затем я обновляю значение скруббера, чтобы отобразить текущую временную позицию аудио.
И вот оно! Аудиоплеер 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.
HTML Audio
The HTML <audio> element is used to play an audio file on a web page.
The HTML <audio> Element
To play an audio file in HTML, use the <audio> element:
Example
HTML Audio — How It Works
The controls attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format.
The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.
HTML <audio> Autoplay
To start an audio file automatically, use the autoplay attribute:
Example
Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.
Add muted after autoplay to let your audio file start playing automatically (but muted):
Example
Browser Support
The numbers in the table specify the first browser version that fully supports the <audio> element.
Element <audio> 4.0 9.0 3.5 4.0 10.5 HTML Audio Formats
There are three supported audio formats: MP3, WAV, and OGG. The browser support for the different formats is:
Browser MP3 WAV OGG Edge/IE YES YES* YES* Chrome YES YES YES Firefox YES YES YES Safari YES YES NO Opera YES YES YES HTML Audio — Media Types
File Format Media Type MP3 audio/mpeg OGG audio/ogg WAV audio/wav HTML Audio — Methods, Properties, and Events
The HTML DOM defines methods, properties, and events for the <audio> element.
This allows you to load, play, and pause audios, as well as set duration and volume.
There are also DOM events that can notify you when an audio begins to play, is paused, etc.