—»     —»   Применение HTML5 Audio: подсказки и уроки интеграции звука
  Раздел: Аудио   Комментариев: 6  

Применение HTML5 Audio: подсказки и уроки интеграции звука



До недавнего времени встроить звук в веб-страницу было не таким уж и лёгким заданием. В общем, существует несколько способов интеграции, среди которых некоторые предлагают более грамотную и лучшую реализацию, но большинство способов ограничивают вас тем, что вам нужно иметь определенный браузер и определённые плагины.

С приходом на рынок технологии Flash, эта задача значительно упростилась, так как Flash-плагин позволяет вам встраивать любую анимацию или звук в страницу, и технология поддерживается большинством браузеров. Но востребованность Flash постепенно сходит на нет после выхода на рынок инновационных девайсов от компании Apple: iPhone и iPad. Как известно, компания Apple принципиально не оснащает свои устройства поддержкой Flash, а число пользователей продукции стремительно растёт.

Вкратце, здесь небольшая путаница.

К счастью, HTML5 значительно упростил жизнь разработчикам, так как в технологии присутствует элемент audio. Данный элемент позволяет вам встраивать аудио-файлы в любую веб-страницу, а также реализовать панель управления посредством javascript. Что более важно, технология не требует дополнительных плагинов, и поддерживается почти во всех браузерах, за исключением ранних версий (о поддержке браузерами мы поговорим позже!).

В нашей сегодняшней статье мы расскажем вам о том, каким образом можно встроить звуки посредством элемента audio. Мы также научимся управлять процессом воспроизведения посредством javascript, а также постараемся рассказать вам о поддержке технологии среди браузеров.

HTML5-элемент Audio

Данный элемент крайне просто использовать. В нашем сегодняшнем примере мы будем встраивать песенку Бинга Кросби (Bing Crosby) «White Christmas»:

<audio src="WhiteChristmas.mp3"></audio>

Здесь не нужно особо много объяснять. Примерно как вы вставляете изображение посредством тэга img, таким же образом вы можете вставить звук посредством тэга audio.

Кросс-браузерная поддержка

Вышеприведенный пример вряд ли будет работать во всех браузерах. Здесь дело затрагивает формат файла.

Некоторые браузеры умеют воспроизводить файлы формата .mp3, но не умеют файлы формата .ogg, а другие наоборот. Большинство браузеров умеют воспроизводить файлы формата .wav, но ввиду его большого размера, использование его в качестве звука для веб-сайта неуместно.

Вот вам таблица браузеров, где указаны поддержки звуковых форматов:

Применение HTML5 Audio: подсказки и уроки интеграции звука

Какие форматы поддерживает ваш браузер? Определите это посредством этой страницы.

Как видно в таблице, наиболее оптимальным вариантом реализации будет подключение обоих форматов файлов.
Для того чтобы сделать это, вы можете добавить несколько элементов source элементу audio, и в них указать пути к различным форматам. Браузер будет воспроизводить первый файл, который он поддерживает. Вот пример:

<audio> 
  <source src="WhiteChristmas.mp3">
  <source src="WhiteChristmas.ogg">
</audio>

Конечно же, это означает, что вам нужно создать как Mp3, так и OGG версию вашего звукового файла (здесь вам на помощь приходит Audacity), но только так можно организовать кросс-браузерную поддержку.

Ранние версии Internet Explorer (версии 7 и 8) вообще не поддерживают элемент audio. Тем не менее, далее в статье мы рассмотрим, как обойти этот недуг.

Автоматическое воспроизведение звука

Хотя вышеприведенный код и встраивает звук, он не воспроизводит его. Если нам надо, чтобы звук воспроизводился автоматически при загрузке страницы, нам нужно добавить элементу атрибут autoplay:

<audio autoplay> 
  <source src="WhiteChristmas.mp3">
  <source src="WhiteChristmas.ogg">
</audio>

Посмотреть демо

Добавляем кнопки управления

Хотя и автоматическое воспроизведение может быть полезным, во многих случаях оно надоедает или совсем неуместно. Поэтому мы можем установить дополнительные кнопки управления элементов audio, чтобы пользователь сам мог решать:

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

