Как сделать фоновую музыку в html
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, WordPress, Bootstrap
Как сделать фоновую музыку на сайте – HTML и HTML5
Всем привет!
Сегодня я расскажу, как сделать фоновую музыку на сайте используя HTML.
Это совершенно не сложно и не нужно быть гуру, чтобы создать такой эффект на сайте.
Стоит вопрос, а нужно ли это для вашего сайта? Может, вашим пользователям или читателям этот эффект будет мешать? Или даже раздражать? Ведь, если у вас, например, обучающий сайт, то музыка будет отвлекать. Если вы делаете сайт для какой-то музыкальной группы или певца, возможно, этот эффект будет классным и в тему.
Фоновая музыка на HTML5
Чтобы сделать на странице сайта фоновую музыку, достаточно воспользоваться тегом <audio> .
* Закрывающий тег обязателен.
Атрибуты тега <audio> :
- « autoplay » определяет воспроизведение музыкального файла сразу же после загрузки страницы.
- « autobuffer » используется в паре с « autoplay » – определяет воспроизведение музыкального файла уже в момент загрузки страницы.
- « src » – путь к звуковому файлу.
- « controls » показывает панель управления плеером.
Фоновая музыка на HTML ( этот способ не рекомендую )
Чтобы сделать на странице сайта фоновую музыку, достаточно воспользоваться тегом <bgsound> .
Фоновая музыка.
Раскрывая все возможности HTML языка, в тринадцатой несчастливой главе, вынужден Вам рассказать о теге <bgsound> который позволяет внедрять в страницу сайта фоновую музыку. Другими словами когда пользователь зайдёт на Ваш сайт он услышит звучание музыки указанной с помощью вышеупомянутого тега, ну естественно если у него подключены колонки или наушники.
Итак, тег <bgsound> первое, что необходимо сказать об этом теге то, что он не входит в официальную спецификацию HTML, а является инициативой компании Microsoft для браузера Internet Explorer , так что большинство других браузеров игнорируют данный тег.
Для того чтобы вставить аудио файл в какую либо страницу сайта, в качестве фоновой музыки, нужно в теге <bgsound> с помощью атрибута src указать путь к аудио файлу
<bgsound src=»http://www.webremeslo.ru/html/music.mid»> — закрывающий тег необязателен.
Ну и собственно вставить эту конструкцию в html документ, обычно тег <bgsound> располагают в «голове» документа между тегами <head> </head> .
Сам аудио файл должен быть в формате: WAV, AU или MIDI .
Музыка нааас сближала.. тайною нааашей стала.. 🙂
Атрибуты тега <bgsound>
К тегу <bgsound> могут быть применены следующие атрибуты:
- src — адрес звукового файла
- loop — число повторов звукового файла
- balance — стереобаланс
- volume — громкость
src — адрес звукового файла.. ну думаю понятно указывает путь к аудио файлу, например такая запись:
<bgsound src=»http://www.webremeslo.ru/html/music/mammoth.mid»> говорит, что рядом с документом есть папка music , а в ней лежит музыкальный файл mammoth.mid который следует воспроизвести в качестве фоновой музыки.
loop — данный атрибут указывает сколько раз подряд будет проигрываться аудио файл, значения 0 и 1 проигрывает файл один раз, любое целое положительное число проигрывает звуковой файл заданное число раз, а вот отрицательное значение -1 говорит браузеру о том что данный файл необходимо проигрывать бесконечно. По умолчанию значение равно 1.
balance — стереобаланс между правой и левой колонками компьютера, возможный диапазон значений от -10000 до 10000. Так, например значение -10000 переведёт весь звук на лёвую колонку компьютера при этом из правой колонки будет доносится лишь тишина.. Значение по умолчанию равно 0 т.е. распределять звук равномерно между левой и правой колонками.
volume — громкость можно определить значениями в диапазоне от -10000 до 0, где ноль это максимальная громкость, а -10000 минимальная. Значение 0 стоит по умолчанию.
Вот собственно и всё.. а теперь внимательно читаем полезные советы..
Полезные советы:
Использование фоновой музыки, это не есть хорошо по нескольким причинам:
Во-первых, мало кому из пользователей нравится, когда против его воли из динамиков начинает доноситься то, что он не заказывал! К тому же лазая в Интернете, у него может играть собственная музыка открытая с помощью какого ни будь плеера, может быть ему не нравится именно Ваше музыкальное сопровождение и он предпочитает классику вместо тяжёлого рока, может быть вокруг все спят да и просто он хочет поработать в тишине..
Во-вторых, пользователю не предоставляется возможности управлять данной музыкой, проще говоря, нет кнопок «Стоп» «Пауза» «Плей» и т.д.
В-третьих, музыкальные записи в форматах WAV, AU и MIDI , как правило, низкого качества, кому нравится слушать некачественную музыку?
В-четвёртых, несмотря на то, что указанные выше форматы, как правило, сравнительно небольшого объёма памяти — это всё же трафик, а любой лишний трафик это плохо.
Ну и в-пятых, как уже говорилось раннее тег <bgsound> это придумка для браузера Internet Explorer так что в большинстве других браузеров музыка играть не будет! Кроме того, так как данный тег не входит в спецификацию HTML, то документ с этим тегом будет не валидным.
Если уж Вам действительно так необходима музыка на сайте, то внедряйте её с помощью тегов <embed> и/или <object> .. о данных тегах я постараюсь Вам рассказать в пока что ещё ненаписанной главе «объекты».
HTML — Урок 13. Музыка в html
На web-страницу можно интегрировать фоновую музыку. Когда пользователь будет попадать на эту страницу, будет проигрываться мелодия, конечно, если у пользователя есть колонки или наушники.
Для этого нужен аудифайл в одном из форматов: WAV, AU, MIDI. Для примера можете взять такой файл в папке C:\WINDOWS\Media или скачать мелодию с сайта http://midi.bun.ru.
Положите этот файл в тот же каталог, где лежат ваши html-страницы. Теперь в код любой страницы (в теги body)добавьте следующий тег:
Теперь при просмотре этой страницы всегда будет присутствовать фоновая музыка. Рассмотрим параметры тега <bgsound>:
-
src — адрес звукового файла
Стоит ли задавать странице фоновую музыку решать вам, но хотелось бы привести несколько доводов, почему от этого лучше воздержаться:
Чаще всего у пользователя уже играет его любимая композиция или, наоборот, он сидит в тишине (может вокруг все спят) и вдруг начинает «петь» страница. Причем отключить фоновый звук пользователь не может. Что он сделает? Немедленно покинет вашу страницу и больше не вернется.
Качественный звуковой файл вы добавить не сможете (он слишком большого объема), а файлы в форматах wav, au и midi качеством не отличаются. Зачем же заставлять пользователя слушать не очень хорошую музыку, когда у него под рукой, скорее всего, есть выбор музыки отличного качества.
Наконец, каким бы маленьким не был звуковой файл, он съедает время на загрузку и часть трафика, а полезной информации не несет. Так стоит ли? Прежде, чем размещать фоновую мелодию подумайте об этом.
Подключаемые модули позволяют управлять проигрыванием звуковых файлов.
Здесь тоже не все просто. Когда мы встраиваем в html-страницу какой-либо объект, браузер пытается отобразить его самостоятельно. Если это простой объект (текст или рисунок), то браузер это сделает без посторонней помощи. Если объект незнакомый, то браузер попробует прибегнуть к помощи внешней программы или встроенного в браузер программного модуля (плагина), которые и отобразят этот объект. Если же нужного приложения браузер не найдет, то появится сообщение о том, где его можно скачать и как установить (в большинстве случаев, но не всегда).
А по статистике лишь 5% людей станут устанавливать себе дополнительные модули, остальные 95% просто уйдут со страницы.
Для примера всего вышеизложенного создадим html-страницу со следующим кодом:
Как вставить музыку на сайте
Музыка на сайте — это скорее редкость, чем норма. Вставляя музыку на сайт, нужно понимать, что некоторых пользователей она может и вовсе оттолкнуть. В этой статье мы рассмотрим несколько вариантов вставки музыки на сайт, а также рассмотрим как сделать фоновую музыку.
Как вставить фоновую музыку на сайт
Вставка фоновой музыки на сайт самый опасный вариант в плане потери посетителей. Потому что фоновою музыку мало того, что нельзя никак выключить, так к тому же и громкость ее никак не регулируется (все зависит от текущей громкости на компьютере). Так что надо сто раз подумать, прежде чем вставлять фоновую музыку.
Есть два способа для вставки музыки в html
Вариант 1. Через html тег <bgsound>
У тега <bgsound> есть несколько атрибутов:
- loop=»значение» — количество повторений музыки (если -1, то повторяется бесконечно)
- balance=»значение» — стереобаланс (от -10000 до 10000)
- volume=»значение» — громкость (0 максимум, -10000 минимум)
Музыка будет играть автоматически при загрузке страницы.
Вариант 2. Через тег <embed>
У тега <embed> возможно использование следующих атрибутов:
- width=»значение» — ширина (в пикселях или процентах)
- height=»значение» — высота (в пикселях или процентах)
- align=»значение» — выравнивание ( left — слева, right — справа, center — по центру)
- hidden=»значение» — видимость панели ( true — скрыть, false — показывать), по умолчанию панель видна
- autostart=»значение» — проигрывать музыку при загрузке ( true — да, false — нет)
- loop=»значение» — значение true — проигрывать по кругу, false — один раз
У каждого браузера штатный проигрыватель будет выглядеть по разному, поэтому рассматривать каждый из них в отдельности мы не будем.
В html5 можно использовать тег <audio>
Смысл использования тега <audio> вызывает сомнения, поскольку до сих пор у старых браузеров отсутствует поддержка html5.
Синтаксис тег <audio>
Следующие атрибуты можно использовать:
- autoplay=»значение» — включить музыку сразу при загрузке страницы
- controls=»значение» — отображать панель управления плеера в браузере
- loop=»значение» — отвечает за цикличность
- preload=»значение» — загружать музыку сразу с загрузкой страницы
Рассмотренные варианты на мой взгляд не являются идеальными решениями, поскольку все базируются на штатных проигрывателях. У каждого браузера будет свой штатный проигрыватель по умолчанию, а в каких-то он вообще может не работать. Поэтому лучше всего скачать плеер к себе на сайт и уже с него загружать музыку. У такого плеера будет функции остановки, настройки громкости и т.п. — весь необходимый набор для простого пользователя.