Пользователь
0,0
рейтинг
21 июля 2012 в 12:06

Разработка → Освоение HTML5 тега audio перевод

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



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

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



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

Хотите зациклить звук? Атрибут loop поможет Вам это сделать. Но опять же, не стоит злоупотреблять автозапуском и воспроизведением в цикле, если не хотите, чтобы пользователь преждевременно покинул сайт.
<audio src="sound.mp3" autoplay loop></audio>



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

Вместо того, чтобы играть звуки автоматически, что, безусловно, плохая практика, вы должны позволить отображать в браузере некоторые элементы управления, такие как громкость и кнопки воспроизведение (пауза). Это сделать легко, просто добавив атрибут controls.
<audio src="sound.mp3" controls></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 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 тега .
Перевод: Jean-Baptiste Jung
Максим Ткачук @makzimko
карма
9,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (19)

  • +3
    Используем audio для вставки звукового файлу на сторінку

    Для незнающих украинских — имеется в виду «на страницу»?

    И «файл wtkbrjv» — файл целиком :)
  • +10
    Да уже море просто ресурсов, где рассказывается про тег . Неужели столь простая информация до сих пор требует обсуждения?
  • +3
    Тем более пользоваться им нормально до сих пор нельзя.
    • +1
      Почему нет?
      • +2
        А оно не работает нормально. Пробовали и огребли кучу проблем. Реально нет простого способа его использования чтобы работало у большинства пользователей. Чего стоит зависание сафари в одной из версий, постоянные падения после выхода 19 хрома.
        • 0
          и как минимум гимморой с флеш-прокладкой или залитием одинаковых ogg и mp3 дорожек для разных файлов
  • +15
    весьма познавательная статья. столько полезной, а главное труднодоступной информации
  • +1
    Обратите внимание на атрибут autoload, который используется для автоматического воспроизведения звука. Тем не менее Вам не следует автоматически воспроизводить звуки а сайте, ведь это надоедает пользователям.




    так autoload или autoplay?
  • 0
    А как сделать остановку загрузки кнопку «Стоп», вместо «Паузы»?
    • 0
      audio.currentTime = 0;
      • 0
        и начнёт сначала играть, ну если надо остановить будет не просто сначала нажать, но и остановить то так:
        audio.currentTime = 0;
        audio.pause();
        
        • –1
          лучше наоборот
  • +5
    Последние несколько месяцев на Хабре наблюдаю множество статей, с информацией для самых маленьких. Информация, конечно, полезная, но доступная и малоактуальная (к сожалению).
    Может, стоит для таких статей организовать что-то вроде раздела «ХабраДетский сад» и переносить туда подобные статьи голосованием (при переносе убирать с главной и из rss)?
  • 0
    >Safari, например, может проигрывать MP3, а Firefox не может, и играет OGG-файлы вместо этого.

    Ну вот опять начинается. Каждый браузер реализует свое, а фронтэндеры в итоге мучаются и держат на своей машине целый зоопарк.
    • 0
      На мелких файлах это не то чтобы катастрофа. Я, например, рекодирую все, что мне попадает, в vorbis, и отдаю оригинал и vorbis как fallback. Вроде у всех работает.
      А за то, что не все могут реализовать все возможные форматы, винить нужно не производителей браузеров, а патенты на алгоритмы и тех, кто хочет за использование декодеров бабло.
  • +1
    С появлением достаточно быстрого соединения с сетью Интернет, Flash был единственным инструментом для воспроизведения звуков на веб-сайтах.
    Никого не насторожило, что с 1-й строчки идёт неправда? Издревле альтернативами флешу были теги object и embed, которые работали напрямую с звуковыми файлами, сильно зависели от настроек ОС и установленных кодеков, но всегда были независимы от флеша. И никогда не исчезали из браузеров.

    Так вот, почему бы, даже если и перевод, не поправить автора сочинения? Как обычно, в скобках «прим. перев.». Зачем вообще переводить автора, не полностью разбирающегося в теме? Лучше взять правильную часть, проверить, если надо, и написать своими словами. Тем более, что в комментах уже пишут, что и данные теги работают с глюками, поэтому не могут быть решением.
  • +1
    Возможно, я уже начитался кучи всего по и мне кажется эта информация просто убогой бесполезной, детской… Если в гугле набрать , то выдаст кучу ответов, где написано то же самое что и в этой статье… тогда — зачем переводить было?

    Вот это лучше бы перевели, если так сильно хотелось что-то сделать.
  • 0
    Все легко: ниже приведён код, который будет отображать сообщение для браузеров, которые не поддерживают тег audio.
    Всё не так легко: есть флеш, который нормально работает в этих браузерах. Так вот, туда надо вставить флеш или его инициализацию.
    habrahabr.ru/post/148368/ Тут подробнее.
  • 0
    У сервера неправильно прописан MIME тип для ogg (application/octet-stream), из-за этого Firefox не играет (в отличие от Оперы и Хрома). Может автор знает, как это исправить? Отредактировать .htaccess невозможно.

    Пробовал указывать тип в тегах — не помогает.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.