Главная > Аудио > Применение HTML5 Audio: подсказки и уроки интеграции звука
Применение HTML5 Audio: подсказки и уроки интеграции звука1 июня 2011, 11:10. Разместил: Mysterious Master |
До недавнего времени встроить звук в веб-страницу было не таким уж и лёгким заданием. В общем, существует несколько способов интеграции, среди которых некоторые предлагают более грамотную и лучшую реализацию, но большинство способов ограничивают вас тем, что вам нужно иметь определенный браузер и определённые плагины. С приходом на рынок технологии 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), можно без проблем делать откаты для них, если это понадобится, что в наши дни встречается всё реже и реже. Вернуться назад |