Еще совсем недавно возможно встраивать разные типы аудио в браузер можно было только с помощью Adobe Flash и других плагинов браузера. Без всяких сомнений, Adobe Flash player явлется наиболее используемым, но большинство разработчиков и дизайнеров сходятся в мнении, что лучше избегать использования плагинов вовсе.
Введение в HTML 5 <audio>
Одной из долгожданных фишек HTML 5, без сомнений, стал тег audio, который позволяет нам проигрывать аудио внутри браузера. На данный момент мы можем воспользоваться этим в таких браузерах как Safari 4, Firefox 3.5 и Chrome 3, и по прежнему использовать Flash или другой плагин в случае остальных браузеров.
Сейчас HTML 5 выделяет 5 атрибутов для элемента audio:
src – валидный URL определяющий источник содержимого.
autobuffer – тип boolean, определяет будет ли файл предварительно занесен в буфер
autoplay – тип boolean, определяет нужно ли проигрывать файл как только это станет возможным.
loop – тип boolean, определяет нужно ли повторно проигрывать файл.
controls – тип boolean, если установлен, указывает браузеру, что нужно показывать панель для управления аудио по-умолчанию.
Заметьте, что те же самые атрибуты используются для управления видео.
Давайте возьмем несколько атрибутов и создадим простой пример, который будет проигрывать аудио-файл:
<audio src="html5.ogg" controls autobuffer></audio>
(Этот пример будет работать в Firefox 3.5 и Chrome 3, а также в Safari 4, если вы поменяете расширение ogg на mp3).
К сожалению, приходится констатировать, что различные браузеры поддерживают разные типы кодеков:
FireFox 3.5 - Ogg Vorbis, WAV
Safari 4 - WAV, MP3
Chrome 3 (beta) - Ogg Vorbis, MP3
Opera 10 (beta) - WAV
Теперь давайте объявим наши собственные пользовательские контролы, которые мы сможем использовать:
play() – играть аудио.
pause() – приостановить аудио.
canPlayType() – проверяет или браузер сможет проиграть подаваемый mime type.
buffered – атрибут, который определяет начало и конец части файла из буфера.
Обратите внимание, что Opera 10 не поддерживает тег <audio>, зато поддерживает Audio(), а точнее только атрибут play().
Safari 4, Firefox 3.5 и Chrome 3 beta поддерживают тег <audio> и объект Audio(). Internet Explorer 8 вообще не поддерживает аудио.
Использование Source
Первое что нужно сделать перед тем как все браузеры начнут поддерживать тег <audio> (или хотя бы элементы медиа) это использование элемента <source>. Это говорит браузеру попытаться загрузить первый источник аудио и, если попытка не удастся или формат не поддерживается, то перейти к следующему в списке источнику аудио. В самом конце мы можем загрузить flash-версию, если ни одна версия <audio> не будет поддерживаться:
<audio controls autobuffer>
<source src="elvis.ogg" />
<source src="elvis.mp3" />
<!-- now include flash fall back -->
</audio>
Тем не менее, в следствии одного бага, вы должны быть осторожны с порядком в котором подаете разные источники для элементов <source>. Если вы попытаетесь подать mp3 как источник проигрывания для Firefox (который не поддерживается), он просто перестанет обрабатывать его и пропустит элемент <audio>. Важно помнить чтобы Ogg Vorbis шел первым в списке, а затем уже другие форматы.
Проблема, которая возникает при использовании Opera может решаться только с помощью JavaScript кода, который мы рассмотрим далее.
Кросс-Браузерная реализация
Вы можете проверять поддержку тега audio используя JavaScript следующим образом:
var audioTagSupport = !!(document.createElement('audio').canPlayType);
// возвращает boolean
Проверка объекта audio выглядит таким образом:
try {
// параметр 'src' обязателен для Opera 10, используем пустую строку"",
// в противном случае получим исключение
myAudioObj = new Audio("");
audioObjSupport = !!(myAudioObj.canPlayType);
basicAudioSupport = !!(!audioObjSupport ? myAudioObj.play : false);
} catch (e) {
audioObjSupport = false;
basicAudioSupport = false;
}
Код для проверки совместимости с типами файлов выглядит таким образом:
// canPlayType должно проверяться в первую очередь,
// иначе получим исключение для тех браузеров, у которых нет поддержки
if (myAudio.canPlayType) {
// Сейчас canPlayType(type) возвращает: "no", "maybe" или "probably"
canPlayOgg = ("no" != myAudio.canPlayType("audio/ogg")) &&
("" != myAudio.canPlayType("audio/ogg"));
canPlayMp3 = ("no" != myAudio.canPlayType("audio/mpeg")) &&
("" != myAudio.canPlayType("audio/mpeg"));
}
Заметьте, что для изменение src у объекта/элемента audio, вам нужно пересоздать этот элемент или объект с новым значением src.
Следовательно, для разработки решения, которое позволило бы по полной использовать элемент audio в HTML 5 нужно следующее:
1.Проверить, есть ли поддержка HTML 5 audio и, если нет, показывать Flash-версию.
2.Проверить уровень поддержки HTML 5 audio и адаптировать код под каждый отдельный браузер.
3.Проверить какие типы файлов поддерживаются и связать с соответствующими форматами файлов.
Дорога в будущее
Хорошие новости состоят в том, что HTML 5 audio является частью стандарта, если тенденции будут продолжаться и пользователи обновятся до последних версий Safari и Firefox, поддержка браузеров вырастет выше отметки 25% в недалеком будущем. А это уже значительная часть рынка браузеров, где больше не будет необходимости обращаться к технологиям Adobe Flash, Microsoft Silverlight или любому другому плагину для поддержки аудио.
Добавьте к этому возможности мобильного и других устройств как iPod от Apple (Safari), Wii от Nintendo (Opera) и Google Android (Chrome), которые уже приняли решение поддерживать HTML 5 audio и вы представите себе картину того, какой важной может стать поддержка встроенного аудио.