Перейти к содержимому

Как вставить фоновую музыку в 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 звук для браузеров Internet Explorer и Opera:

HTML звук на сайте



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

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

  • – определяет фоновый HTML звук, музыку на сайте. Располагается в секторе .
  • 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:

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


Размещается код в секторе .

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

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

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

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

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

© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | Фоновый HTML звук, музыка? – Не вопрос!

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

Я пытался добавлять музыку на свой сайт но у меня возникала такая проблема то что Музыка останавливалась после обновления страницы и только через час я мог воспроизвести ее заново после обновления страницы также у меня возникли проблемы с громкостью музыки она максимальная по умолчанию какие бы я не пробовал скрипты она по умолчанию максимальная Кто нибудь подкиньте скрипт пожалуйста Заранее спасибо

Отслеживать

20.2k 6 6 золотых знаков 37 37 серебряных знаков 81 81 бронзовый знак

Как сделать фоновую музыку html?

Очень просто, нужно загрузить на сайт какой-нибудь файл MP3 и вставить на страницу такой код:

Чтобы музыка повторялась бесконечно, нужно добавить loop

Sign up or Log in to write an answer

  • Интерактивные уроки и курсы программирования и создания сайтов (дистанционное обучение) помогут вам в игровой форме изучить основы языков программирования веб-разработки и веб-программирования с нуля. Обучение онлайн 24/7.

Общие ссылки

  • Отзывы
  • Политика конфидециальности
  • Условия использования
  • Блог
  • Цена и оплата
  • Курсы и скринкасты
  • Сертификаты
  • Партнерская программа
  • Комьюнити

Наши курсы и скринкасты

  • HTML/CSS Advanced
  • Bootstrap 4
  • Vue JS
  • Linux, GIT and web-hosting
  • HTML and CSS
  • Modern Javascript
  • Javascript/jQuery
  • Codeigniter
  • Все курсы и скринкасты

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

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