Аудио встроенное в браузере

Метки: html 5, audio

Native Audio in the browser Native Audio in the browser

Еще совсем недавно возможно встраивать разные типы аудио в браузер можно было только с помощью 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, если установлен, указывает браузеру, что нужно показывать панель для управления аудио по-умолчанию.
Заметьте, что те же самые атрибуты используются для управления видео.
Давайте возьмем несколько атрибутов и создадим простой пример, который будет проигрывать аудио-файл:
Убрать подсветку кода
1
<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> не будет поддерживаться:
Убрать подсветку кода
1
2
3
4
5
<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 следующим образом:
Убрать подсветку кода
1
2
var audioTagSupport = !!(document.createElement('audio').canPlayType);
// возвращает boolean

Проверка объекта audio выглядит таким образом:
Убрать подсветку кода
1
2
3
4
5
6
7
8
9
10
try {
    // параметр 'src' обязателен для Opera 10, используем пустую строку"",
    // в противном случае получим исключение
    myAudioObj = new Audio(""); 
    audioObjSupport = !!(myAudioObj.canPlayType);
    basicAudioSupport = !!(!audioObjSupport ? myAudioObj.play : false);
} catch (e) {
    audioObjSupport = false;
    basicAudioSupport = false;
}

Код для проверки совместимости с типами файлов выглядит таким образом:
Убрать подсветку кода
1
2
3
4
5
6
7
8
9
10
// 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 и вы представите себе картину того, какой важной может стать поддержка встроенного аудио.

Оригинал: Native Audio in the browser

Рейтинг: 12345   << Вы можете поставить оценку этой статье


Подобные статьи:
   Тег address
   Элемент time и микроформаты


Обсуждение статьи:

 
ali [2009-12-22]
Наконец то флеш умрет, надоели его тормоза


axel [2010-03-14]
А внешний вид кнопок проигрывателя менять можно интересно, через CSS или еще че нибудь


Gairon [2010-06-03]
Этот тег позволяет вопроизводить потоковое аудио (интернет-радио)?


kristofer [2010-06-08]
хотелось бы просто скриптом js запускать
чтоб на странице была только кнопочка "Play"
подскажите


Den [2012-08-26]
Авто, выпей яду. Что такое myAudio?


elm [2012-10-31]
Den съешь какашку
myAudio = new Audio("")


Ramil [2014-04-21]
Наверное имелось ввиду "basicAudioSupport = !!(audioObjSupport ? myAudioObj.play : false);" вместо "basicAudioSupport = !!(!audioObjSupport ? myAudioObj.play : false);"


Fastyhox [2015-07-27]
Нифига себе сюрпризы

---

http://igrynaandroidbesplatno69.weebly.com/blo g/skachat-rabota-dlia-studentov - http://igrynaandroidbesplatno69.weebly.com/blog/sk achat-rabota-dlia-studentov Скачать Работа Для Студентов .


asnixztppru [2016-04-07]
<a href=http://buybuspar.racing/>buy buspar</a>


generisk piller [2016-08-31]
piller utan recept
köpa piller
http://generiskutanresept.top/allegra/


piller rabatt [2016-09-02]
alternativ piller
piller på nätet
http://generiskutanresept.top/viramune/


ZhenyaKa [2017-02-11]
Приветствую! Смотрела у вас тут этот фильм новинку (На пятьдесят оттенков темнее) Вот: <a href=http://kinopoisky.ru/29605-na-pyatdesyat-otte nkov-temnee.html>perevodik.net/kino/На пятьдесят оттенков темнее</a>
Понравился очень, необычное кино. Особенно как они там все такое делали) прикольно) Хи хи))
Кто еще Смотрел этот фильм?


KristinaKa [2017-02-16]
Всем Привет! Смотрела у вас тут этот фильм (На пятьдесят оттенков темнее -полную версию) Вот: <a href=http://kinopoisky.ru/29605-na-pyatdesyat-otte nkov-temnee.html>perevodik.net/kino/На пятьдесят оттенков темнее</a>
Понравился очень, необычное кино. прикольно) Хи хи))
Кто еще Смотрел этот фильм?


Annalect [2017-02-26]
Мозги устaли, они хотят отдыхaть. Не завтpа и не потoм – прямо сeйчас. Выбeри свoю флеш-игрушку, котoрая рaзгрузит твoй мозг в любoе время дня и ночи. Никаких cложностeй – пoнятно всем от 5+ до 100+. Стань удaчливым, будь побeдителем, дай в морду боксёpу или покатайся нa танчиках, провeди кролика по лабиpинту и найди моpкoвку. Ты cупeр-пупер зaнят и тебе нeкогда? Bраньё, минуткa-то всегда найдётcя.

<a href=http://all-flesh.ru/>игры флеш</a>


Milalect [2017-03-08]
Мозги устали, они хотят oтдыхaть. Не зaвтрa и нe потом – прямо сейчас. Выбepи свою флеш-игрушку, которая рaзгрузит твoй мозг в любoe время дня и ночи. Hикаких сложностeй – пoнятнo всем от 5+ до 100+. Стaнь удачливым, будь пoбедителeм, дай в моpду боксёpу или покатайся на тaнчикaх, провeди кролика по лабиринту и найди мoрковку. Ты супер-пупеp зaнят и тебе нeкогдa? Вpаньё, минутка-то всегда найдётся.

<a href=http://all-flesh.ru/>flash игры бесплатно</a>


 

Оставить комментарий:

Имя


E-mail


Сообщение