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

 
По синему морю, к зелёной земле 
Плыву я на белом своём корабле. 
На белом своём корабле, 
На белом своём корабле. 
. . . 
Музыка: В. Шаинский 
Слова: Д. Непомнящий 

Музыка нааас сближала.. тайною нааашей стала.. 🙂

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

К тегу могут быть применены следующие атрибуты:

• src — адрес звукового файла
• loop — число повторов звукового файла
• balance — стереобаланс
• volume — громкость

src — адрес звукового файла.. ну думаю понятно указывает путь к аудио файлу, например такая запись:
говорит, что рядом с документом есть папка music , а в ней лежит музыкальный файл mammoth.mid который следует воспроизвести в качестве фоновой музыки.

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

balance — стереобаланс между правой и левой колонками компьютера, возможный диапазон значений от -10000 до 10000. Так, например значение -10000 переведёт весь звук на лёвую колонку компьютера при этом из правой колонки будет доносится лишь тишина.. Значение по умолчанию равно 0 т.е. распределять звук равномерно между левой и правой колонками.

volume — громкость можно определить значениями в диапазоне от -10000 до 0, где ноль это максимальная громкость, а -10000 минимальная. Значение 0 стоит по умолчанию.

 
По синему морю, к зелёной земле 
Плыву я на белом своём корабле. 
На белом своём корабле, 
На белом своём корабле. 
. . . 
Музыка: В. Шаинский 
Слова: Д. Непомнящий 

Вот собственно и всё.. а теперь внимательно читаем полезные советы..

Полезные советы:

Использование фоновой музыки, это не есть хорошо по нескольким причинам:

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

Во-вторых, пользователю не предоставляется возможности управлять данной музыкой, проще говоря, нет кнопок «Стоп» «Пауза» «Плей» и т.д.

В-третьих, музыкальные записи в форматах WAV, AU и MIDI , как правило, низкого качества, кому нравится слушать некачественную музыку?

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

Ну и в-пятых, как уже говорилось раннее тег это придумка для браузера Internet Explorer так что в большинстве других браузеров музыка играть не будет! Кроме того, так как данный тег не входит в спецификацию HTML, то документ с этим тегом будет не валидным.

Если уж Вам действительно так необходима музыка на сайте, то внедряйте её с помощью тегов и/или .. о данных тегах я постараюсь Вам рассказать в пока что ещё ненаписанной главе «объекты».

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

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

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

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

Есть два способа для вставки музыки в 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=»значение» — загружать музыку сразу с загрузкой страницы

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

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

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, WordPress, Bootstrap

Главная » HTML дополнение » Как сделать фоновую музыку на сайте – HTML и HTML5

Как сделать фоновую музыку на сайте – HTML и HTML5

Всем привет!
Сегодня я расскажу, как сделать фоновую музыку на сайте используя HTML.
Это совершенно не сложно и не нужно быть гуру, чтобы создать такой эффект на сайте.
Стоит вопрос, а нужно ли это для вашего сайта? Может, вашим пользователям или читателям этот эффект будет мешать? Или даже раздражать? Ведь, если у вас, например, обучающий сайт, то музыка будет отвлекать. Если вы делаете сайт для какой-то музыкальной группы или певца, возможно, этот эффект будет классным и в тему.

Фоновая музыка на HTML5

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

* Закрывающий тег обязателен.

• « autoplay » определяет воспроизведение музыкального файла сразу же после загрузки страницы.
• « autobuffer » используется в паре с « autoplay » – определяет воспроизведение музыкального файла уже в момент загрузки страницы.
• « src » – путь к звуковому файлу.
• « controls » показывает панель управления плеером.

Фоновая музыка на HTML ( этот способ не рекомендую )

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

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

Тег размещается между тегами .

• « Balance » — управляет балансом звука между правой и левой колонками.
  Если в значении указать « -10 000 », мелодия будет играть в левой колонке.
  Если в значении указать « 10 000 », мелодия будет играть в правой колонке.
  Если в значении указать « 0 », мелодия будет играть равномерно в обеих колонках.
• « loop » — устанавливает, сколько раз проигрывать музыкальный файл. Значение по умолчанию « -1 » бесконечный повтор.
• « src » — путь к музыкальному файлу.
• « volume » — громкость музыки. Значение « -10 000 » – минимальная громкость, а значение « 0 » – по умолчанию соответствует текущей громкости воспроизведения.

    текст HTML-страницы 

Как вставить на сайт аудио файл (музыку) с помощью HTML5

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

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

Демо

Поддержка браузеров

Все браузеры, которые поддерживают тег — это IE9+, Chrome, Opera, Safari и Firefox. А вот ту есть ещё один нюанс, не все браузеры поддерживают все форматы аудио.

Например: IE9+ поддерживает только mp3 файлы, но не поддерживает wav и ogg.

Chrome после 6 версии поддерживает практически все форматы.

Opera 10+ не поддерживает mp3, честно, мне кажется что это её очень большой недостаток, такой популярный формат и не поддерживает. Но с wav и ogg справляется отлично.

С браузером Firefox та же самая история, что и с Оперой. За это ей огромный и жирный минус.

Safari поддерживает все форматы аудио кроме ogg.

Добавление аудио файла на сайт

Чтобы добавить аудио файл на Ваш сайт нужно между тегами указать прямую ссылку на файл. Ссылка указывается с помощью тега . Вот как будет выглядеть готовый код:

Как видите, что тут добавлено сразу 3 файла, таким образом если какой то браузер не поддерживает mp3 он автоматически воспроизведёт тот формат который поддерживает и так далее.

А если браузер вообще не поддерживает тег то выскочит вот это сообщение «Ваш браузер не поддерживает аудио».

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

Демо

Вот и всё, дорогие друзья. Если у Вас возникнут вопросы или трудности спрашивайте в комментариях. До скорых встреч.