Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

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

17.05.2016


11:21


9369


2


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

Как сделать фоновую музыку на сайте – 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» – по умолчанию соответствует текущей громкости воспроизведения.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Фоновая музыка</title>
<bgsound src="musik.wav" loop="-1" volume="-750" balance volume="-10000">
</head>
<body>
текст HTML-страницы
</body>



Случайные записи:

  1. Как вставить картинку в HTML. Основы HTML для начинающих. Урок №5
  2. Таблицы. Основы bootstrap 3 для начинающих. Урок №13
  3. HTML формы. Основы HTML для начинающих. Урок №18
  4. Знакомство с CSS. Основы CSS для начинающих. Урок №1
  5. Нам 3 годика! С Днем Рождения StepkinBlog.ru!!!

Последние записи рубрики:

  1. Атрибут download в HTML5 (для скачивания файлов)
  2. Комментировать код в HTML. Что это и зачем нужно…
  3. Тег DOCTYPE в HTML

2 ответа(ов) на статью: “Как сделать фоновую музыку на сайте – HTML и HTML5”

  1. Dalg Team says:

    Чтобы музыка проигрывалась формат файла музыки должен обьязательно быть WAW?

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Почему?
    Вот же пример с mp3:

    <audio src="music.mp3" autoplay="autoplay">
    Тег audio не поддерживается вашим браузером. Необходимо обновить браузер!
    </audio>
    

    Демонстрация вот тут

    Ответить

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245