Как сделать музыку на сайте html

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

Список поддерживаемых браузерами кодеков ограничен и приведен в табл. 1.

Табл. 1. Кодеки и браузеры

Кодек	Internet Explorer	Chrome	Opera	Safari	Firefox
ogg/vorbis
wav
mp3
AAC

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

Синтаксис

Атрибуты

autoplay Звук начинает играть сразу после загрузки страницы. controls Добавляет панель управления к аудиофайлу. loop Повторяет воспроизведение звука с начала после его завершения. preload Используется для загрузки файла вместе с загрузкой веб-страницы. src Указывает путь к воспроизводимому файлу.

Закрывающий тег

HTML5 IE 8 IE 9+ Cr Op Sa Fx

    audio  Александр Клименков - Четырнадцать

Результат примера в браузере Opera показан на рис. 1.

Рис. 1. Воспроизведение аудиофайла

Браузеры

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

Музыка и звуки на HTML-странице

currentTime Позиция курсора проигрывателя, double (секунды) duration Длительность воспроизведения, double (секунды); только чтение muted Заглушен ли звук, boolean paused Остановлено ли воспроизведение, boolean volume Уровень громкости, double (от 0 до 1) played Были ли воспроизведены интервалы полностью, возвращает объект TimeRanges seekable Интервалы, которые готовы для немедленного воспроизведения, возвращает объект TimeRanges buffered Возвращает объект TimeRanges буферизованного файла

События тега

durationchange Обновлён атрибут duration ended Воспроизведение остановлено по достижению конца pause Воспроизведение было остановлено (обратите внимание на отсутствие события stop) play Файл начал проигрываться timeupdate Текущая позиция воспроизведения изменилась (обычно каждые 250 мс) volumechange Значение изменилось canplay Файл может быть воспроизведен, но, возможно, потребуется пауза, пока он загружается. canplaythrough При имеющемся темпе скачивания предполагается, что файл может быть проигран от начала до конца без перерыва. progress Браузер показывает состояние проигрывания (обычно каждые 250 мс)

Объект TimeRanges

Содержит данные о частях буферизованных участков медиафайла (один или более — сколько успело буферизоваться) и имеет свойства:

length Число интервалов start(index Начальное время указанного интервала end(index) Конечное время указанного интервала (отсчитывается от начала воспроизведения)

Управление воспроизведением через JavaScript

Для создания объекта audio в javascript используется:

var audio = new Audio();

Чтобы определить, поддерживается ли данный формат файла в браузере используйте метод canPlayType() , который возвращает одно из 3 значений:

probably,
maybe,
«» (пустая строка).

var audio = new Audio(); var canPlayOgg = !!audio.canPlayType && audio.canPlayType('audio/ogg; codecs="vorbis"') != "";

var audio = document.getElementById('my-audio-id'); // получим доступ к объекту audio. audio.canPlayType('audio/ogg'); // или сразу задав кодек: // audio.canPlayType('audio/ogg; codecs="vorbis"');

Как вариант, объект создаётся полностью на Javascript.

var audio = new Audio();

Старые форматы вставки музыки:

Пример

Поддерживаемые форматы: Ogg Vorbis, WAV PCM, MP3, AAC, Speex (зависит от конкретного браузера).
Подробнее на Wiki: Audio format support

Урок 14. Как вставить аудио или музыку на сайт в html

1. Как вставить аудио (музыку) на сайт в html
2. Как установить фоновую музыку в html

Как вставить аудио (музыку) на сайт в html

Данный вопрос встречается очень часто, поэтому я решил ещё в уроках посвятить ему отдельную статью. Поскольку для проигрывания аудио универсальной технологии для всех браузеров у HTML нет, то для решения этой проблемы предлагаю скачать файл аудио проигрывателя, как и делается на большинстве сайтов. Делаем всё по шагам:

1. На хостинге, где и располагается Ваш сайт, в корневом каталоге (папке, где индексный файл), соpдайте папку audio. В неё в дальнейшем будете помещать все аудио файлы.

2. Далее нужно скачать файлы плеера .

3. Теперь выберите нужные файлы, лучше в формате mp3. Создайте папку audio в корне сайта и закачайте их.

4. Остаётся только вставить код подключения плеера. Он подойдёт для любого сайта В нужном месте следует только указать путь к файлу плеера и аудио файлу, соответственно заменив слова ваш_домен и название_аудио_файла:

И всё готово! Можете посмотреть и работу примера.

Как установить фоновую музыку в html

Использую возможности HTML и браузера, можно также вставить на страницу фоновую музыку. Вам понадобится аудио файл нужного формата: WAV, AU, MIDI или MP3. Можете в качестве примера использовать любой файл с указанным расширением.

Первый способ — это тег embed. Элемент embed используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.), которые исходно браузер не понимает.

