1 Topic by Xakker

Topic: Тег audio в HTML5

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


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

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

Xakker's Website

2 Reply by Xakker

Re: Тег audio в HTML5

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

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

Xakker's Website

3 Reply by Xakker

Re: Тег audio в HTML5

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

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

Xakker's Website

4 Reply by Xakker

Re: Тег audio в HTML5

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

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

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

Xakker's Website

5 Reply by Xakker

Re: Тег audio в HTML5

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

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

Xakker's Website

6 Reply by Xakker

Re: Тег audio в HTML5

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

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

Xakker's Website

7 Reply by Xakker

Re: Тег audio в HTML5

Буферизация файлов
При воспроизведении файлов большого размера может использоваться буферизация файлов. Для этого вы можете использовать атрибут preload. Он может принимать 3 значения:
none - если вы не хотите использовать буфер файлов;
auto - если вы хотите, чтобы браузер беферизировал файл целиком;
metadata - для загрузки лишь служебной информации (продолжительность звучания и др.).

Xakker's Website

8 Reply by Xakker (edited by Xakker 2016.02.25 09:52)

Re: Тег audio в HTML5

Управление воспроизведением через 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>

материал взят отсюда

Xakker's Website

9 Reply by pervik

Re: Тег audio в HTML5

ЗдОрово! А как сделать, чтобы несколько мр3 файлов проигрывалось друг за другом?  Попробовал вставить файл .xml как во флеш-плеере, не вышло. В этом нет режима перемотки, наверно, никак? (

10 Reply by PunBB

Re: Тег audio в HTML5

Xakker, не забываем ставить ссылки на источники (я так на всякий случай, если копипастишь мануалы)
Спасибо за понимание PunBB_INFO_ICQ/smile

11 Reply by Xakker

Re: Тег audio в HTML5

PunBB wrote:

Xakker, не забываем ставить ссылки на источники (я так на всякий случай, если копипастишь мануалы)
Спасибо за понимание PunBB_INFO_ICQ/smile

Извините. исправил.
pervik, готового решения вроде нет, но вот посмотрите как здесь это реализовано

Xakker's Website