Посмотреть демо

Это добавляет горизонтальную панель с кнопкой паузы/воспроизведения, временной шкалой с ползунком, а также регулятор громкости. Всё примерно так же, как вы можете видеть на плеере в Youtube.

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

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

Добавление к элементу audio атрибута loop сделает так, что звук будет воспроизводиться бесконечно.

<audio loop> 
  <source src="WhiteChristmas.mp3">
  <source src="WhiteChristmas.ogg">
</audio>

Это может быть полезным для того, чтобы включать фоновую музыку, либо звуковые эффекты в играх.

Предварительная загрузка

Вы также можете использовать атрибут preload, который даст браузеру данные о том, когда и где должен быть подгружен определенный звуковой файл.
Предварительная загрузка звукового файла означает, что звук может быть воспроизведен сразу же при нажатии пользователем кнопки play.

Для этого атрибута есть несколько значений:

«none» – браузер не должен навязывать загруженный файл. Т.е. если вы уверены в том, что большинство пользователей не будут воспроизводить этот файл, используйте этот параметр. Либо используйте его в случае, когда вам нужно сохранить как можно больше пропускной способности сервера.

«metadata» – параметр схож с none, за исключением того, что вы оповещаете браузер о возможности подгрузки метаданных, типа продолжительности аудио-дорожки, но не самого аудио-файла.

«auto» – вы позволяете браузеру загружать сам аудио-файл.

Например:

<audio preload="metadata"> 
  <source src="WhiteChristmas.mp3">
  <source src="WhiteChristmas.ogg">
</audio>

Имейте в виду, что предварительная загрузка – это лишь удобное дополнение, так как некоторые браузеры могут просто проигнорировать эту команду и начать творить всё, что им вздумается.

Управление воспроизведением посредством javascript

Что удобно в элементах javascript – это то, что ими проще простого управлять посредством javascript. Аудио-элемент предлагает множество удобных параметров и способов управления:

Play() – начать воспроизведение с текущей позиции;

Pause() – остановить воспроизведение на текущей позиции;

canPlayType(type) – определить, поддерживает ли браузер воспроизведение данного типа медиа;

duration – продолжительность дорожки в секундах;

currentTime – текущее положение в секундах. Вы также можете установить данный параметр на перемещение положения воспроизведения.

Используя предложенные выше параметры и методы, мы можем создать некоторые основные кнопки управления:

<audio id="myTune">
  <source src="WhiteChristmas.mp3">
  <source src="WhiteChristmas.ogg">
</audio>

<button onclick="document.getElementById('myTune').play()">Play Music</button>
<button onclick="document.getElementById('myTune').pause()">Pause Music</button>
<button onclick="document.getElementById('myTune').pause(); document.getElementById('myTune').currentTime = 0;">Stop Music</button>

Посмотреть демо: http://www.elated.com/res/File/articles/authoring/html/html5-audio/javascript-control.html

Поддержка ранних версий Internet Explorer

В большинстве случаев браузер пользователя будет поддерживать элемент HTML5. Но, к сожалению, браузеры IE версий 7 и даже 8 не поддерживают этот элемент (хотя в 9-м уже есть поддержка). Важно продумать версию отката для пользователей, которые остались в 2008 году.

Очень сырой, но эффективный метод заключается в том, чтобы применить специальные комментарии для выделения данных браузеров, и задать им объектный указатель до звукового файла. Таким образом, браузер зачастую будет отображать встроенный контроллер, позволяющий пользователям воспроизводить, останавливать или перематывать музыку в почти похожей на HTML5 audio манере. Вот пример:

<div id="content">

  <div style="margin-bottom: 20px;">
    <button id="playButton" onclick="document.getElementById('myTune').play()">Play Music</button>
    <button id="pauseButton" onclick="document.getElementById('myTune').pause()">Pause Music</button>
    <button id="stopButton" onclick="document.getElementById('myTune').pause(); document.getElementById('myTune').currentTime = 0;">Stop Music</button>
  </div>

  <audio id="myTune" controls>
    <source src="WhiteChristmas.mp3">
    <source src="WhiteChristmas.ogg">
  </audio>

