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

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

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

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

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

Вариант 1. Через html тег <bgsound>

Синтаксис для вставки фоновой музыки

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

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

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

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

Например

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

Вариант 2. Через тег <embed>

Синтаксис для вставки объекта с музыкой

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

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

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





Например

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

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

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

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

Синтаксис тег <audio>

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

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

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

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




Читайте также:

• Самые основные html теги

• HTML тег <style> – подробное описание с примерами

• HTML тег <a> – подробное описание с примерами

• HTML тег <table> – подробное описание с примерами

• HTML тег <img> – подробное описание с примерами

• HTML тег <form> – подробное описание с примерами

• HTML тег <div> – подробное описание с примерами

• Как сделать форму обратной связи на php с каптчей

• Как скруглить углы в HTML через CSS

← Перейти в каталог html уроков и советов

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.