Audio html5: — элемент добавления аудио на страницу — HTML

HTML5 | Аудио и видео

Веб-программирование — HTML5 — Аудио и видео

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

Важность этого сдвига трудно переоценить. Проект, который в начале 2005 г. был на стадии «разве не было бы это замечательно», теперь реализовался в виде YouTube. Видеосюжеты продолжительностью в 3—4 минуты наводнили Интернет. И, как докладывает гигант сетевого оборудования и услуг Cisco, эта тенденция не замедляется, и, согласно оценкам этой компании, к 2014 г. ошеломляющие 90% всего интернет-трафика будет составлять видео.

Поразительно, это грандиозное изменение произошло несмотря на то, что HTML и браузеры не обладают встроенной поддержкой видео и даже аудио. Вместо этого они полагаются на подключаемые модули, такие как Flash, которые удовлетворяют надобности большинства пользователей в большинстве случаев. Но в этом HTML-видеопокрытии есть очевидные мертвые зоны, наподобие той, которую создал iPad компании Apple, не поддерживающий Flash.

Стандарт HTML5 пытается решить эти пробелы введением элементов <audio> и <video>, которых так не хватало в HTML все эти годы. Наконец, содержимое мультимедиа получило единообразную, стандартную поддержку, не требующую подключаемых модулей. Но не все в этой истории так гладко. Основные разработчики браузеров сцепились в битве аудио- и видеоформатов, которая намного грязнее, чем война форматов Blu-Ray и HD-DVD.

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

Основные сведения о воспроизведении видео в современных программах

Не прибегая к HTML5, видео в веб-страницу можно добавить двумя способами. Самый простой состоит в использовании элемента <embed>. Потом браузер создаст видеоокно под проигрыватель Windows Media Player, Apple QuickTime или какой-либо другой проигрыватель и разместит его на странице.

Основная проблема с этим подходом заключается в том, что он полностью отдает разработчика на милость поддержки браузера. Разработчик не властен управлять воспроизведением, может не иметь возможности буферизировать видео, чтобы предотвратить задержки с воспроизведением, а также не знает, сможет ли данный видеофайл воспроизводиться в разных браузерах или операционных системах.

Второй подход заключается в использовании подключаемого модуля браузера, наподобие сравнительно недавнего новичка в этой области Silverlight корпорации Microsoft или старожила Flash от компании Adobe.

До недавнего времени использование модуля Flash полностью решало задачу поддержки видеосодержимого браузерами. Ведь видеоформат Flash работает всюду, где установлен модуль Flash, что в настоящее время составляет свыше 96% подключенных к Интернету компьютеров. Технология Flash также предоставляет почти неограниченный контроль над воспроизведением видео. Разработчик может, например, использовать готовый видеоплеер Flash сторонней фирмы или создать собственный и индивидуально оформить каждую кнопку управления.

Но подход с использованием Flash также не идеальный. Чтобы вставить видео Flash в веб-страницу, в нее нужно вставить определенный объем безобразной разметки, содержащей элементы <object> и <embed>. Кроме этого, видеофайлы для показа нужно закодировать в требуемый формат, а также может потребоваться приобрести дорогостоящий инструментарий Flash-разработки и научиться пользоваться им, что может потребовать серьезных усилий. Но хуже всего, это новая волна мобильных устройств компании Apple — iPhone и iPad. Эти устройства органически не воспринимают Flash и выводят пустую рамку в том месте страницы, где вставлено это видео.

Модули расширения также имеют свойство временами сбоить. Причина кроется в принципе их работы. Например, при посещении страницы, на которой используется видео Flash, браузер позволяет модулю Flash взять под контроль прямоугольную область где-нибудь на странице. В большинстве случаев этот подход работает нормально, но незначительные ошибки или нестандартные системные настройки могут вызвать неожиданные помехи и сбои, такие как, например, искаженное видео или потребление веб-страницей огромных объемов памяти, в результате чего картинка начинает ползти, как улитка.

Тем не менее, если вы сегодня просматриваете видео в Интернете (но не с помощью iPhone или iPad), то, скорее всего, это видео обернуто в мини-приложение Flash. Если вы не уверены, щелкните на видеоплеере правой кнопкой мыши. Если откроется меню с командой наподобие «О программе Adobe Flash Player», тогда вы наверняка имеете дело с вездесущим модулем Flash.

В 2010 г. сервис YouTube ввел в действие HTML-видеопроигрыватель на испытательной основе. Попробовать этот проигрыватель можно, посетив www.youtube.com/html5. Но во всех других случаях YouTube полагается исключительно на Flash.

