Освоение HTML5 тега <audio>

в 8:06, , рубрики: Audio, html, html5, тег audio

Освоение HTML5 тега &lt;audio&gt; С появлением достаточно быстрого соединения с сетью Интернет, Flash был единственным инструментом для воспроизведения звуков на веб-сайтах. Но HTML5 в корне изменит способ воспроизведения звуков в Интернет. В этой статье я хочу подробно рассказать Вам о том, как использовать тег <audio> на ваших сайтах.


Используем <audio> для вставки звукового файлу на страницу

Ниже приведен простейший пример использования тега <audio>, он загружает mp3 файл и воспроизводит его. Обратите внимание на атрибут autoload, который используется для автоматического воспроизведения звука. Тем не менее Вам не следует автоматически воспроизводить звуки а сайте, ведь это надоедает пользователям.

<audio src="sound.mp3" autoplay></audio>


Воспроизведение звука в цикле

Хотите зациклить звук? Атрибут loop поможет Вам это сделать. Но опять же, не стоит злоупотреблять автозапуском и воспроизведением в цикле, если не хотите, чтобы пользователь преждевременно покинул сайт.

<audio src="sound.mp3" autoplay loop></audio>


Отображение элементов управления

Вместо того, чтобы играть звуки автоматически, что, безусловно, плохая практика, вы должны позволить отображать в браузере некоторые элементы управления, такие как громкость и кнопки воспроизведение (пауза). Это сделать легко, просто добавив атрибут controls.

<audio src="sound.mp3" controls></audio>


Различные форматы файлов

Тег <audio> поддерживается большинством современных браузеров, но проблема в том, что разные браузеры поддерживают разные форматы файлов. Safari, например, может проигрывать MP3, а Firefox не может, и играет OGG-файлы вместо этого. Решение этой проблемы заключается в использовании обоих форматов, чтобы каждый посетитель мог услышать звук, независимо от того, какой браузер он использует.

<audio controls> 
  <source src="sound.ogg"> 
  <source src="sound.mp3"> 
</audio>


Указываем MIME-тип файлов

При использовании различных форматов файлов, хорошей практикой есть указывание MIME-типа для каждого файла, чтобы помочь браузеру локализировать поддерживаемый им файл. Это легко можно сделать используя атрибут type.

<audio controls>
  <source src="sound.ogg" type="audio/ogg" >
  <source src="sound.mp3" type="audio/mp3" >
</audio>


Для старых браузеров

А что, если посетитель использует IE6 или какой-то другой доисторический браузер, который не поддерживает тег <audio>? Все легко: ниже приведён код, который будет отображать сообщение для браузеров, которые не поддерживают тег <audio>.

<audio controls>
  <source src="sound.ogg" type="audio/ogg" >
  <source src="sound.mp3" type="audio/mp3" >
  Ваш браузер не пожжерживает тег audio!
</audio>


Буферизация файлов

При воспроизведении файлов большого размера может использоваться буферизация файлов. Для этого вы можете использовать атрибут preload. Он может принимать 3 значения:

  • none — если вы не хотите использовать буфер файлов;
  • auto — если вы хотите, чтобы браузер беферизировал файл целиком;
  • metadata — для загрузки лишь служебной информации (продолжительность звучания и др.).


Управление воспроизведением через JavaScript

Управлять HTML5 аудио-проигрывателем через JavaScript очень легко. Следующий пример показывает, как с использованием JavaScript можно построить свои базовые элементы управления аудио-плеером:

<audio id="player" src="sound.mp3"></audio>
<div>
	<button onclick="document.getElementById('player').play()">Воспроизведение</button>
	<button onclick="document.getElementById('player').pause()">Пауза</button>
	<button onclick="document.getElementById('player').volume+=0.1">Громкость +</button>
	<button onclick="document.getElementById('player').volume-=0.1">Громкость -</button>
</div> 


Вот и всё на сегодня.
Надеюсь, что эта статья помогла Вам понять базовые возможности HTML5 тега <audio>.

Автор: makzimko

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js