• Как заработать на сайте
  • Как заработать в интернете
  • Инвестиции в интернете
  • Партнерские программы
  • Рейтинг парт. программ
  • SEO продвижение
  • Вопросы и ответы
  • Термины оптимизатора
  • HTML-уроки
  • Интернет
  • Мои услуги
  • Реклама на сайте
  • Обратная связь
Стоимость баннера за месяц: 30$ (подробности)
Главная → HTML уроки и советы → Как вставить музыку на сайте

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

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


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

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

Есть два способа для вставки музыки в 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 уроков и советов

Основные разделы
  • Главная
  • Партнерские программы
  • Рейтинг партнерских программ
  • Статьи про SEO
  • Термины SEO
  • Описание бирж
  • HTML-уроки и советы
  • CSS-уроки
  • Биткоины
  • PHP-уроки
  • Бинарные опционы
  • Социальные сети
  • Обзоры систем
  • Все про CMS
  • Реклама в интернете
Важно
  • Продвижение сайта
  • Аудит внутренней оптимизации
  • Куплю Ваш сайт
  • Куплю Вашу подпись на форуме
  • Подписаться на рассылку
  • Реклама на сайте
  • Карта сайта
  • Обратная связь
© 2010-2023 - Zarabotat-Na-Sajte.ru