Видео и аудио в HTML5

Поддержка видео и аудио HTML5 основана на простой идее. Точно так же, как с помощью элемента <img> в веб-страницу можно вставлять изображения, в нее должно быть возможным вставить звук посредством элемента

К сожалению, некоторые аспекты воспроизведения мультимедиа находятся вне досягаемости новых аудио- и видеовозможностей HTML5. Для следующего содержимого и/или способов его воспроизведения нужно опять обращаться к Flash (по крайней мере, на данный момент):

• Лицензированное содержимое. Видеофайлы HTML5 не используют никакой системы для защиты от копирования. По сути, народ может загружать HTML5-видео с такой же легкостью, как и изображения — просто щелкнув правой кнопкой мыши по видео и выбрав опцию Сохранить.

• Потоковое аудио или видео. В HTML5 нет способа для передачи аудио или видео от одного компьютера к другому в потоковом режиме. Поэтому, разработчикам чат-программ, в которых посетители веб-страницы используют микрофон и/или веб-камеру, придется продолжать работать с Flash. Разработчики HTML5 экспериментируют с элементом <device>, который может предоставить эту возможность, но в настоящее время решения с использованием только HTML5 нет ни для одного браузера.

• Адаптивное потоковое видео. Для продвинутых веб-сайтов с большими объемами видеосодержимого, наподобие YouTube, требуется многоуровневое управление буферизацией и пересылкой видеопотока. Им нужно предоставлять видео в разных разрешениях, видеособытий реального времени, а также настраивать качество видео под пропускную возможность интернет-подключения пользователя. До тех пор пока HTML5 не сможет предоставлять эти возможности, видеообменные сайты могут добавить поддержку HTML5 только как опцию, но полностью переходить на него с Flash не будут.

• Высококачественное аудио с низкой задержкой. Некоторые приложения требуют начинать воспроизведение аудио без задержки или проигрывать несколько аудиоклипов с идеальной синхронизацией. В качестве примеров таких приложений можно назвать виртуальный синтезатор, музыкальный визуализатор или игру реального времени с множеством накладывающихся звуковых эффектов. И в то время как разработчики браузеров усиленно работают над улучшением HTML5-аудиопроизводительности, оно еще не отвечает этим требованиям.

• Динамическое создание или редактирование аудио. А если вам нужно не только воспроизводить записанное аудио, но также анализировать аудиоинформацию, модифицировать или создавать аудио — и все это в режиме реального времени? Новые стандарты, такие как Audio Data API, разрабатываемые под спонсорством Firefox, состязаются в добавлении возможностей этого типа к HTML5-аудио, но в настоящее время они еще не доступны.

Воспроизведение аудио с помощью элемента <audio>

В следующем коде приведен простейший пример использования элемента <audio>:

<p>Зацените новую песню <cite>Avicii - Wake Me Up</cite></p>
<audio src="mysong. mp3" controls></audio>

Атрибут src содержит имя аудиофайла для воспроизведения, а атрибут controls указывает браузеру, что нужно отобразить базовые элементы управления воспроизведением. Своим внешним видом эти элементы управления слегка отличаются от браузера к браузеру, но все они имеют одинаковое назначение: разрешают пользователю начинать и останавливать воспроизведение, переходить в другое место записи и регулировать громкость:

Элементы <audio> и <video> должны иметь как открывающий, так и закрывающий тег. Использование синтаксиса пустых элементов (например, <audio/>) не допускается.

Кроме атрибута controls элемент <audio> поддерживает еще три атрибута: preload, auotoplay и loop. Атрибут preload указывает браузеру способ загрузки аудиофайла. Значение auto этого атрибута указывает браузеру загружать аудиофайл полностью, чтобы он был доступен, когда пользователь нажмет кнопку воспроизведения.

Атрибут preload может принимать еще два значения. Значение metadata указывает браузеру загрузить первую небольшую часть файла, достаточную, чтобы определить некоторые его основные характеристики (например, общий размер файла). Значение none указывает браузеру не загружать аудиофайл автоматически. Эти опции можно использовать для того, чтобы сэкономить пропускную способность подключения, например, если страница содержит большое число элементов <audio>, но ожидается, что пользователь будет проигрывать лишь некоторые из них:

<audio src="mysong.mp3" controls preload="metadata"></audio>

Когда атрибуту preload задано значение none или metadata, загрузка аудиофайла начинается после того, как пользователь нажмет кнопку воспроизведения. К счастью, браузеры могут без проблем проигрывать одну часть аудиофайла в то время, как грузится другая, если только интернет-подключение не слишком медленное.

Если значение атрибута preload не установлено, то браузеры действуют по своему индивидуальному усмотрению. Большинство браузеров предполагает auto в качестве значения по умолчанию, но в Firefox это metadata. Кроме этого, важно помнить, что атрибут preload не является обязательным для выполнения правилом, а рекомендацией браузеру желаемого действия, которую он может игнорировать зависимости от других обстоятельств. А некоторые устаревшие браузеры вообще не обращают внимания на атрибут preload.

Если вставить в разметку несколько элементов <audio>, то браузер создаст отдельную полосу элементов управления воспроизведением для каждого из них. Посетитель веб-страницы может прослушивать аудио на одном из них или на всех сразу.

Атрибут autoplay указывает браузеру начать воспроизведение сразу же после завершения загрузки страницы:

<audio src="mysong.mp3" autoplay controls></audio>

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

Элемент <audio> можно использовать для того, чтобы проигрывать фоновую музыку или обеспечить звуковые эффекты в игре с браузерным интерфейсом. Для этого из него нужно убрать атрибут controls и вставить атрибут autoplay (или же осуществлять воспроизведения посредством кода JavaScript). Но будьте осторожны в применении этого подхода и не забывайте, что для такой страницы все равно требуется какой-либо способ для прекращения воспроизведения.

Наконец, атрибут loop указывает браузеру повторять воспроизведение:

<audio src="mysong.mp3" controls loop></audio>

Воспроизведение в большинстве браузеров достаточно плавное, что позволяет создать с помощью этого метода непрерывную повторяющуюся звуковую дорожку. Секрет состоит в том, чтобы использовать повторяемое аудио, с одинаковым началом и окончанием.

Воспроизведения видео с помощью элемента <video>

С элементом <audio> хорошо идет в паре элемент <video>. Он применяет такие же атрибуты src, controls, autoplay и loop. Пример использования этого элемента показан в следующем коде:

<p>Зацените новый клип <cite>Avicii - Wake Me Up</cite></p>
<video src="video.mp4" controls></video>

Как и в случае с элементом <audio>, атрибут controls указывает браузеру создать набор элементов управления воспроизведением. В большинстве браузеров эти элементы скрываются при щелчке где-нибудь в области страницы и отображаются опять при наведении курсора мыши на область видеоплеера:

Кроме общих с элементом <audio> атрибутов, элемент <video> имеет три своих собственных атрибута: height, width и poster.

Атрибуты height и width устанавливают высоту и ширину окна воспроизведения в пикселах, соответственно. Следующий код показывает пример создания область воспроизведения размером 600×400 пикселов:

<p>Зацените новый клип <cite>Avicii - Wake Me Up</cite></p>
<video src="video. mp4" controls></video>

Размеры окна воспроизведения должны совпадать с размером видео, но лучше явно указать их, чтобы оформление страницы не искажалось до того, как видеофайл загрузится (или если видеофайл вовсе не загружается).

Наконец, атрибут poster позволяет указать изображение, которое можно использоваться вместо видео:

<p>Зацените новый клип <cite>Avicii - Wake Me Up</cite></p>
<video src="video.mp4" controls poster="poster.jpg"></video>

Браузеры показывают это изображение в трех ситуациях: когда первый кадр видео еще не загрузился, атрибуту preload присвоено значение none или указанный видеофайл отсутствует.

Хотя на данном этапе мы рассмотрели всё, относящееся к аудио- и видеоразметке, эти возможности можно значительно расширить с помощью кода JavaScript. Но прежде чем мы углубимся в изучение элементов <audio> и <video>, нам нужно разобраться с проблемами поддержки аудио- и видеокодеков.

Как использовать элемент audio в HTML5

В этой статье мы рассмотрим как вставлять аудио элементы на страницу.

HTML5 заполняет заполняет интернет всё больше и больше. HTML5 сделан для того, чтобы сделать легче жизнь для нас, разработчиков, благодаря своим аудио элементам. Этот элемент позволяет встраивать аудио файлов на веб-страницы, а также управлять воспроизведением звука с помощью JavaScript. Более того, это не требует никаких плагинов для работы, и поддерживается почти всеми современными веб-браузерами.

Посмотреть пример

Тег <audio> HTML5 для вставки аудиофайлов

Для того чтобы вставить аудизапись на страницу необходимо в html написать следующее:

1
2
3

<audio>
  <source src="music.mp3">
</audio>

Где src=»music.mp3″ — это путь к файлу с музыкой.

Кроссбраузерная совместимость

