Музыка на сайте — это скорее редкость, чем норма. Вставляя музыку на сайт, нужно понимать, что некоторых пользователей она может и вовсе оттолкнуть. В этой статье мы рассмотрим несколько вариантов вставки музыки на сайт, а также рассмотрим как сделать фоновую музыку.
Как вставить фоновую музыку на сайт
Вставка фоновой музыки на сайт самый опасный вариант в плане потери посетителей. Потому что фоновою музыку мало того, что нельзя никак выключить, так к тому же и громкость ее никак не регулируется (все зависит от текущей громкости на компьютере). Так что надо сто раз подумать, прежде чем вставлять фоновую музыку.
Есть два способа для вставки музыки в 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