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

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

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

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

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

<audio src=»путь к файлу» ></audio>

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

Атрибуты тега <audio>:

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

Пример:

<!DOCTYPE HTML> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″ /> <title>Фоновая музыка на HTML5-StepkinBlog.ru</title> </head> <body> <audio src=»music.mp3″ autoplay=»autoplay»> Тег audio не поддерживается вашим браузером. Необходимо обновить браузер! </audio> </body> </html>

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

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

<bgsound src=»путь к файлу»>

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

Тег <bgsound> размещается между тегами <head></head> .

Атрибуты тега <bgsound>:

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

Пример:

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


1.
2.

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

Данный вопрос встречается очень часто, поэтому я решил ещё в уроках посвятить ему отдельную статью. Поскольку для проигрывания аудио универсальной технологии для всех браузеров у HTML нет, то для решения этой проблемы предлагаю скачать файл аудио проигрывателя, как и делается на большинстве сайтов. Делаем всё по шагам:
1. На хостинге, где и располагается Ваш сайт, в корневом каталоге (папке, где индексный файл), соpдайте папку audio. В неё в дальнейшем будете помещать все аудио файлы.
2. Далее нужно .
3. Теперь выберите нужные файлы, лучше в формате mp3. Создайте папку audio в корне сайта и закачайте их.

4. Остаётся только вставить код подключения плеера. Он подойдёт для любого сайта В нужном месте следует только указать путь к файлу плеера и аудио файлу, соответственно заменив слова ваш_домен и название_аудио_файла:
<script language=»JavaScript» src=»http://ваш_домен/audio/audio-player.js»></script>
<object type=»application/x-shockwave-flash» data=»http://ваш_домен/audio/player.swf» id=»audioplayer1″ height=»25″ width=»290″>
<param name=»movie» value=»http://ваш_домен/audio/player.swf»>
<param name=»FlashVars» value=»playerID=1&amp;soundFile=http://ваш_домен/audio/название_аудио_файла.mp3″>
<param name=»quality» value=»high»>
<param name=»menu» value=»false»>
<param name=»wmode» value=»transparent»>
</object>
И всё готово! Можете посмотреть и работу примера.

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

Использую возможности HTML и браузера, можно также вставить на страницу фоновую музыку. Вам понадобится аудио файл нужного формата: WAV, AU, MIDI или MP3. Можете в качестве примера использовать любой файл с указанным расширением.
Первый способ — это тег embed. Элемент embed используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.), которые исходно браузер не понимает.
Синтаксис довольно-таки прост:
<embed src=»….mp3″></embed>
Закрывающий тег не требуется.
Теперь смотрим пример записи с атрибутами, а ниже с их расшифровкой:
<embed src=»music.mp3″ width=»70″ height=»45″ align=»left» hidden=»False» autostart=»False» loop=»True»>
Атрибуты тега embed для проигрывания аудио в html
width — ширина панели в пикселях (или процентах)
height — высота панели в пикселях (или процентах)
align — расположение панели относительно текста, возможные значения left, right, center
hidden — позволяет скрыть панель, значения аттрибута: true — панель скрыта, false — панель видима (значение по умолчанию)
autostart — значение true — проигрыватель стартует автоматически при загрузке страницы, false — ждет нажатия на кнопку воспроизведение
loop — цикл, true — трэк проигрываться по кругу, а при значении false — только один раз

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

Второй способ. Очень старый, но тоже практичный) Добавьте мелодию в ту же папку (директорию), где лежит Ваш файл, а в body пропишите следующий код:
<bgsound src=»Ваш трэк.mp3″ loop=»1″></bgsound>
В результате после загрузки страницы будет звучать указанная Вами в теге bgsound мелодия. Теперь рассмотрим лучше атрибуты тега <bgsound> :
src — путь к Вашему аудиофайлу
loop — сколько раз мелодию повторить ( если -1, то повторяется бесконечно)
balance — значение стереобаланса (от -10000 до 10000)
volume — громкость проигрывания мелодии, где 0 максимум, а -10000 минимум.
Однако не будет возможности как-либо контролировать проигрыватель — при каждом обновлении страницы трек будет проигрываться заново.
После описания метода вставки фоновой музыки хочу Вас от этого отговорить, так как большинство пользователей в момент посещения различных сайтов уже, как правило, слушают музыку. Поэтому попутное музыкальное сопровождение может его только заставить закрыть вкладку с сайтом.

Фоновый звук в HTML или музыка на сайте

Музыка на HTML сайте

Фоновый HTML звук

HTML теги, атрибуты и параметры, определяющие звук

FAQ по теме: Фоновый звук – музыка на сайте

  1. Как установить фоновый HTML звук на сайт для браузеров IE и Opera?
  2. Как установить фоновый HTML звук или музыку на сайт для всех видов браузеров?

Фоновый HTML звук для браузеров Internet Explorer и Opera:

Результат: фоновый HTML звук для IE и Opera

Теги, атрибуты и значения

  • <bgsound /> – определяет фоновый HTML звук, музыку на сайте. Располагается в секторе <head> </head>.
  • src=»» – определяет url звукового файла в формате Wav или Mp3.
  • loop=»» – определяет количество проигрываний.
  • volume=»-1000″ – регулирует громкость звука. В данном случае обозначенная величина будет вычтена из текущего уровня громкости, установленного на компьютере пользователя.
  • balance=»0″ – регулирует баланс звучания.

Внимание! Описанный выше метод внедрения фонового звука в HTML-страницу приемлем только для браузеров Internet Explorer и Opera ранних выпусков. Для современных браузеров он не подходит ⇒ музыка и звук на странице сайта не воспроизводятся! Поэтому смотрим ниже, где подробно рассмотрен кроссбраузерный способ вставки звука и музыки на сайт для всех браузеров (Opera, Firefox, Internet Explorer, Chrome).

Звук в HTML или музыка на сайте для всех браузеров

Фоновый HTML звук для Opera, Firefox, Internet Explorer, Chrome:

<title>Кроссбраузерный HTML звук и музыка на сайте для всех браузеров</title>
</head>
<body>
<embed src=»music.mp3″ autostart=»true» hidden=»false» loop=»false» width=»300″ height=»65″ align=»bottom»> </embed>
</body>
</html>

Результат: HTML звук и музыка на сайте для всех браузеров

Размещается код в секторе <body> </body>.

Aтрибуты и значения

  • autostart=»» – определят будет ли музыка проигрываться автоматически при открытии интернет-станицы или нет. Возможны значения: true – да или false – нет.
  • loop=»» – определяет будут ли повторяться проигрывания. Возможны значения: true – да или false – нет.
  • hidden=»» – определяет будет ли скрыта панель управления плейера или нет. Возможны значения: true – да или false – нет. Если не будет, то указываются размеры панели: width=»» height=»».

Совет напрашивается сам собой! Используйте фоновый HTML звук или музыку на своем сайте только в случае, когда это действительно оправдано!

Дополнительно смотрите: фоновый звук, музыка в HTML 5

Дата публикации: Ноябрь 2009 | Обновление: Ноябрь 2018

HTML формы HTML звук и музыка на сайте Блочная HTML верстка

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *