Тег для добавления аудио в html. HTML5-теги audio и video в различных браузерах на практике

andew

2015-08-10T19:23:37+00:00

2016-02-28T17:11:05+00:00

11937

В статье описаны строение audio и video контейнера HTML5, теги video, audio, source, track и их атрибуты с возможными значениями. Приведены HTML шаблоны и примеры реализации воспроизведения мультимедийных файлов на основе встроенных в браузер возможностей. Показано подключение к видео текстовой дорожки субтитров, заголовков, оглавления при помощи файлов формата WEBVTT с примерами. Представлены HTML5 шаблоны кода с микроразметкой по schema.org для аудио и видео. Указаны основные для web форматы аудио и видео файлов с их MIME типами и инструменты для конвертации видео и аудио в эти форматы.

В HTML5 присутствуют новые возможности, позволяющие выполнять проигрывание аудио и видео файлов напрямую браузером без использования сторонних программ. Пока, несмотря на то, что HTML5 уже не новость, имеются еще разногласие в том, как браузеры обрабатывают теги video и audio и как отображают сам плеер. Одни это делают все лучше с каждой новой версией, другие пока еще отстают. Глобально же, тенденция идет к тому, что браузеры будут предоставлять все больше функционала для проигрывания мультимедиа файлов.

Скринкаст: Пример использования шаблонов

Скачать видео

Скринкаст : примеры использования шаблонов из статьи - сайт

HTML5 видео и аудио развивающийся стандарт и он не связан ни с одним форматом аудио или видео, поэтому между браузерами существуют различия в поддерживаемых ими форматами аудио и видео файлов. Это различие сейчас компенсируют тем, что кодируют оригинальный файл несколькими разными кодеками и подключают все эти версии файлов к тегам или через вложенные теги < source src=" URL"> . Однако среди поддерживаемых браузерами форматов аудио и видео файлов намечаются лидеры. Для видео это, конечно же, формат mp4 (H.264 ), и для аудио это формат mp3 и m4a . Сейчас уже, наверное, все браузеры способны проигрывать файлы этих форматов. Так же, браузеры Firefox , Chrome и Opera договорились поддерживать стандарт WEBM в качестве общего видео формата. С моей точки зрения, оптимальным на сейчас вариантом использования HTML5 видео и аудио будет схема основанная на использовании одного мультимедийного файла в формате mp4 (H.264 ) для видео и m4a для аудио и JS HTML5 плеера. К аудио или видео контейнеру подключается только один файл в указанном формате. Сейчас большинство браузеров способны воспроизводить mp4 формат. Подключенная же JS библиотека выполнит стилизацию встроенного в браузер плеера. Если браузер не будет поддерживать формат mp4 /m4a , то JS плеер, в таком случае, реализует подключение Flash плеера для воспроизведения мультимедийного файла. Учитывая, что mp4 формат стал сильно популярен, можно надеяться на низкую вероятность проблем с его воспроизведением в браузерах. Такая схема требует наличие всего одного мультимедийного файла в указанном формате, что экономит место на диске и ресурсы для обработки файлов. Также, такая схема будет стратегически более правильной, так как тенденция идет к тому, что браузеры все больше и лучше выполняют реализацию HTML5 видео и аудио.

Для указания HTML5 плееру проигрываемого файла нужно, помимо URL файла, передать и MIME тип файла, что бы браузер понимал какой кодек ему нужно использовать. Ниже в таблице привожу наиболее распространенные форматы файлов и их MIME типы.

Форматы файлов и их MIME типы Файлы мультимедиа Расширения Mime тип

Аудио mp3	mp3	audio/mpeg
Аудио mp4	m4a	audio/mp4
Аудио webm	webm	audio/webm
Аудио ogg	ogg	audio/ogg
Видео mp4 (H.264)	mp4	video/mp4
Видео webm	webm	video/webm
Видео ogg	ogv	video/ogg

Инструменты кодирования аудио и видео файлов

Для кодирования видео и аудио файлов в приведенные выше web форматы можно воспользоваться открытой программой , которая поддерживает конвертацию аудио и видео файлов в основные распространенные для веба форматы (MP4 , WebM , Ogg Theora , MP3 и т.п. ). Miro Video Converter доступен для разных операционных систем - Windows , Mac и Linux и является графической оболочкой для консольных утилит и , которые удобно использовать на web сервере для обработки загружаемого видео и аудио в автоматическом режиме.

: HTML5 код примера audio с микроразметкой schema.org: Заголовок аудио

HTML5 audio не поддерживается вашим браузером.

Скачать audio

Так будут выглядеть извлеченные из кода данные микроразметки для описанного выше шаблона аудио.

Audioobject itemType = http://schema.org/AudioObject name = Заголовок аудио description = Описание аудио... isfamilyfriendly = true encodingformat = mp3 duration = PT04M59S uploaddate = 2015-12-31 image = Full URL to image.jpg alternatename = Альтернативный заголовок аудио contenturl href = URL to file.mp3 text = Скачать audio author person itemType = http://schema.org/Person url href = URL text = Имя автора name = Имя автора image = Full url to person.jpg

Минимальная разметка аудио по schema.org должна включать itemprop ="name" , itemprop ="description" , itemprop ="contentUrl" . Остальные свойства не являются обязательными.

Пример стандартного использование HTML5 тега :

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

HTML5 код примера video с микроразметкой schema.org: Заголовок видео

Смотреть на YouTube

HTML5 video не поддерживается вашим браузером.

Скачать видео: Заголовок видео

Так будут выглядеть извлеченные из кода данные микроразметки для описанного выше шаблона видео.

Videoobject itemType = http://schema.org/VideoObject name = Заголовок видео thumbnail imageobject itemType = http://schema.org/ImageObject contenturl = URL to video-thumbnail.jpg|png width = 100 height = 100 duration = PT14M59S isfamilyfriendly = true uploaddate = 2015-12-31 description = Краткое описание для видео... url href = URL to file.mp4 text = Заголовок видео author person itemType = http://schema.org/Person url href = URL to author web page text = author name name = author name image = Full URL to author.jpg thumbnailurl = URL to file.jpg|png

Минимально необходимая для поисковиков разметка видео по schema.org должна включать все приведенные в коде примера свойства itemprop за исключением блока itemprop ="author" , который является не обязательным для поисковиков и его можно удалить, если нет данных для его заполнения. Для video-thumbnail яндекс требует указывать микроразметку по schema.org как itemprop ="thumbnail" в виде ImageObject , а Google требует указывать как itemprop ="thumbnailUrl" , поэтому приходиться вставлять video-thumbnail файл два раза, и поэтому второй тег img получил стиль display: none , что бы не отображаться в браузере. Можно вместо использования img тега с display:none передать это свойство тегом link через атрибут href . Также, несмотря на то, что микроразметку можно передавать через не показываемые пользователю теги meta и link , рекомендуется все же, по возможности, добавлять микроразметку преимущественно в теги, которые будут выводиться пользователю. Валидацию микроразметки schema.org можно сделать по этим ссылкам: , . Основное преимущество от использования микроразметки заключается в удобстве такого контента для поисковых роботов и роботов социальных сетей. Эти роботы извлекают размеченные данные и агрегирую их. Поэтому использование микроразметки улучшает SEO сайта и способствует автоматическому распространению данных в социальных сетях. Детальное описание микроразметки Schema.org для видео размеченных схемой VideoObjec t на сайте . Так же, стоит заметить, что для случаев, когда вы делаете вставку на свой сайт видео не напрямую, а с помощью виджетов видео хостинга Яндекс.Видео или YouTube , то вы можете под блоком кода виджета добавить свой блок кода HTML с описанием видео и в него встроить микроразметку Schema.org для этого видео. При этом, в качестве параметра URL - ссылки на видеоролик, указать не прямую ссылку на статический файл, а задать ссылку полученную от видео хостинга. Хотя в спецификации Schema.org и написано, что ссылка должна быть именно на прямой файл, но поисковики обрабатывают и ссылки на видео от видео хостинга (см. в примерах на сайте Яндекса в разделе Вебмастер ), несмотря на то, что по такой ссылке нельзя скачать файл и нельзя просмотреть его напрямую в своем HTML5 медиа плеере на странице, только в виджете видео хостинга.

Если перед вами стоит вопрос с какого хостинга загружать мультимедийные файлы аудио и видео, то посмотрите статью , в которой описан вариант вставки медиа файлов на WEB страницу с Яндекс Диска.

Атрибуты и тегов:

Атрибуты src , preload , autoplay , mediagroup , loop , muted , controls являются общими атрибутами для всех медийных элементов, в том числе и для тегов и .

атрибут autoplay: или или

• атрибут autoplay задается его присутствием в теге или и для этого атрибута не нужно задавать значение, достаточно просто его присутствия. Для редакторов HTML, которые правят код элементов, можно задать этот атрибут как autoplay ="autoplay ", что равносильно просто присутствию атрибута. Наличие атрибута autoplay дает команду браузеру начать воспроизведение файла сразу после загрузки web страницы. Соответственно, атрибут autoplay отменяет значения атрибута preload , который управляет загрузкой видео в плеер, потому что видео должно сразу начать воспроизводиться, а значит и должно быть загружено. По умолчанию атрибут autoplay отсутствует.

атрибут controls: или или

• атрибут controls дает команду браузеру показывать панель управления плеером, когда страница загрузилась, но воспроизведение записи на начато. Этот атрибут также как и атрибут autoplay задается только присутствием в теге или , и не требует значения, достаточно только его присутствия. По умолчанию этот атрибут отсутствует, т.е. плеер не показывает панель управления до начала воспроизведения. Когда же проигрывание файла будет запущено, то панель управления будет появляться при наведении указателя мыши на область плеера.

атрибут loop: или или

• атрибут loop заставляет плеер воспроизводить файл по кругу. Атрибут задается только его присутствием в теге или и не имеет параметров. По умолчанию атрибут loop отсутствует.

атрибут preload:

• атрибут preload определяет загрузку файла вместе с загрузкой web страницы и принимает одно из следующих трех значений:
  • none - не выполнять загрузку файла вместе с загрузкой web страницы. Это значит, что файл начнет загружаться в плеере только после нажатия кнопки воспроизведения. Это может быть удобным для ускорения загрузки страницы. Значение none является значением по умолчанию для атрибута preload , поэтому для него можно вообще не вставлять атрибут preload в тег или для этого случая.
  • metadata - не выполнять загрузку файла вместе с загрузкой web страницы, но выполнять загрузку метаданных мультимедийного файла.
  • auto - выполнять полную загрузку файла вместе с загрузкой web страницы. В этом варианте браузеры будут автоматически подгружать медийный файл вместе с web страницей, но это не будет мешать загрузке самой страницы и ее отрисовки в браузере. Если в теге или задан атрибут preload ="" с пустым значением, то будет использовано значение auto для него.
  • Значение атрибута preload будет отменено, если использован атрибут autoplay .

атрибут src:

• атрибут src тега или позволяет сразу в теге задать путь к мультимедийному файлу. Путь может быть, как полным с указанием протокола и домена, так и относительно корня текущего сайта. Также путь к файлу можно задать и во вложенных в аудио или видео контейнер тегах < source src=" URL"> .

Атрибут poster тега video:

• атрибут poster используется только в теге и задает URL изображения (gif, png, jpeg и т.п.), которое будет показано пока видео не доступно. Если атрибут poster не задан, то плеер браузера будет пытаться показать первый кадр видео.

Атрибуты width и height тега video:

• атрибуты width и height применяются только к тегу и задают, соответственно, ширину и высоту области воспроизведения видеоплеера. В качестве значения ожидают положительное целое число, указанное в пикселях или процентах. Задание этих атрибутов влияет на размер отображения видео, но не изменяет пропорции видео. Видео подстроиться под указанные размеры с сохранением его пропорций. Если указанные размеры не совпадают с пропорциями видео, то по верхним или/и по боковым краям видео будут темные полосы. Поэтому при задании этих параметров желательно подбирать их соотношение такое же, как у воспроизводимого видео, или задавать только width , а по высоте плеер подстроиться сам.
• Если какой-либо из этих параметров или оба не будут заданы, то тогда не заданный(е) параметр(ы) будут браться от соответствующего размера картинки, указанной в атрибуте poster .
• Если же атрибут poster будет отсутствовать, то эти параметры будут устанавливаться как: для width = 300 px и для height = 150px. Что бы не высчитывать и не согласовывать размеры области видео под пропорции самого клипа, я бы рекомендовал задавать только одни параметр width , тогда высота (height ) области воспроизведения будет выбрана автоматически исходя из пропорций видео.
• Также, на размеры и оформление HTML5 плеера можно влиять через свойства CSS применяемые к тегам или .

Атрибут muted: или или

• атрибут muted устанавливает своим наличием в тегах или звук в выключенное состояние в HTML5 плеере. По умолчанию атрибут отсутствует.

Атрибут crossorigin:

• атрибут crossorigin указывает браузеру на необходимость выполнение CORS запроса для данного элемента. По умолчанию атрибут отсутствует, что значит не использовать CORS запросы вообще. При наличии атрибута возможны следующие значения: anonymous и use-credentials . CORS () - это технология современных браузеров, которая позволяет управлять разрешениями на загрузку ресурсов на текущей web странице с других доменов, отличных от домена текущей страницы. Поддержка браузерами стандарта CORS позволяет реализовать безопасный кроссдоменный обмен данными через выполнение специального запроса (заголовка) к домену текущей страницы на предмет того, разрешается ли загружать на этой странице ресурсы с другого указанного домена. Сервер на такой запрос должен указать домены, с которых разрешена загрузка ресурсов.

Атрибут mediagroup: div { margin: 1em auto; position: relative; width: 400px; height: 300px; } video { position; absolute; bottom: 0; right: 0; } video:first-child { width: 100%; height: 100%; } video:last-child { width: 30%; }

• атрибут mediagroup позволяет объединить управление несколькими медиафайлами в один MediaController через создание группы медиафайлов в разных местах страницы. Это группа будет управляться одновременно для всех входящих в нее файлов. Это удобно, например, если нужно проиграть и управлять одновременно одним и тем же роликом в разных местах страницы с разными субтитрами, или разными роликами.

Теги и требуют наличие закрывающего тега.

Для тех случаев, когда браузер не поддерживает HTML5 и теги, что сейчас большая редкость, пред закрывающим контейнер тегом пишут текстовое сообщение и обычно добавляют ссылку на скачивание файла. Если же встроенный в браузер HTML5 плеер будет дополнительно управляться JS библиотекой (JS плеером), то большинство из них выполняют подключение флэш плеера в случае невозможности воспроизведения в браузере HTML5 видео и аудио по причине не поддержки браузером тегов видео и аудио или формата мультимедийного файла.

Тег :

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

В большинстве случаев тег выглядит так:

и в нем присутствует всегда атрибут src и type , который в большинстве случаев имеет только MIME-тип.

Атрибуты тега :

• атрибут src= "URL" тега задает URL к мультимедийному файлу. Путь может быть как полным с указанием протокола и домена, так и относительно корня сайта.
• атрибут type ="MIME-тип" тега или более полно type="MIME-тип; codecs="кодек"" указывает MIME-тип файла и кодек. Для аудио достаточно указать MIME-тип, например, для.mp3 - type="audio/mpeg". Хотя по спецификации для видео в атрибуте type нужно указывать и кодек, но сейчас часто указывают только MIME-тип без кодека, предоставляя это на решение браузерам.
• атрибут media ="all|braille|handheld|print|screen|speech|projection|tty|tv" тега указывает тип устройства, для которого должен воспроизводиться файл. Значение по умолчанию all, поэтому этот атрибут в большинстве случаев не указывают вообще, если не хотят конкретно определить устройство для воспроизведения.

Тег :

Для HTML5 видео возможно также отображать в плеере дополнительную дорожку с информацией, такой как субтитры (subtitles), заголовки (captions), главы (chapters), описания (descriptions - не поддерживаются пока) и метаданные (metadata - не поддерживаются пока). Эта возможность реализуется путем добавления внутри тега тегов с соответствующими атрибутами.

- не имеет закрывающего тега.

Тег позволяет подключать к видео дополнительные файлы-дорожки специального формата WebVTT (Web Video Text Tracks Format ), в которых указаны выводимые текстовые сообщения с их временной привязкой к видео файлу. Стандарт WebVTT поддерживает не просто вывод текстовых сообщений, но и предоставляет варианты его CSS стилизации и опции по размещению в области просмотра видео. На настоящий момент WebVTT файлы в основном используются для подключения к видео текстовых субтитров, что поддерживается почти всеми браузерами. Другие возможности WebVTT стандарта пока не полностью реализуются самими браузерами, поэтому, для более полного использования WebVTT , лучше применять JS плееры. Также, файлы WebVTT могут нестандартно использоваться JS плеерами для передачи дополнительных данных в JS плеер, таких как, например, URL превью картинок для фреймов видео. К вопросу о том, как показать превью кадров видео на шкале перемотки плеера (Scrub Bar Thumbnails) как это сделано на видео хостингах. Тут нужно сказать, что такой функционал пока отсутствует во встроенных в браузеры плеерах и поэтому реализуется через JS плееры как дополнение. Для этого подключают JS библиотеку (js плеер), которая берет на себя управление HTML5 видео и аудио объектом и выполняет его стилизацию. Такие JS плееры для показа превью кадров видео нестандартно используют файлы WEBVTT из тега для передачи через него URL картинок превью.

Файл формата WebVTT является обычным текстовым файлом с расширением .vtt в котором, в виде построчного списка, прописаны временные метки с временем старта и временем окончания и текстовые сообщения для вывода к этим меткам. К контейнеру можно подключить несколько файлов WebVTT с текстом на разных языках. Для каждого языка нужно создавать отдельный файл и подключать каждый через тег . Теги необходимо вставлять внутрь контейнера после всех тегов , но перед сообщениями об ошибках HTML5 видео. Тег с файлом субтитров на языке по умолчанию нужно размешать первым среди тегов в текущем контейнере .

WEBVTT файл может содержать одну и более временных меток. Файл начинается со слова WEBVTT. Пустые строки отделяют между собой временные метки с принадлежащими к ним текстом и атрибутами. Текст может содержать элементы HTML и CSS разметки. Перед временной меткой может располагаться ID для нее, что бы при помощи специальных выражений обратиться к ней. Все эти детали описаны в стандарте WEBVTT. задает тип дорожки и может принимать значения:

• subtitles - субтитры в виде текста, который выводиться поверх видео. Для проигрываемого файла можно задать субтитры на разных языках для предоставления их выбора в плеере, если он его поддерживает. В большинстве случаев используется именно этот тип так он поддерживается большинством браузеров.
• captions - заголовки в виде текста и звука, которые выводятся поверх видео. Похожи на субтитры, но, помимо текста, могут включать звуковые эффекты и другую аудио информацию.
• chapters - главы, которые отображаются текстом в виде меню списка и предназначены для быстрой навигации по медиафайлу.
• descriptions - описание, это текстовые файлы с описанием видео для воспроизведения их в screenreader.
• metadata - метаданные для передачи js скриптам.

Атрибут src тега задает URL к файлу дорожки с дополнительной информацией. Подключаемый к тегу файл имеет формат WebVTT и расширение .vtt .

Атрибут srclang тега задает язык дорожки через код языка. Для русского языка будет равен "ru", для английского "en".

Атрибут label тега задает название дорожки, которое будет показано в плеере. Если атрибут не будет задан, то браузер покажет свое служебное название.

Атрибут default тега задает выбор данной дорожки по умолчанию при наличии других дорожек в контейнере video. Только один из нескольких тегов может иметь default атрибут. Лучше дорожку по умолчанию располагать первой среди других подключаемых дорожек.

Пример тегов :

До недавнего времени встроить звук в веб-страницу было не таким уж и лёгким заданием. В общем, существует , среди которых некоторые предлагают более грамотную и лучшую реализацию, но большинство способов ограничивают вас тем, что вам нужно иметь определенный браузер и определённые плагины.

С приходом на рынок технологии 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 версию вашего звукового файла (здесь вам на помощь приходит ), но только так можно организовать кросс-браузерную поддержку.

Ранние версии 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 – текущее положение в секундах. Вы также можете установить данный параметр на перемещение положения воспроизведения.

Используя предложенные выше параметры и методы, мы можем создать некоторые основные кнопки управления:

Play Music
Pause Music
Stop Music
Посмотреть демо: http://www.elated.com/res/File/articles/authoring/html/html5-audio/javascript-control.html

Поддержка ранних версий Internet Explorer

В большинстве случаев браузер пользователя будет поддерживать элемент HTML5. Но, к сожалению, браузеры IE версий 7 и даже 8 не поддерживают этот элемент (хотя в 9-м уже есть поддержка). Важно продумать версию отката для пользователей, которые остались в 2008 году.

Очень сырой, но эффективный метод заключается в том, чтобы применить специальные комментарии для выделения данных браузеров, и задать им объектный указатель до звукового файла. Таким образом, браузер зачастую будет отображать встроенный контроллер, позволяющий пользователям воспроизводить, останавливать или перематывать музыку в почти похожей на HTML5 audio манере. Вот пример:

Play Music
Pause Music
Stop Music

document.getElementById("playButton").onclick = function() { document.getElementById("myTuneObj").play() };
document.getElementById("pauseButton").onclick = function() { document.getElementById("myTuneObj").pause() };
document.getElementById("stopButton").onclick = function() { document.getElementById("myTuneObj").stop() };

Вышеприведенный пример будет работать во всех браузерах, которые поддерживают HTML5 Audio, и также будет работать в браузерах IE версий 7 и 8. С помощью комментариев, мы перенаправляем рычаги управления для кнопок напрямую к звуковому файлу.

Другой способ отката заключается во внедрении в страницу Flash-плеера. Вот , в которой говорится об откате в виде плеера на Flash.

Заключение

В нашей сегодняшней статье мы научились встраивать аудио-файлы посредством HTML5. Элемент audio не только прост в использовании, но мы также можем оформить его под собственные требования, а также управлять воспроизведением посредством javascript.

Хотите узнать больше об элементе audio в HTML5? Тогда ознакомьтесь со .

Хотя пока что поддержка страдает в некоторых браузерах (типа старых версий IE), можно без проблем делать откаты для них, если это понадобится, что в наши дни встречается всё реже и реже.

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

Используем для вставки звукового файлу на страницуНиже приведен простейший пример использования тега, он загружает mp3 файл и воспроизводит его. Обратите внимание на атрибут autopaly , который используется для автоматического воспроизведения звука. Тем не менее Вам не следует автоматически воспроизводить звуки а сайте, ведь это надоедает пользователям. Воспроизведение звука в циклеХотите зациклить звук? Атрибут loop поможет Вам это сделать. Но опять же, не стоит злоупотреблять автозапуском и воспроизведением в цикле, если не хотите, чтобы пользователь преждевременно покинул сайт. Отображение элементов управленияВместо того, чтобы играть звуки автоматически, что, безусловно, плохая практика, вы должны позволить отображать в браузере некоторые элементы управления, такие как громкость и кнопки воспроизведение (пауза). Это сделать легко, просто добавив атрибут controls . Различные форматы файловТег поддерживается большинством современных браузеров, но проблема в том, что разные браузеры поддерживают разные форматы файлов. Safari, например, может проигрывать MP3, а Firefox не может, и играет OGG-файлы вместо этого. Решение этой проблемы заключается в использовании обоих форматов, чтобы каждый посетитель мог услышать звук, независимо от того, какой браузер он использует. Указываем MIME-тип файловПри использовании различных форматов файлов, хорошей практикой есть указывание MIME-типа для каждого файла, чтобы помочь браузеру локализировать поддерживаемый им файл. Это легко можно сделать используя атрибут type . Для старых браузеровА что, если посетитель использует IE6 или какой-то другой доисторический браузер, который не поддерживает тег? Все легко: ниже приведён код, который будет отображать сообщение для браузеров, которые не поддерживают тег. Ваш браузер не пожжерживает тег audio! Буферизация файловПри воспроизведении файлов большого размера может использоваться буферизация файлов. Для этого вы можете использовать атрибут preload . Он может принимать 3 значения:

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

Управление воспроизведением через JavaScriptУправлять HTML5 аудио-проигрывателем через JavaScript очень легко. Следующий пример показывает, как с использованием JavaScript можно построить свои базовые элементы управления аудио-плеером: Воспроизведение Пауза Громкость + Громкость -

Вот и всё на сегодня.
Надеюсь, что эта статья помогла Вам понять базовые возможности HTML5 тега .

Одной из самых замечательных особенностей HTML5 является потоковое аудио.

Если вы заняты в сфере веб-разработки, то подборка из 10 невероятных аудиоплееров на HTML5 очень вам пригодится.

— аудио- и видеоплеер, который написан на чистом HTML5 и CSS . Поддержка старых браузеров выполнена с помощью Flash и Silverlight плееров, которые имитируют HTML5 MediaElement API .
У MediaElement есть много оформлений и поддержка популярных платформ: WordPress , Drupal, Joomla и т.д.

Этот плеер достаточно минималистичный, но функциональный. Хорошо подходит, когда нужны плейлисты и модные эффекты!

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

Вы используете Mootools на вашем сайте? Если да, то, возможно, вам понравится этот плеер, выполненный на HTML5 и Mootools JavaScript фреймворке. Плеер идеально работает во всех современных браузерах.

Этот плеер единственный из списка, который является платным. Он стоит всего $5 , но при этом идеально работает. У плеера есть много полезных функций, например, защита вашего аудио от перехвата с помощью наложения сигнала, что очень хорошо для коммерческого использования.

Источник: http://codecanyon.net/item/universal-html5-audio-player

В задействованы технологии HTML5 и Flash , что делает его очень легким (10 Кб ) надежным кроссбраузерным решением для воспроизведения потокового аудио.
Хотите узнать, что можно сделать с помощью Sound Manager 2 ? Посетите для просмотра демо!

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

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

Как добавить HTML5-аудио на веб-страницу 1. Элемент Поддержка браузерами

IE: 9.0
Firefox: 3.5 базовая поддержка, 15.0 — полная
Chrome: 3.0
Safari: 3.1
Opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.1
Chrome for Android: 44

HTML5-элемент используется для внедрения звукового контента в веб-страницы. В общем виде HTML-разметка имеет следующий вид:

Атрибут controls добавляет отображение браузерами интерфейса управления аудио плеера — кнопки воспроизведения, паузы, громкости.

Рис. 1. Внешний вид аудио плеера в разных браузерах

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

Скачать name.mp3

Таблица 1. Атрибуты тега Атрибут

autoplay	Автоматическое воспроизведение аудио файла сразу же после загрузки страницы.
controls	Указывает браузеру, что нужно отобразить базовые элементы управления воспроизведением (начинать и останавливать воспроизведение, переходить в другое место записи, регулировать громкость).
loop	Циклическое воспроизведение аудио файла.
muted	Выключает звук при воспроизведении аудио файла.
preload	Атрибут, отвечающий за предварительную загрузку аудио контента. Не является обязательным, некоторые браузеры игнорируют его. Возможные значения: auto — браузер загружает аудио файл полностью, чтобы он был доступен, когда пользователь начнет его воспроизведение. metadata — браузер загружает первую небольшую часть аудио файла, чтобы определить его основные характеристики. none — отсутствие автоматической загрузки аудио файла.
src	Содержит абсолютный или относительный URL-адрес аудио файла.

2. Аудио кодеки

Аудио кодек (декодер) представляет собой программу для преобразования цифровых данных в формат звукового файла или звукового потока. Популярными аудио форматами являются следующие:

MP3 — самый популярный аудио формат, использующий сжатие с потерями и позволяющий уменьшить размер файла в несколько раз. В силу лицензионных отчислений не поддерживается Firefox и Opera.

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

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

3. Альтернативные медиа-ресурсы

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

4. Добавление субтитров и заголовков

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

Таблица 3. Атрибуты тега Атрибут Описание, принимаемое значение

default	Указывает, что данная дорожка воспроизводится по умолчанию. Только один элемент может содержать данный атрибут.
kind	Указывает тип текстовой дорожки, по умолчанию выводятся субтитры (subtitles). Принимаемые значения: captions — перевод диалогов и звуковых эффектов, отображаемый в виде текста поверх видео (для глухих пользователей). chapters — добавляет названия глав в виде списка для навигации по медиафайлу. descriptions — добавляет звуковое описание происходящего в видео (для слепых пользователей). metadata — метаданные, используемые скриптами, не отображаются для пользователей. subtitles — текстовое дублирование звуковой дорожки видео, отображается в виде субтитров к видео.
label	Добавляет название дорожки. Если этот атрибут не задан, браузер применит значение по умолчанию.
src	Содержит абсолютный или относительный URL-адрес данных текстовой дорожки.
srclang	Язык воспроизводимой дорожки.

5. Стилизованный пример аудио плеера

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