1. На хостинге, где и располагается Ваш сайт, в корневом каталоге (папке, где индексный файл), соpдайте папку audio. В неё в дальнейшем будете помещать все аудио файлы.
3. Теперь выберите нужные файлы, лучше в формате mp3. Создайте папку audio в корне сайта и закачайте их.
4. Остаётся только вставить код подключения плеера. Он подойдёт для любого сайта В нужном месте следует только указать путь к файлу плеера и аудио файлу, соответственно заменив слова ваш_домен и название_аудио_файла :
И всё готово! Можете посмотреть и работу примера
.
Первый способ - это тег embed. Элемент embed используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.), которые исходно браузер не понимает.
Синтаксис довольно-таки прост:
Закрывающий тег не требуется.
Теперь смотрим пример записи с атрибутами, а ниже с их расшифровкой:
Атрибуты тега embed для проигрывания аудио в html
width - ширина панели в пикселях (или процентах)
height - высота панели в пикселях (или процентах)
align - расположение панели относительно текста, возможные значения left, right, center
hidden - позволяет скрыть панель, значения аттрибута: true - панель скрыта, false - панель видима (значение по умолчанию)
autostart - значение true - проигрыватель стартует автоматически при загрузке страницы, false - ждет нажатия на кнопку воспроизведение
loop - цикл, true - трэк проигрываться по кругу, а при значении false - только один раз
Второй способ. Очень старый, но тоже практичный) Добавьте мелодию в ту же папку (директорию), где лежит Ваш файл, а в body пропишите следующий код:
В результате после загрузки страницы будет звучать указанная Вами в теге bgsound мелодия. Теперь рассмотрим лучше атрибуты тега :
src
- путь к Вашему аудиофайлу
loop
- сколько раз мелодию повторить (если -1, то повторяется бесконечно)
balance
- значение стереобаланса (от -10000 до 10000)
volume
- громкость проигрывания мелодии, где 0 максимум, а -10000 минимум.
Однако не будет возможности как-либо контролировать проигрыватель - при каждом обновлении страницы трек будет проигрываться заново.
После описания метода вставки фоновой музыки хочу Вас от этого отговорить, так как большинство пользователей в момент посещения различных сайтов уже, как правило, слушают музыку. Поэтому попутное музыкальное сопровождение может его только заставить закрыть вкладку с сайтом.
Вставка аудио и музыки в HTML5 - тег audioАтрибуты тега audio
autoplay
- файл проигрывается сразу при загрузке страницы (аналогично фоновой музыке bgsound)
controls
- отобразить панель управления плеера в браузере
loop
- проигрывает файл заново после его окончания
preload
- загрузка аудио файла произойдёт вместе с загрузкой страницы
src
- путь к аудио файлу (mp3 или ogg)
Пример кода с тегом audio
Тег audio
Аудио в HTML 5
С появлением достаточно быстрого соединения с сетью Интернет, Flash был единственным инструментом для воспроизведения звуков на веб-сайтах. Но HTML5 в корне изменит способ воспроизведения звуков в Интернет. В этой статье я хочу подробно рассказать Вам о том, как использовать тег на ваших сайтах.
Используем для вставки звукового файлу на страницуНиже приведен простейший пример использования тега, он загружает mp3 файл и воспроизводит его. Обратите внимание на атрибут autopaly , который используется для автоматического воспроизведения звука. Тем не менее Вам не следует автоматически воспроизводить звуки а сайте, ведь это надоедает пользователям. Воспроизведение звука в циклеХотите зациклить звук? Атрибут loop поможет Вам это сделать. Но опять же, не стоит злоупотреблять автозапуском и воспроизведением в цикле, если не хотите, чтобы пользователь преждевременно покинул сайт. Отображение элементов управленияВместо того, чтобы играть звуки автоматически, что, безусловно, плохая практика, вы должны позволить отображать в браузере некоторые элементы управления, такие как громкость и кнопки воспроизведение (пауза). Это сделать легко, просто добавив атрибут controls . Различные форматы файловТег поддерживается большинством современных браузеров, но проблема в том, что разные браузеры поддерживают разные форматы файлов. Safari, например, может проигрывать MP3, а Firefox не может, и играет OGG-файлы вместо этого. Решение этой проблемы заключается в использовании обоих форматов, чтобы каждый посетитель мог услышать звук, независимо от того, какой браузер он использует. Указываем MIME-тип файловПри использовании различных форматов файлов, хорошей практикой есть указывание MIME-типа для каждого файла, чтобы помочь браузеру локализировать поддерживаемый им файл. Это легко можно сделать используя атрибут type . Для старых браузеровА что, если посетитель использует IE6 или какой-то другой доисторический браузер, который не поддерживает тег? Все легко: ниже приведён код, который будет отображать сообщение для браузеров, которые не поддерживают тег. Ваш браузер не пожжерживает тег audio! Буферизация файловПри воспроизведении файлов большого размера может использоваться буферизация файлов. Для этого вы можете использовать атрибут preload . Он может принимать 3 значения:Вот и всё на сегодня.
Надеюсь, что эта статья помогла Вам понять базовые возможности HTML5 тега .
Раньше в браузерах не было встроенных возможностей для поддержки аудио и видео контента, но с развитием интернет, поддержка мультимедийных элементов в качестве возможностей современных браузеров стала необходимостью. В HTML5 были введены новые элементы и , которые поддерживаются во всех современных браузерах. Основная задача тега заключается в добавлении аудио контента на страницу.
Формат аудио файла определяет структуру и особенности представления звуковых данных при хранении на носителе (запоминающее устройство). Для устранения избыточности аудиоданных, как правило, используются специальные аудиокодеки, благодаря которым производят сжатие аудиоданных. Современные браузеры поддерживают следующие 3 формата аудио :
ДА | ДА | ДА |
ДА | ДА | ДА |
ДА | ДА | ДА |
ДА | ДА | НЕТ |
ДА | НЕТ | НЕТ |
ДА | ДА | НЕТ |
MIME-типы для аудио:
audio/mpeg |
audio/ogg |
audio/wav |
4.0 | 3.5 | 10.5 | 4.0 | 9.0 | 12.0 |
autoplay | autoplay | Указывает, что аудио запустится автоматически, как только оно будет готово. |
controls | controls | Отображение встроенных элементов управления мультимедийным файлом (кнопка воспроизведения/паузы, регулятор, позволяющий перейти к определенному фрагменту ролика, а также регулятор уровня громкости). |
loop | loop | Зацикливает воспроизведение файла (наша песня хороша – начинай сначала).. |
muted | muted | Указывает, что аудио будет заглушено (без звука). |
preload | auto metadata none | Указывает как аудио должно загружаться при загрузке страницы. Атрибут игнорируется, если присутствует атрибут autoplay . |
src | URL | Указывает URL аудиофайла. |
Элемент использует те же атрибуты, что и элемент , за исключением атрибутов width (ширина), height (высота) и poster (изображение, которое отображается до воспроизведения видео). По аналогии с использованием элемента , вы можете предоставить несколько вариантов аудио форматов с помощью элемента , как показано в примере ниже:
Аудио в HTML5 Аудио в HTML5 Ваш браузер не поддерживает этот аудио формат. Вы можете скачать этот файл по ссылке ниже:В этом примере мы:
Добавили на страницу аудио-контент (тег ), атрибутом controls добавили отображение встроенных элементов управления мультимедийным файлом (кнопка воспроизведения / паузы, регулятор, позволяющий перейти к определенному фрагменту ролика, а также регулятор уровня громкости).
ОписаниеДобавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задается через атрибут src или вложенный тег . Внутри контейнера можно написать текст, который будет выводиться в браузерах, не работающих с этим тегом.
Список поддерживаемых браузерами кодеков ограничен и приведен в табл. 1.
Кодек | Internet Explorer | Chrome | Opera | Safari | Firefox |
ogg/vorbis | |||||
wav | |||||
mp3 | |||||
AAC |
Для универсального воспроизведения в указанных браузерах аудио кодируют с помощью разных кодеков и добавляют файлы одновременно через тег .
Синтаксис Атрибуты Звук начинает играть сразу после загрузки страницы. Добавляет панель управления к аудиофайлу. Повторяет воспроизведение звука с начала после его завершения. Используется для загрузки файла вместе с загрузкой веб-страницы. Указывает путь к воспроизводимому файлу. Закрывающий тегОбязателен.
HTML5 IE 8 IE 9+ Cr Op Sa Fx
audio
Александр Клименков - Четырнадцать
Тег audio не поддерживается вашим браузером. Скачайте музыку.Результат примера в браузере Opera показан на рис. 1.
Рис. 1. Воспроизведение аудиофайла
БраузерыУправление воспроизведением аудио различается между браузерами по своему виду, но основные элементы совпадают. Это кнопка воспроизведения/паузы, длина трека, прошедшее и суммарное время звучания, а также уровень громкости.
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 типыАудио 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: или илиТеги и требуют наличие закрывающего тега.
Для тех случаев, когда браузер не поддерживает HTML5 и теги, что сейчас большая редкость, пред закрывающим контейнер тегом пишут текстовое сообщение и обычно добавляют ссылку на скачивание файла. Если же встроенный в браузер HTML5 плеер будет дополнительно управляться JS библиотекой (JS плеером), то большинство из них выполняют подключение флэш плеера в случае невозможности воспроизведения в браузере HTML5 видео и аудио по причине не поддержки браузером тегов видео и аудио или формата мультимедийного файла.
Тег :Путь к проигрываемому файлу также можно задать и при помощи тега с атрибутом src , размещенного внутри тегов или . Тег не имеет закрывающего тега.
В большинстве случаев тег выглядит так:
и в нем присутствует всегда атрибут src и type , который в большинстве случаев имеет только MIME-тип.
Атрибуты тега :Для 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. задает тип дорожки и может принимать значения:
Атрибут src тега задает URL к файлу дорожки с дополнительной информацией. Подключаемый к тегу файл имеет формат WebVTT и расширение .vtt .
Атрибут srclang тега задает язык дорожки через код языка. Для русского языка будет равен "ru", для английского "en".
Атрибут label тега задает название дорожки, которое будет показано в плеере. Если атрибут не будет задан, то браузер покажет свое служебное название.
Атрибут default тега задает выбор данной дорожки по умолчанию при наличии других дорожек в контейнере video. Только один из нескольких тегов может иметь default атрибут. Лучше дорожку по умолчанию располагать первой среди других подключаемых дорожек.
Пример тегов :