Синтаксис довольно-таки прост:

Закрывающий тег не требуется.

Теперь смотрим пример записи с атрибутами, а ниже с их расшифровкой:

Атрибуты тега embed для проигрывания аудио в html
width — ширина панели в пикселях (или процентах)
height — высота панели в пикселях (или процентах)
align — расположение панели относительно текста, возможные значения left, right, center
hidden — позволяет скрыть панель, значения аттрибута: true — панель скрыта, false — панель видима (значение по умолчанию)
autostart — значение true — проигрыватель стартует автоматически при загрузке страницы, false — ждет нажатия на кнопку воспроизведение
loop — цикл, true — трэк проигрываться по кругу, а при значении false — только один раз

Читать:

Как зайти в биос на windows 8

Если значением будет число, то Mozilla Firefox проиграет мелодию указанное количество раз, для Explorer’а числовое значение равносильно значению true.

Второй способ. Очень старый, но тоже практичный) Добавьте мелодию в ту же папку (директорию), где лежит Ваш файл, а в body пропишите следующий код:

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

src — путь к Вашему аудиофайлу
loop — сколько раз мелодию повторить ( если -1, то повторяется бесконечно)
balance — значение стереобаланса (от -10000 до 10000)
volume — громкость проигрывания мелодии, где 0 максимум, а -10000 минимум.

Однако не будет возможности как-либо контролировать проигрыватель — при каждом обновлении страницы трек будет проигрываться заново.

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

Вставка аудио и музыки в HTML5 — тег audio

audio — парный тег, определяющий фоновый звук, музыку или другой аудио поток на сайте.

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

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

autoplay— файл проигрывается сразу при загрузке страницы (аналогично фоновой музыке bgsound)
controls — отобразить панель управления плеера в браузере
loop — проигрывает файл заново после его окончания
preload — загрузка аудио файла произойдёт вместе с загрузкой страницы
src — путь к аудио файлу (mp3 или ogg)

Пример кода с тегом audio

Тег audio

Аудио в HTML 5

Теперь смотрим работу тега audio в Вашем браузере:

Спасибо за внимание! В следующем уроке рассмотрим вставку видео!)

Как вставить музыку на сайте

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

Как вставить фоновую музыку на сайт

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

Есть два способа для вставки музыки в html

Вариант 1. Через html тег
Синтаксис для вставки фоновой музыки

bgsound src value">адрес_аудиофайла" [атрибуты]>

У тега есть несколько атрибутов:

loop=»значение» — количество повторений музыки (если -1, то повторяется бесконечно)
balance=»значение» — стереобаланс (от -10000 до 10000)
volume=»значение» — громкость (0 максимум, -10000 минимум)

Музыка будет играть автоматически при загрузке страницы.

bgsound src value">fon_music.mp3" loop value">1" balance value">0" volume value">0">

Вариант 2. Через тег
Синтаксис для вставки объекта с музыкой

embed src value">адрес_аудиофайла" [атрибуты]>

У тега возможно использование следующих атрибутов:

width=»значение» — ширина (в пикселях или процентах)
height=»значение» — высота (в пикселях или процентах)
align=»значение» — выравнивание ( left — слева, right — справа, center — по центру)
hidden=»значение» — видимость панели ( true — скрыть, false — показывать), по умолчанию панель видна
autostart=»значение» — проигрывать музыку при загрузке ( true — да, false — нет)
loop=»значение» — значение true — проигрывать по кругу, false — один раз

embed src value">fon_music.mp3" loop value">true" width value">300px" height value">100px" align value">center" autostart value">false">

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

В html5 можно использовать тег

Смысл использования тега вызывает сомнения, поскольку до сих пор у старых браузеров отсутствует поддержка html5.

Синтаксис тег

audio src value">адрес_музыки.mp3" controls [атрибуты]> Браузер не поддерживает audio audio controls>

Следующие атрибуты можно использовать:

autoplay=»значение» — включить музыку сразу при загрузке страницы
controls=»значение» — отображать панель управления плеера в браузере
loop=»значение» — отвечает за цикличность
preload=»значение» — загружать музыку сразу с загрузкой страницы

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