Делаем свой аудиоплеер для сайта. Часть 1

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

Что представляет из себя аудиоплеер

Совсем недавно медиа-контент на сайте воспроизводился с помощью инструмента flash. С появлением HTML5 аудио и видео контент можно воспроизводить средствами HTML, что, безусловно, является огромным плюсом. Достаточно добавить на страницу контейнер <audio>.

Можно так:

<audio src=src="name.ogg"></audio>

Или так:

<audio controls autoplay loop>
  <source src="name.ogg" type="audio/ogg">
  <source src="name.mp3" type="audio/mpeg">
  <source src="name.wav" type="audio/wave">
  <source src="name.aac" type="audio/aac">
  <a href="upload/audio/name.mp3">Вы видите этот текст, так как ваш браузер не поддерживает воспроизведение аудио с помощью HTML, можете скачать файл name.mp3 для прослушивания.</a>
</audio>

• Если установить атрибут controls — браузер будет отображать стандартную панель для воспроизведения (кнопка play, громкость, и т.д.).
• Атрибут autoplay — указывает браузеру автоматически начать воспроизведение сразу после загрузки страницы.
• Атрибут loop — зацикливает воспроизведение одной записи.
• Атрибут muted — выключает звук воспроизводимого файла.
• Атрибут preload — определяет предварительную загрузку файла. Возможные значения:
  — auto — браузер загрузит сразу весь файл при загрузке страницы
  — metadata — браузер загрузит небольшой кусочек файла для определения его характеристик
  — none — ничего загружено не будет, пока пользователь не начнет воспроизведение

Поддерживаемые форматы

MP3 — один из самых известных форматов аудио, но, к сожалению, поддерживается не всеми браузерами из-за необходимости отчислять лицензионные обязательства за использование кодека. Firefox, Opera, Chrome не поддерживают. А вот Safari — поддерживает.

AAC (Advanced Audio Codec) — улучшенный аналог MP3, но также является закрытым и платным.

Ogg Vorbis — бесплатный формат с открытым исходным кодом кодека. Поддерживается Firefox, Opera и Chrome. Есть некоторые ограничения со стороны аппаратных проигрывателей.

Wav (Waveform Audio File Format) — формат хранения оцифрованного потока аудио, чаще всего несжатого.

Лучше всего использовать несколько вариантов файлов, чтобы избежать ситуации, когда в одном браузере файл воспроизводится без проблем, а в другом наблюдаются проблемы. Для этого используется вложенный тегс одним из вариантов аудио файла.

JavaScript + <audio>

Задействовав JavaScript можно легко воспроизводить аудио с элементами управления

<audio id="audioPlayer" src="upload/audio/name.mp3"></audio>
<div>
	<button onclick="document.getElementById('audioPlayer').play()">Play</button>
	<button onclick="document.getElementById('audioPlayer').pause()">Pause</button>
	<button onclick="document.getElementById('audioPlayer').volume+=0.1">Volume up</button>
	<button onclick="document.getElementById('audioPlayer').volume-=0.1">Volume down</button>
</div> 

Вот так будет выглядеть стандартная панель браузера:

А вот так будет выглядеть элемент audio с использованием JavaScript:

Воспроизводить аудио на своем сайте не сложно. В статье я рассказал про воспроизведение файлов. Но воспроизводить можно не только файлы. Это может быть и потоковое аудио. Но об этом в другой раз.