<!--[if lt IE 9]>

  <object id="myTuneObj" type="audio/x-mpeg" data="WhiteChristmas.mp3" autoplay="false" height="45">
    <param name="src" value="WhiteChristmas.mp3" />
    <param name="controller" value="true" />
    <param name="autoplay" value="false" />
    <param name="autostart" value="0" />
  </object>

  <script>
    document.getElementById('playButton').onclick = function() { document.getElementById('myTuneObj').play() };
    document.getElementById('pauseButton').onclick = function() { document.getElementById('myTuneObj').pause() };
    document.getElementById('stopButton').onclick = function() { document.getElementById('myTuneObj').stop() };
  </script>

<![endif]-->

</div>

Посмотреть демо

Вышеприведенный пример будет работать во всех браузерах, которые поддерживают HTML5 Audio, и также будет работать в браузерах IE версий 7 и 8. С помощью комментариев, мы перенаправляем рычаги управления для кнопок напрямую к звуковому файлу.

Другой способ отката заключается во внедрении в страницу Flash-плеера. Вот отличная статья, в которой говорится об откате в виде плеера на Flash.

Заключение

В нашей сегодняшней статье мы научились встраивать аудио-файлы посредством HTML5. Элемент audio не только прост в использовании, но мы также можем оформить его под собственные требования, а также управлять воспроизведением посредством javascript.

Хотите узнать больше об элементе audio в HTML5? Тогда ознакомьтесь со спецификациями.

Хотя пока что поддержка страдает в некоторых браузерах (типа старых версий IE), можно без проблем делать откаты для них, если это понадобится, что в наши дни встречается всё реже и реже.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: HTML 5, audio, музыка
Опубликовал Mysterious Master   Прочитано (раз): 30594   |   Оставлено комментариев: 6
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 7 июня 2011 @ 00:22
Написал: player — группа: Читатели  
На сайте с: 16.04.2010   |   Публикаций: 0   |   Комментариев: 35
ICQ: --- не указано ---
спс за статью и с обновкой вас ребята))))
Комментарий #2: 7 июня 2011 @ 10:08
Написал: Mysterious Master — группа: Администраторы  
На сайте с: 11.07.2009   |   Публикаций: 1491   |   Комментариев: 177
ICQ: --- не указано ---
player, пожалуйста, :)
Комментарий #3: 29 марта 2012 @ 13:06
Написал: Дмитрий — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Здравствуйте,
А как сделать так, чтобы фоном воспроизводились разные файлы из указанных папок.
Например у меня есть несколько десятков файлов mp3 с короткими репликами. И мне надо чтобы эти реплики воспроизводились непрерывно и все время в разном (хаотическом) порядке.

А еще лучше с разных папок. И если я добавляю файлы в папки, то они автоматически тоже производятся без переделки кода проигрывания.

Возможно ли такое сделать? И как?
Комментарий #4: 29 марта 2012 @ 19:16
Написал: known — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Дмитрий, это уж Вам придется рандомизировать имена по списку (возм. динамиич. созд. по лист. папки). А название/путь к ф-лам загонять в переменную, кот-ю и юзать в соотв. поле самого скрипа аудио... Вот схема --деразайте! ;)
Комментарий #5: 9 апреля 2013 @ 15:10
Написал: Николай — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Дмитрий, на сервере пхп скриптом, рекурсией ищите все файлы в нужных папках с нужным форматом
Все их собираете в массив
Его передаете клиенту в JSON формате
Джаваскриптом выбираете рандомный и вставляете в "src" тегу audio
Комментарий #6: 13 августа 2014 @ 12:47
Написал: Павел — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Добрый день. А как будет выглядеть код, где вместо трех кнопок "play", "pouse" и "stop", всего одна? Проще говоря картинка -нажал на неё музыка заиграла, нажал повторно выключилась. Если уже был об этом пост, то дайте пожалуйста ссылочку.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930