Применение HTML5 Audio: подсказки и уроки интеграции звука
До недавнего времени встроить звук в веб-страницу было не таким уж и лёгким заданием. В общем, существует несколько способов интеграции , среди которых некоторые предлагают более грамотную и лучшую реализацию, но большинство способов ограничивают вас тем, что вам нужно иметь определенный браузер и определённые плагины.
С приходом на рынок технологии Flash, эта задача значительно упростилась, так как Flash-плагин позволяет вам встраивать любую анимацию или звук в страницу, и технология поддерживается большинством браузеров. Но востребованность Flash постепенно сходит на нет после выхода на рынок инновационных девайсов от компании Apple: iPhone и iPad. Как известно, компания Apple принципиально не оснащает свои устройства поддержкой Flash, а число пользователей продукции стремительно растёт.
Вкратце, здесь небольшая путаница.
К счастью, HTML5 значительно упростил жизнь разработчикам, так как в технологии присутствует элемент audio. Данный элемент позволяет вам встраивать аудио-файлы в любую веб-страницу, а также реализовать панель управления посредством javascript. Что более важно, технология не требует дополнительных плагинов, и поддерживается почти во всех браузерах, за исключением ранних версий (о поддержке браузерами мы поговорим позже!).
В нашей сегодняшней статье мы расскажем вам о том, каким образом можно встроить звуки посредством элемента audio. Мы также научимся управлять процессом воспроизведения посредством javascript, а также постараемся рассказать вам о поддержке технологии среди браузеров.
HTML5-элемент Audio
Данный элемент крайне просто использовать. В нашем сегодняшнем примере мы будем встраивать песенку Бинга Кросби (Bing Crosby) «White Christmas»:
Здесь не нужно особо много объяснять. Примерно как вы вставляете изображение посредством тэга img, таким же образом вы можете вставить звук посредством тэга audio.
Кросс-браузерная поддержка
Вышеприведенный пример вряд ли будет работать во всех браузерах. Здесь дело затрагивает формат файла.
Некоторые браузеры умеют воспроизводить файлы формата .mp3, но не умеют файлы формата .ogg, а другие наоборот. Большинство браузеров умеют воспроизводить файлы формата .wav, но ввиду его большого размера, использование его в качестве звука для веб-сайта неуместно.
Вот вам таблица браузеров, где указаны поддержки звуковых форматов:
Какие форматы поддерживает ваш браузер? Определите это посредством этой страницы .
Как видно в таблице, наиболее оптимальным вариантом реализации будет подключение обоих форматов файлов.Для того чтобы сделать это, вы можете добавить несколько элементов source элементу audio, и в них указать пути к различным форматам. Браузер будет воспроизводить первый файл, который он поддерживает. Вот пример:
Конечно же, это означает, что вам нужно создать как Mp3, так и OGG версию вашего звукового файла (здесь вам на помощь приходит Audacity ), но только так можно организовать кросс-браузерную поддержку.
Ранние версии Internet Explorer (версии 7 и 8) вообще не поддерживают элемент audio. Тем не менее, далее в статье мы рассмотрим, как обойти этот недуг.
Автоматическое воспроизведение звука
Хотя вышеприведенный код и встраивает звук, он не воспроизводит его. Если нам надо, чтобы звук воспроизводился автоматически при загрузке страницы, нам нужно добавить элементу атрибут autoplay:
Добавляем кнопки управления
Хотя и автоматическое воспроизведение может быть полезным, во многих случаях оно надоедает или совсем неуместно. Поэтому мы можем установить дополнительные кнопки управления элементов audio, чтобы пользователь сам мог решать:
Это добавляет горизонтальную панель с кнопкой паузы/воспроизведения, временной шкалой с ползунком, а также регулятор громкости. Всё примерно так же, как вы можете видеть на плеере в Youtube.
Важно помнить, что панель управления будет отличаться в зависимости от браузеров. Например, в браузере на iPhone будет отсутствовать ползунок громкости, так как у устройства есть отдельные кнопки для управления уровнем звука.
Зацикленное воспроизведение
Добавление к элементу audio атрибута loop сделает так, что звук будет воспроизводиться бесконечно.
Это может быть полезным для того, чтобы включать фоновую музыку, либо звуковые эффекты в играх.
Предварительная загрузка
Вы также можете использовать атрибут preload, который даст браузеру данные о том, когда и где должен быть подгружен определенный звуковой файл.Предварительная загрузка звукового файла означает, что звук может быть воспроизведен сразу же при нажатии пользователем кнопки play.
Для этого атрибута есть несколько значений:
«none» – браузер не должен навязывать загруженный файл. Т.е. если вы уверены в том, что большинство пользователей не будут воспроизводить этот файл, используйте этот параметр. Либо используйте его в случае, когда вам нужно сохранить как можно больше пропускной способности сервера.
«metadata» – параметр схож с none, за исключением того, что вы оповещаете браузер о возможности подгрузки метаданных, типа продолжительности аудио-дорожки, но не самого аудио-файла.
«auto» – вы позволяете браузеру загружать сам аудио-файл.
Имейте в виду, что предварительная загрузка – это лишь удобное дополнение, так как некоторые браузеры могут просто проигнорировать эту команду и начать творить всё, что им вздумается.
Управление воспроизведением посредством javascript
Что удобно в элементах javascript – это то, что ими проще простого управлять посредством javascript. Аудио-элемент предлагает множество удобных параметров и способов управления:
Play() – начать воспроизведение с текущей позиции;
Pause() – остановить воспроизведение на текущей позиции;
canPlayType(type) – определить, поддерживает ли браузер воспроизведение данного типа медиа;
duration – продолжительность дорожки в секундах;
currentTime – текущее положение в секундах. Вы также можете установить данный параметр на перемещение положения воспроизведения.
Используя предложенные выше параметры и методы, мы можем создать некоторые основные кнопки управления:
Посмотреть демо: http://www.elated.com/res/File/articles/authoring/html/html5-audio/javascript-control.html
Поддержка ранних версий Internet Explorer
В большинстве случаев браузер пользователя будет поддерживать элемент HTML5. Но, к сожалению, браузеры IE версий 7 и даже 8 не поддерживают этот элемент (хотя в 9-м уже есть поддержка). Важно продумать версию отката для пользователей, которые остались в 2008 году.
Очень сырой, но эффективный метод заключается в том, чтобы применить специальные комментарии для выделения данных браузеров, и задать им объектный указатель до звукового файла. Таким образом, браузер зачастую будет отображать встроенный контроллер, позволяющий пользователям воспроизводить, останавливать или перематывать музыку в почти похожей на HTML5 audio манере. Вот пример:
Вышеприведенный пример будет работать во всех браузерах, которые поддерживают HTML5 Audio, и также будет работать в браузерах IE версий 7 и 8. С помощью комментариев, мы перенаправляем рычаги управления для кнопок напрямую к звуковому файлу.
Другой способ отката заключается во внедрении в страницу Flash-плеера. Вот отличная статья , в которой говорится об откате в виде плеера на Flash.
В нашей сегодняшней статье мы научились встраивать аудио-файлы посредством HTML5. Элемент audio не только прост в использовании, но мы также можем оформить его под собственные требования, а также управлять воспроизведением посредством javascript.
Хотите узнать больше об элементе audio в HTML5? Тогда ознакомьтесь со спецификациями .
Хотя пока что поддержка страдает в некоторых браузерах (типа старых версий IE), можно без проблем делать откаты для них, если это понадобится, что в наши дни встречается всё реже и реже.
Вам понравился материал? Поблагодарить легко! Будем весьма признательны, если поделитесь этой статьей в социальных сетях: