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
| autoplay | Автоматическое воспроизведение аудио файла сразу же после загрузки страницы. |
| controls | Указывает браузеру, что нужно отобразить базовые элементы управления воспроизведением (начинать и останавливать воспроизведение, переходить в другое место записи, регулировать громкость). |
| loop | Циклическое воспроизведение аудио файла. |
| muted | Выключает звук при воспроизведении аудио файла. |
| preload | Атрибут, отвечающий за предварительную загрузку аудио контента. Не является обязательным, некоторые браузеры игнорируют его. Возможные значения: auto — браузер загружает аудио файл полностью, чтобы он был доступен, когда пользователь начнет его воспроизведение. metadata — браузер загружает первую небольшую часть аудио файла, чтобы определить его основные характеристики. none — отсутствие автоматической загрузки аудио файла. |
| src | Содержит абсолютный или относительный URL-адрес аудио файла. |
Аудио кодек (декодер) представляет собой программу для преобразования цифровых данных в формат звукового файла или звукового потока. Популярными аудио форматами являются следующие:
MP3 — самый популярный аудио формат, использующий сжатие с потерями и позволяющий уменьшить размер файла в несколько раз. В силу лицензионных отчислений не поддерживается Firefox и Opera.
AAC (Advanced Audio Codec) — закрытый кодек, аналог MP3, но по сравнению с последним, поддерживает более высокое качество звука при сходном размере файла.
Ogg Vorbis — бесплатный формат с открытым кодом, поддерживается в Firefox, Opera и Chrome. Обеспечивает хорошее качество звука, но недостаточно широко поддерживается аппаратными проигрывателями.
3. Альтернативные медиа-ресурсыЭлемент используется для добавления нескольких медиа-ресурсов для и . Указывает на альтернативные видео/аудио файлы, которые браузер может выбрать из предложенных на основании поддерживаемого им типа носителя или кодека.
4. Добавление субтитров и заголовковЭлемент используется в качестве дочернего элемента и . Добавляет текстовую дорожку для субтитров, заголовков медиафайлов или другой текстовой информации, которая должна быть видна во время воспроизведения аудио или видеофайла.
| default | Указывает, что данная дорожка воспроизводится по умолчанию. Только один элемент может содержать данный атрибут. |
| kind | Указывает тип текстовой дорожки, по умолчанию выводятся субтитры (subtitles). Принимаемые значения: captions — перевод диалогов и звуковых эффектов, отображаемый в виде текста поверх видео (для глухих пользователей). chapters — добавляет названия глав в виде списка для навигации по медиафайлу. descriptions — добавляет звуковое описание происходящего в видео (для слепых пользователей). metadata — метаданные, используемые скриптами, не отображаются для пользователей. subtitles — текстовое дублирование звуковой дорожки видео, отображается в виде субтитров к видео. |
| label | Добавляет название дорожки. Если этот атрибут не задан, браузер применит значение по умолчанию. |
| src | Содержит абсолютный или относительный URL-адрес данных текстовой дорожки. |
| srclang | Язык воспроизводимой дорожки. |
С помощью css-стилей можно придать аудио плееру необычный вид. Воспроизведение управляется с помощью небольшого скрипта (используется библиотека jQuery), звук появляется при наведении на пластинку.
Зачем нужна музыка на сайте?Довольно интересный вопрос, воспроизведение музыкальных или голосовых файлов на сайте, или встроенный плеер помогает посетителям сайта расслабиться, вызывает положительные эмоции и настроивает на нужный лад, так сказать облегчает взаимодействие с сайтом. Но данные эффекты работают только в том случае, когда музыка на сайте подобрана правильно и громкость звука не превышает допустимые пределы, иначе все ваши старания окажутся напрасными и вызовут отрицательные эмоции у посетителей сайта.
Как вставить аудио (музыку) на сайт в html?Нам часто задают такой вопрос, музыка на сайте является актуальным и креативным элементом, а способов её воспроизведения много и их не так сложно внедрить. Начнем с того, что каждый пользователь Глобальной Сети использует какой либо браузер для выхода в Интернет, а общей и универсальной технологии воспроизведения звуковых и музыкальных файлов нет, каждый браузер работает по своим собственным алгоритмам и они несколько отличаются друг от друга, поэтому при воспроизведении музыки с помощью внедрения в HTML код страницы могут возникать проблемы. Но как Вы знаете, все проблемы решаемы!
Вставить музыку на сайт HTML, JavaScript, jQuery, AJAX способы: 1 способ. Создание аудио проигрывателя музыки на сайте или плеераТехнология проста, создается файл проигрывателя, чтобы он не нагружал сайт или сервер выбираем технологию которую будем использовать: JavaScript, jQuery, AJAX . На основе выбранной технологии разрабатываем скрипт для нашего сайта и вставляем на сайт. Скрипт создается в зависимости от того, что Вам нужно: автоматическое воспроизведение фоновой музыки на сайте или управляемый посетителем плеер. Далее создаем папку в корне сайта для музыки и загружаем в нее аудио файлы.
Или как альтернативный сопсоб можно создать плеер по флеш-технологии (Flash), такой плеер будет смотреться более эффектно. Правда выйдет дороже и тяжелее для сайта (повысит время загрузки страниц сайта).
2 способ.
Установка музыки на сайт с помощью HTMLИспользуя возможности HTML и браузера можно вставить на сайт плеер или фоновую музыку. Технология так же проста: создается HTML5 код с тегом "audio" и этот код прописывается в сайт, а когда пользователь заходит на сайт он видит минимизированный плеер, посетитель нажимает кнопку плэй или автоматически начинает играть фоновая музыка. Вид плеера будет зависеть от браузера с которого зашел посетитель, но функциональность останется стандартной: кнопки Play, Stop, Next, Prev, Volume. Выглядит плеер с HTML кодом вот так:
Cам код для вставки выглядит так:
Как вы могли заметить команда "controls autoplay" включает автопроигрывание музыки как только посетитель заходит на сайт.
Альтернативный вариант HTML кода это тег "bgsound", это вообще не использовать визуальный плеер, при посещении сайта начнет играть музыка на сайте, но регулировать громкость, поставить на паузу и т.д. пользователь не сможет. Настройка громкости воспроизведения звукового файла настраивается в самом коде.
Форматы звуковых файлов для проигрывания музыки на сайте могут быть: WAV, AU, MIDI, MP3, OGG (расширения). Музыкальные файлы загружаются на сайт, либо используются ссылки на те сайты, где располагается звуковой файл, главное, чтобы он находился в открытом доступе.
Данный вопрос встречается очень часто, поэтому я решил ещё в уроках посвятить ему отдельную статью. Поскольку для проигрывания аудио универсальной технологии для всех браузеров у HTML нет, то для решения этой проблемы предлагаю скачать файл аудио проигрывателя, как и делается на большинстве сайтов. Делаем всё по шагам: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 - тег audioaudio - парный тег, определяющий фоновый звук, музыку или другой аудио поток на сайте.
Атрибуты тега audio
autoplay
- файл проигрывается сразу при загрузке страницы (аналогично фоновой музыке bgsound)
controls
- отобразить панель управления плеера в браузере
loop
- проигрывает файл заново после его окончания
preload
- загрузка аудио файла произойдёт вместе с загрузкой страницы
src
- путь к аудио файлу (mp3 или ogg)
Пример кода с тегом audio
Тег audio
Аудио в HTML 5
Тег audio не поддерживается вашим браузером.
Скачайте музыку.
Описание
Добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задается через атрибут 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. Воспроизведение аудиофайла
БраузерыУправление воспроизведением аудио различается между браузерами по своему виду, но основные элементы совпадают. Это кнопка воспроизведения/паузы, длина трека, прошедшее и суммарное время звучания, а также уровень громкости.
Как наложить музыку на видео? Воспользуйтесь Видеоредактором от Movavi и этой простой инструкцией.
Установите Видеоредактор MovaviСкачайте редактор видео на русском языке с нашего сайта. По завершении загрузки запустите установочный файл программы и следуйте инструкциям по установке.
Добавьте в программу видео и аудиоЗапустите нашу программу для наложения музыки на видео и выберите Новый проект . Нажмите кнопку Добавить файлы и выберите видео, к которому вы хотите добавить звуковую дорожку, и аудиофайл, который будет использоваться в качестве саундтрека. Загруженные вами файлы будут автоматически добавлены на соответствующие дорожки монтажного стола: видео – на Видеотрек , аудио – на Аудиотрек .
Отрегулируйте длительность звукаКогда вы будете соединять музыку и видео, вы можете столкнуться с тем, что у добавленных видео- и аудиофайла разная длительность. Здесь возможны два варианта.
- Аудиофайл длиннее, чем видео . Кликните на аудио, переместите бегунок в конец видеофайла на монтажном столе и нажмите на иконку с Ножницами . Затем щелкните по ненужному звуковому фрагменту и нажмите Delete на клавиатуре, чтобы удалить фрагмент.
- Видео длиннее, чем музыка . Добавьте на звуковую дорожку несколько копий выбранного аудиофайла (щелкните по файлу правой кнопкой мыши и выберите Копировать , а затем Вставить ). Обрежьте лишнее.
Помните, что в Видеоредакторе Movavi вы можете вставить в видео сразу несколько звуковых дорожек. Например, одну дорожку можно использовать для фоновой музыки, а другую – для звуковых спецэффектов.
Сохраните результатНаложение звука на видео оказалось довольно простым делом. Теперь осталось записать все в один видеофайл. Нажмите кнопку Сохранить и выберите одну из опций экспорта из вкладок в левой части окна. Программа предложит сохранить видео в папку Movavi Library. При желании вы можете поменять папку. Укажите видеоформат или модель мобильного устройства и нажмите кнопку Старт . Когда процесс сохранения завершится, вы найдете готовый видеофайл в выбранной папке. Теперь вы знаете, как наложить звук на видео!