Тег <audio> поддерживается в большинстве современных браузерах, но некоторые браузеры поддерживают не все форматы аудиофайлов. Например, некоторые браузеры поддерживают формат «.mp3», но не поддерживают формат «.ogg». Решением этой проблемы является использование и одного формата, и другого на странице:

1
2
3
4

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

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

Если вы хотите чтобы звук воспроизводился автоматически после загрузки страницы, то необходимо использовать атрибут autoplay:

1
2
3
4

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

Управление плеером

Пользователя может раздражать то, что звук воспроизводится автоматически и его нельзя остановить. И, возможно, пользователь уйдет с этой страницы. Чтобы этого избежать необходимо использовать кнопки управления плеером. Чтобы они появились достаточно прописать атрибут controls:

1
2
3
4

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

Тип файла

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

1
2
3
4

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

Заглушка для старых браузеров

Если браузер достаточно стар, то желательно выводить сообщение что данный браузер не поддерживает эту функцию:

1
2
3
4
5

<audio controls>
  <source src="music.mp3" type="audio/mp3">
  <source src="music.ogg" type="audio/ogg">
  Извините, но ваш браузер не поддерживает аудио элементы.
</audio>

Буфер файла

Если файл достаточно большой, то правильно будет использовать буфер, чтобы он загрузился для дальнейшего воспроизведения. Для этого необходимо использовать атрибут со значением preload=»auto»:

1
2
3
4

<audio controls>
  <source src="music. mp3" type="audio/mp3" preload="auto">
  <source src="music.ogg" type="audio/ogg" preload="auto">
</audio>

<audio> тег имеет множество атрибутов, которые могут быть использованы для дополнительного контроля, включая атрибуты для событий в HTML5. События включают вспывающие окна, запускаемые для элемента, событие для форм, вызванные действиями, которые происходят в HTML форме, события клавиатуры и мыши, и другие.

В HTML5 существует много элементов, которые облегчат жизнь веб-разработчику и их необходимо использовать для того чтобы не отставать в развитии интернет-технологий, да и сократить время на разработку.

Успехов!

Аудио и видео в формате HTML5

❮ Пред. Следующий ❯

Раньше собственные веб-технологии, такие как HTML, не позволяли встраивать видео и аудио в Интернет. Технологии на основе плагинов стали популярными для обработки такого контента, но у них было много проблем, в том числе плохая работа с функциями HTML/CSS, проблемы с безопасностью и доступностью. Позже спецификация HTML5 представила такие возможности с элементами

Элемент

Элемент

Как добавить аудио на веб-страницу

До появления HTML5 аудиофайлы добавлялись на страницу путем интеграции фонового звука с помощью тега . Файл воспроизводился во время просмотра страницы, и пользователь не мог отключить звук. В HTML5 мы можем встраивать аудиофайлы с помощью тега

В коде атрибут src ссылается на URL-адрес аудиофайла, а атрибут control добавляет панель управления (кнопка запуска, полоса прокрутки, регулятор громкости).

Поскольку не все браузеры поддерживают все аудиоформаты, аудиофайл кодируется/декодируется с помощью аудиокодека (цифрового электронного устройства или компьютерного программного приложения). который помогает в сжатии и распаковке цифровых аудиоданных). Все форматы аудиофайлов добавляются одновременно через элемент с атрибутом src.

При определении различных форматов файлов мы рекомендуем определить MIME-тип для каждого файла, чтобы позволить браузеру локализовать поддерживаемый файл. Тип MIME определяется с помощью атрибута типа.

Пример добавления различных форматов аудиофайлов:

 

 <голова>
   
 
 <тело>
   <управление звуком>
     
     
   
   
Нажмите кнопку воспроизведения
 
 

Попробуй сам »

Самые популярные аудио форматы:

MP3 – самый популярный аудио формат, который использует сжатие с потерями и позволяет уменьшить размер файла. Несмотря на популярность среди пользователей, телекомпании и радиостанции используют более современные кодеки ISO-MPEG, вроде AAC или MPEG-H.

AAC (Advanced Audio Codec) — закрытый кодек, аналог MP3, но по сравнению с последним обеспечивает более высокое качество при той же или большей степени сжатия.

Ogg Vorbis — свободный формат с открытым кодом, поддерживается в Firefox, Opera и Chrome. Обеспечивает хорошее качество звука, но недостаточно поддерживается проигрывателями устройств.

В предыдущей версии HTML видео были встроены в сайт с помощью сторонних плагинов, таких как QuickTime, RealPlayer или Flash. В HTML5 появился новый тег

В коде это выглядит так: