1

Тема: Тег audio в HTML5

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


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

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

Сайт Xakker

Поделиться

2

Re: Тег audio в HTML5

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

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

Сайт Xakker

Поделиться

3

Re: Тег audio в HTML5

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

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

Сайт Xakker

Поделиться

4

Re: Тег audio в HTML5

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

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

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

Сайт Xakker

Поделиться

5

Re: Тег audio в HTML5

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

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

Сайт Xakker

Поделиться

6

Re: Тег audio в HTML5

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

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

Сайт Xakker

Поделиться

7

Re: Тег audio в HTML5

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

Сайт Xakker

Поделиться

8 (изменено: Xakker, 2016.02.25 19: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

Поделиться

9

Re: Тег audio в HTML5

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

Сайт pervik

Поделиться

10

Re: Тег audio в HTML5

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

Поделиться

11

Re: Тег audio в HTML5

PunBB сказал:

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

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

Сайт Xakker

Поделиться