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 не поддерживается вашим браузером.
Скачайте музыку.
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), звук появляется при наведении на пластинку.
ОписаниеДобавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задается через атрибут 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. Воспроизведение аудиофайла
БраузерыУправление воспроизведением аудио различается между браузерами по своему виду, но основные элементы совпадают. Это кнопка воспроизведения/паузы, длина трека, прошедшее и суммарное время звучания, а также уровень громкости.
При работе с различными видеороликами ряд пользователей может столкнуться с необходимостью вставить музыку в имеющееся у них видео. Это может быть добавление звуковой дорожки к снятому пользователем видеоролику, или полная замена аудиотрека в каком-нибудь клипе, при этом пользователь не знает, как это сделать и какими инструментами воспользоваться. В этом материале я постараюсь помочь таким пользователям и расскажу, как вставить музыку в видео онлайн, какие онлайновые сервисы (и программы) для этого существуют и как с ними работать.
Как вставить музыку в видео онлайн – особенности работы со звукомПрежде чем начать пояснять, как , следует сначала определиться с тем, что именно необходимо пользователю – добавление своей музыки к уже имеющейся на видео (с вариантами) или полная замена первоначального аудио трека своим . Среди онлайн-сервисов и программ, которые я опишу ниже, представлены и те и другие возможности, при этом пользователь должен определиться с тем, что именно ему нужно, и от этого отталкиваться в своих дальнейших действиях.
Ниже я представлю список из нескольких онлайн-сервисов, позволяющих вставить аудио в видео онлайн. Их функционал довольно прост и понятен, и не вызовет особых проблем даже у неопытного пользователя.
VideoToolbox - добавить аудио трек в видеоПростой и добротный (хоть и англоязычный) бесплатный ресурс VideoToolbox, позволяющий вставить музыку в видео онлайн, и поменять аудиодорожку видеоролика на свою. Чтобы воспользоваться возможностями данного сервиса сделайте следующее:
Stupeflix - заменить музыку в видео файле онлайн
Другим ресурсом, который поможет нам вставить музыку в видеоролик онлайн, является ресурс Stupeflix. Чтобы воспользоваться его возможностями выполните следующее:
LIFE.FILM вставить песню в клип без скачивания
Русскоязычный сервис, позволяющий вложить музыку в видео онлайн. Для работы с ним выполните следующее:
Программы для вставки музыки в видео
Вопрос о том, как вмонтировать музыку в видео онлайн, был бы не полон без упоминания о программах, позволяющим как добавить музыку к видео и имеющемуся там аудиоряд, так и способными заменить оригинальную аудиодорожку на вашу. Среди программ, позволяющим это сделать я бы отметил, к примеру, «ВидеоМастер» и «Machete».
ВидеоМастер«Видеомастер» - это удобная программа чтобы добавить музыку в видео. Она представляет собой универсальный конвертер видеоформатов, с возможностью обрезки и соединения аудио, наложения различных эффектов, кадрирования видео и так далее. Чтобы воспользоваться возможностями данного продукта для вставки видео сделайте следующее:
Machete
Вторая программа, которую я хочу отметить, это Machete – условно бесплатный (требующий последующей платной активации) продукт, позволяющий вставить музыку в видео. Чтобы воспользоваться её функционалом выполните следующее:
Заключение
В этом материале мной был описаны сервисы, позволяющие вставить музыку в видео онлайн, также мною были поданы программы для добавления песен в видео. Если вы хотите быстро соединить аудио и видео онлайн, то упомянутые мной ресурсы и программы эффективно вам в этом помогут, стоит лишь воспользоваться описанными алгоритмами действий для реализации указанной задачи.
Мы уже говорили об использовании HTML5 и почему это актуально на сегодняшний день. Теперь остановимся более подробно на вопросе "Как вставить аудио на сайт с помощью HTML5".
Добавить музыку на сайт можно с помощью тега audio . Пример простейшей реализации этого тега:
Но опять же, как и в случае с видео, не всё так просто. Не все браузеры поддерживают нужные аудио-кодеки. Взглянем на таблицу:
mp3 | Есть | Нет | Есть | Нет | Есть |
wav | Есть | Есть | Есть | Есть | Нет |
AAC | Есть | Нет | Есть | Нет | Есть |
ogg/vorbis | Есть | Есть | Нет | Есть | Нет |
Как видно из таблицы, наиболее "универсальным" является формат.wav. Но, тем не менее, его не поддерживает Internet Explorer. Поэтому, рекомендуется конвертировать аудиофайл в несколько форматов и использовать несколько аудио-кодеков. Следующий пример иллюстрирует один из способов добавления аудио HTML на веб-страницу:
Ваш браузер не поддерживает тег audio.
Внешний вид аудиоплеера будет зависеть от браузера, вот, например, вид аудиоплеера в браузере Firefox:
Атрибуты тега AUDIOК основным атрибутам тега audio относятся:
- src - путь к аудиофайлу (может задаваться отдельно с помощью вложенного тега source );
- controls - отображается панель управления аудио (play, pause, volume и т.д.);
- autoplay - воспроизводит аудиофайл сразу после загрузки веб-страницы;
- loop - циклическое воспроизведение;
Вложенный тег source может иметь следующие атрибуты:
- src - путь к аудиофайлу;
- type - тип аудио-источника;
- media - тип устройства, на котором будет проигрываться аудиофайл (all - на всех устройствах, tv - телевизор и т.д.);