Как добавить музыку на сайт HTML?
Музыка и звуки на HTML-странице
Звук и музыка в HTML5:
Несколько разных форматов объединяются в один audio:
Атрибуты тега audio:
- autoplay — автоматически запустить воспроизведение
- loop — зациклить воспроизведение
- controls — Отображение элементов управления
- preload — буфферизация:
- none — если вы не хотите использовать буфер файлов;
- auto — если вы хотите, чтобы браузер беферизировал файл целиком;
- metadata — для загрузки лишь служебной информации (продолжительность звучания и др.).
Свойства тега audio:
- currentTime — позиция курсора проигрывателя, double (секунды)
- duration — длительность воспроизведения, double (секунды); только чтение
- muted — заглушен ли звук, boolean
- paused — остановлено ли воспроизведение, boolean
- volume — уровень громкости, double (от 0 до 1)
- played — были ли воспроизведены интервалы полностью, возвращает объект TimeRanges
- seekable — интервалы, которые готовы для немедленного воспроизведения, возвращает объект TimeRanges
- buffered — возвращает объект TimeRanges буферизованного файла
События тега audio:
- durationchange — Обновлён атрибут duration
- ended — Воспроизведение остановлено по достижению конца
- pause — Воспроизведение было остановлено (обратите внимание на отсутствие события stop)
- play — Файл начал проигрываться
- timeupdate — Текущая позиция воспроизведения изменилась (обычно каждые 250 мс)
- volumechange — Значение изменилось
- canplay — Файл может быть воспроизведен, но, возможно, потребуется пауза, пока он загружается.
- canplaythrough — При имеющемся темпе скачивания предполагается, что файл может быть проигран от начала до конца без перерыва.
- progress — Браузер показывает состояние проигрывания (обычно каждые 250 мс)
Объект TimeRanges
Содержит данные о частях буферизованных участков медиафайла (один или более — сколько успело буферизоваться) и имеет свойства:
- length — число интервалов,
- start(index) — начальное время указанного интервала,
- end(index) — конечное время указанного интервала (отсчитывается от начала воспроизведения).
Управление воспроизведением через JavaScript
Для создания объекта audio в javascript используется:
Чтобы определить, поддерживается ли данный формат файла в браузере используйте .canPlayType:
canPlayType возвращает одно из 3 значений: 1) probably, 2) maybe, или 3) «» (пустая строка).
Как вариант, объект создаётся полностью на Javascript. var audio = new Audio();
Старый формат вставки музыки:
Netscape: Internet Explorer: Пример:
Поддерживаемые форматы: Ogg Vorbis, WAV PCM, MP3, AAC, Speex (зависит от конкретного браузера).Подробнее на Wiki: Audio format support
htmlweb.ru
Урок 14. Как вставить аудио или музыку на сайт в html
1. Как вставить аудио (музыку) на сайт в html
2. Как установить фоновую музыку в html
Как вставить аудио (музыку) на сайт в html
Данный вопрос встречается очень часто, поэтому я решил ещё в уроках посвятить ему отдельную статью. Поскольку для проигрывания аудио универсальной технологии для всех браузеров у HTML нет, то для решения этой проблемы предлагаю скачать файл аудио проигрывателя, как и делается на большинстве сайтов. Делаем всё по шагам:
1. На хостинге, где и располагается Ваш сайт, в корневом каталоге (папке, где индексный файл), соpдайте папку audio. В неё в дальнейшем будете помещать все аудио файлы.
2. Далее нужно скачать файлы плеера .
3. Теперь выберите нужные файлы, лучше в формате mp3. Создайте папку audio в корне сайта и закачайте их.
4. Остаётся только вставить код подключения плеера. Он подойдёт для любого сайта В нужном месте следует только указать путь к файлу плеера и аудио файлу, соответственно заменив слова ваш_домен и название_аудио_файла:
И всё готово! Можете посмотреть и работу примера.
Как установить фоновую музыку в html
Использую возможности HTML и браузера, можно также вставить на страницу фоновую музыку. Вам понадобится аудио файл нужного формата: WAV, AU, MIDI или MP3. Можете в качестве примера использовать любой файл с указанным расширением.
Первый способ — это тег embed. Элемент embed используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.), которые исходно браузер не понимает.
Синтаксис довольно-таки прост:
Закрывающий тег не требуется.
Теперь смотрим пример записи с атрибутами, а ниже с их расшифровкой:
Атрибуты тега embed для проигрывания аудио в html
width — ширина панели в пикселях (или процентах)
height — высота панели в пикселях (или процентах)
align — расположение панели относительно текста, возможные значения left, right, center
hidden — позволяет скрыть панель, значения аттрибута: true — панель скрыта, false — панель видима (значение по умолчанию)
autostart — значение true — проигрыватель стартует автоматически при загрузке страницы, false — ждет нажатия на кнопку воспроизведение
loop — цикл, true — трэк проигрываться по кругу, а при значении false — только один раз
| Если значением будет число, то Mozilla Firefox проиграет мелодию указанное количество раз, для Explorer’а числовое значение равносильно значению true. |
Второй способ. Очень старый, но тоже практичный) Добавьте мелодию в ту же папку (директорию), где лежит Ваш файл, а в body пропишите следующий код:
В результате после загрузки страницы будет звучать указанная Вами в теге bgsound мелодия. Теперь рассмотрим лучше атрибуты тега :
src — путь к Вашему аудиофайлу
loop — сколько раз мелодию повторить ( если -1, то повторяется бесконечно)
balance — значение стереобаланса (от -10000 до 10000)
volume — громкость проигрывания мелодии, где 0 максимум, а -10000 минимум.
Однако не будет возможности как-либо контролировать проигрыватель — при каждом обновлении страницы трек будет проигрываться заново.
После описания метода вставки фоновой музыки хочу Вас от этого отговорить, так как большинство пользователей в момент посещения различных сайтов уже, как правило, слушают музыку. Поэтому попутное музыкальное сопровождение может его только заставить закрыть вкладку с сайтом.
Вставка аудио и музыки в HTML5 — тег audio
audio — парный тег, определяющий фоновый звук, музыку или другой аудио поток на сайте.
| Для каждого браузера проигрыватель и панель управления может отличаться. Для некоторых браузеров, например FF, нужно загружать ogg-файл, для остальных mp3. |
Атрибуты тега audio
autoplay— файл проигрывается сразу при загрузке страницы (аналогично фоновой музыке bgsound)
controls — отобразить панель управления плеера в браузере
loop — проигрывает файл заново после его окончания
preload — загрузка аудио файла произойдёт вместе с загрузкой страницы
src — путь к аудио файлу (mp3 или ogg)
Пример кода с тегом audio
Теперь смотрим работу тега audio в Вашем браузере:
Спасибо за внимание! В следующем уроке рассмотрим вставку видео!)
tradebenefit.ru
Как вставить на сайт аудио файл (музыку) с помощью HTML5
Здравствуйте, дорогие читатели блога. Не удивительно, что в последнее время медийные сайты становятся всё более популярными. На таких сайтах очень интересно находится, например можно посмотреть какое нибудь видео или же послушать отличную музыку. Но в этот раз мы будем с Вами слушать музыку, а именно научимся вставлять аудио файлы на наш сайт с помощью HTML5.
Как оказывается, что HTML5 поддерживает аудио теги, и таким образом музыку вставить на сайт очень просто. Правда, что не все старые браузеры воспроизводят аудио файл, но все современные браузеры это делают на ура.
Поддержка браузеров
Например: IE9+ поддерживает только mp3 файлы, но не поддерживает wav и ogg.
Chrome после 6 версии поддерживает практически все форматы.
Opera 10+ не поддерживает mp3, честно, мне кажется что это её очень большой недостаток, такой популярный формат и не поддерживает. Но с wav и ogg справляется отлично.
С браузером Firefox та же самая история, что и с Оперой. За это ей огромный и жирный минус.
Safari поддерживает все форматы аудио кроме ogg.
Добавление аудио файла на сайт
Как видите, что тут добавлено сразу 3 файла, таким образом если какой то браузер не поддерживает mp3 он автоматически воспроизведёт тот формат который поддерживает и так далее.
Но мы же добрые люди 🙂 И если пользователь не сможет прослушать музыку, мы дадим её ему скачать. Для этого Вам нужно добавить просто ссылки на файлы. Таким образом у нас получится следующий код:
Таким образом пользователь сможет скачать файл 🙂
Друзья, а вот пример наших трудов. Простой проигрыватель браузер подставляет сам.
Вот и всё, дорогие друзья. Если у Вас возникнут вопросы или трудности спрашивайте в комментариях. До скорых встреч.
beloweb.ru
Как вставить музыку на сайте
Музыка на сайте — это скорее редкость, чем норма. Вставляя музыку на сайт, нужно понимать, что некоторых пользователей она может и вовсе оттолкнуть. В этой статье мы рассмотрим несколько вариантов вставки музыки на сайт, а также рассмотрим как сделать фоновую музыку.
Как вставить фоновую музыку на сайт
Вставка фоновой музыки на сайт самый опасный вариант в плане потери посетителей. Потому что фоновою музыку мало того, что нельзя никак выключить, так к тому же и громкость ее никак не регулируется (все зависит от текущей громкости на компьютере). Так что надо сто раз подумать, прежде чем вставлять фоновую музыку.
Есть два способа для вставки музыки в html
Вариант 1. Через html тег
У тега есть несколько атрибутов:
- loop=»значение» — количество повторений музыки (если -1, то повторяется бесконечно)
- balance=»значение» — стереобаланс (от -10000 до 10000)
- volume=»значение» — громкость (0 максимум, -10000 минимум)
Музыка будет играть автоматически при загрузке страницы.
Вариант 2. Через тег
У тега возможно использование следующих атрибутов:
- w — ширина (в пикселях или процентах)
- height=»значение» — высота (в пикселях или процентах)
- align=»значение» — выравнивание ( left — слева, right — справа, center — по центру)
- h — видимость панели ( true — скрыть, false — показывать), по умолчанию панель видна
- autostart=»значение» — проигрывать музыку при загрузке ( true — да, false — нет)
- loop=»значение» — значение true — проигрывать по кругу, false — один раз
У каждого браузера штатный проигрыватель будет выглядеть по разному, поэтому рассматривать каждый из них в отдельности мы не будем.
В html5 можно использовать тег
Следующие атрибуты можно использовать:
- autoplay=»значение» — включить музыку сразу при загрузке страницы
- controls=»значение» — отображать панель управления плеера в браузере
- loop=»значение» — отвечает за цикличность
- preload=»значение» — загружать музыку сразу с загрузкой страницы
Рассмотренные варианты на мой взгляд не являются идеальными решениями, поскольку все базируются на штатных проигрывателях. У каждого браузера будет свой штатный проигрыватель по умолчанию, а в каких-то он вообще может не работать. Поэтому лучше всего скачать плеер к себе на сайт и уже с него загружать музыку. У такого плеера будет функции остановки, настройки громкости и т.п. — весь необходимый набор для простого пользователя.
zarabotat-na-sajte.ru
Как добавить музыку на сайт HTML?
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, WordPress, Bootstrap
HTML
CSS
PHP
WordPress
Bootstrap
Автор
Как сделать фоновую музыку на сайте – HTML и HTML5
Всем привет!
Сегодня я расскажу, как сделать фоновую музыку на сайте используя HTML.
Это совершенно не сложно и не нужно быть гуру, чтобы создать такой эффект на сайте.
Стоит вопрос, а нужно ли это для вашего сайта? Может, вашим пользователям или читателям этот эффект будет мешать? Или даже раздражать? Ведь, если у вас, например, обучающий сайт, то музыка будет отвлекать. Если вы делаете сайт для какой-то музыкальной группы или певца, возможно, этот эффект будет классным и в тему.
Фоновая музыка на HTML5
Чтобы сделать на странице сайта фоновую музыку, достаточно воспользоваться тегом .
* Закрывающий тег обязателен.
- « autoplay » определяет воспроизведение музыкального файла сразу же после загрузки страницы.
- « autobuffer » используется в паре с « autoplay » – определяет воспроизведение музыкального файла уже в момент загрузки страницы.
- « src » – путь к звуковому файлу.
- « controls » показывает панель управления плеером.
Фоновая музыка на HTML ( этот способ не рекомендую )
Чтобы сделать на странице сайта фоновую музыку, достаточно воспользоваться тегом .
Закрывающий тег не нужен.
Тег размещается между тегами .
- « Balance » — управляет балансом звука между правой и левой колонками.
Если в значении указать « -10 000 », мелодия будет играть в левой колонке.
Если в значении указать « 10 000 », мелодия будет играть в правой колонке.
Если в значении указать « 0 », мелодия будет играть равномерно в обеих колонках.
- « loop » — устанавливает, сколько раз проигрывать музыкальный файл. Значение по умолчанию « -1 » бесконечный повтор.
- « src » — путь к музыкальному файлу.
- « volume » — громкость музыки. Значение « -10 000 » – минимальная громкость, а значение « 0 » – по умолчанию соответствует текущей громкости воспроизведения.
stepkinblog.ru
HTML5 audio
В прошлой статье Проигрыватель видео HTML5 мы уже говорили об использовании HTML5 и почему это актуально на сегодняшний день. Теперь остановимся более подробно на вопросе «Как вставить аудио на сайт с помощью HTML5».
Добавить музыку на сайт можно с помощью тега audio. Пример простейшей реализации этого тега:
Но опять же, как и в случае с видео, не всё так просто. Не все браузеры поддерживают нужные аудио-кодеки. Взглянем на таблицу:
Атрибуты тега AUDIO
К основным атрибутам тега audio относятся:
- src — путь к аудиофайлу (может задаваться отдельно с помощью вложенного тега source);
- controls — отображается панель управления аудио (play, pause, volume и т.д.);
- autoplay — воспроизводит аудиофайл сразу после загрузки веб-страницы;
- loop — циклическое воспроизведение;
Вложенный тег source может иметь следующие атрибуты:
- src — путь к аудиофайлу;
- type — тип аудио-источника;
- media — тип устройства, на котором будет проигрываться аудиофайл (all — на всех устройствах, tv — телевизор и т.д.);
nubex.ru
Вставить музыку на сайт HTML, JavaScript, jQuery, AJAX способы:
Создание аудио проигрывателя музыки на сайте или плеера
Технология проста, создается файл проигрывателя, чтобы он не нагружал сайт или сервер выбираем технологию которую будем использовать: JavaScript, jQuery, AJAX. На основе выбранной технологии разрабатываем скрипт для нашего сайта и вставляем на сайт. Скрипт создается в зависимости от того, что Вам нужно: автоматическое воспроизведение фоновой музыки на сайте или управляемый посетителем плеер. Далее создаем папку в корне сайта для музыки и загружаем в нее аудио файлы.
Или как альтернативный сопсоб можно создать плеер по флеш-технологии (Flash), такой плеер будет смотреться более эффектно. Правда выйдет дороже и тяжелее для сайта (повысит время загрузки страниц сайта).
Установка музыки на сайт с помощью HTML
Используя возможности HTML и браузера можно вставить на сайт плеер или фоновую музыку. Технология так же проста: создается HTML5 код с тегом «audio» и этот код прописывается в сайт, а когда пользователь заходит на сайт он видит минимизированный плеер, посетитель нажимает кнопку плэй или автоматически начинает играть фоновая музыка. Вид плеера будет зависеть от браузера с которого зашел посетитель, но функциональность останется стандартной: кнопки Play, Stop, Next, Prev, Volume. Выглядит плеер с HTML кодом вот так:
Cам код для вставки выглядит так:
Как вы могли заметить команда «controls autoplay» включает автопроигрывание музыки как только посетитель заходит на сайт.
Альтернативный вариант HTML кода это тег «bgsound», это вообще не использовать визуальный плеер, при посещении сайта начнет играть музыка на сайте, но регулировать громкость, поставить на паузу и т.д. пользователь не сможет. Настройка громкости воспроизведения звукового файла настраивается в самом коде.
Форматы звуковых файлов для проигрывания музыки на сайте могут быть: WAV, AU, MIDI, MP3, OGG (расширения). Музыкальные файлы загружаются на сайт, либо используются ссылки на те сайты, где располагается звуковой файл, главное, чтобы он находился в открытом доступе.
kell4.ru
HTML — Урок 13. Музыка в html
Фоновая музыка в html
На web-страницу можно интегрировать фоновую музыку. Когда пользователь будет попадать на эту страницу, будет проигрываться мелодия, конечно, если у пользователя есть колонки или наушники.
Для этого нужен аудифайл в одном из форматов: WAV, AU, M >http://midi.bun.ru.
Положите этот файл в тот же каталог, где лежат ваши html-страницы. Теперь в код любой страницы (в теги body)добавьте следующий тег:
Теперь при просмотре этой страницы всегда будет присутствовать фоновая музыка. Рассмотрим параметры тега :
src — адрес звукового файла
loop — число повторов мелодии (если равно -1, то повторяется бесконечно)
balance — стереобаланс (значения от -10000 до 10000)
volume — громкость, максимальное значение = 0 (возможные значения от -10000 до 0)
Стоит ли задавать странице фоновую музыку решать вам, но хотелось бы привести несколько доводов, почему от этого лучше воздержаться:
Чаще всего у пользователя уже играет его любимая композиция или, наоборот, он сидит в тишине (может вокруг все спят) и вдруг начинает «петь» страница. Причем отключить фоновый звук пользователь не может. Что он сделает? Немедленно покинет вашу страницу и больше не вернется.
Качественный звуковой файл вы добавить не сможете (он слишком большого объема), а файлы в форматах wav, au и midi качеством не отличаются. Зачем же заставлять пользователя слушать не очень хорошую музыку, когда у него под рукой, скорее всего, есть выбор музыки отличного качества.
Наконец, каким бы маленьким не был звуковой файл, он съедает время на загрузку и часть трафика, а полезной информации не несет. Так стоит ли? Прежде, чем размещать фоновую мелодию подумайте об этом.
Подключаемые модули позволяют управлять проигрыванием звуковых файлов.
Здесь тоже не все просто. Когда мы встраиваем в html-страницу какой-либо объект, браузер пытается отобразить его самостоятельно. Если это простой объект (текст или рисунок), то браузер это сделает без посторонней помощи. Если объект незнакомый, то браузер попробует прибегнуть к помощи внешней программы или встроенного в браузер программного модуля (плагина), которые и отобразят этот объект. Если же нужного приложения браузер не найдет, то появится сообщение о том, где его можно скачать и как установить (в большинстве случаев, но не всегда).
А по статистике лишь 5% людей станут устанавливать себе дополнительные модули, остальные 95% просто уйдут со страницы.
Для примера всего вышеизложенного создадим html-страницу со следующим кодом:
www.site-do.ru
Создание сайта
Как вставить свою музыку и видео на сайт
Примеры сайтов
Управление сайтом
Анимация на сайте
Программирование
Если фоновая музыка вам мешает,выключите через кнопку проигрывателя,если кнопки нет,уберите громкость или перезагрузите страницу.
Вы наверное встречали сайты при открытии которых автоматически начинает играть фоновая музыка.Наверное и вы захотите использовать ее в какой-нибудь странице на сайте.Да,выглядит это эффектно,но уже через секунду начинаешь понимать что это лишнее.Такой вариант оформления страницы применяется редко и то в случае крайней необходимости,так как большинство пользователей ее игнорирует, а многих она вообще раздражает.
Музыка начинает звучать сразу после открытия страницы,у многих проигрывателей нет даже кнопки ее отключить,а еще чаще проигрывателя вообще не видно.К тому же для фоновой музыки нет универсального проигрывателя для всех браузеров.В России больше всего используются четыре браузера — Opera,Mozilla Firefox,Internet Explorer,Google.
Проигрыватель который будет играть фоновую музыку например в Opera,будет молчать например в Mozilla Firefox,или в других браузерах и наоборот.Даже если вы напишите код проигрывателя для всех браузеров,все равно не факт что он будет проигрываться у всех пользователей,зашедших на вашу страницу с фоновой музыкой.Браузеры могут не иметь у себя необходимых плагинов,может быть отключен JavaScript,если проигрыватель у вас написан с его помощью,да и вообще браузер не настроен на это.
Так что советую вообще не использовать этот вариант оформления вашей страницы,потому что если код с проигрывателем, и по каким-то причинам он не загрузится,то на странице будет пустое место,что портит дизайн вашего сайта.Но среди вебмастеров наверняка найдется тот,который все равно захочет чтобы у него проигрывалась фоновая музыка.
src — адрес звукового файла loop — число повторов мелодии (если равно -1, то повторяется бесконечно) balance — стереобаланс (значения от -10000 до 10000) volume — громкость, максимальное значение = 0 (возможные значения от -10000 до 0)
balance — стереобаланс (значения от -10000 до 10000)
volume — громкость, максимальное значение = 0 (возможные значения от -10000 до 0)
loop — число повторов мелодии (если равно -1, то повторяется бесконечно)
Можно вставить фоновую музыку на ваш сайт HTML с помощью контейнера audio,для всех браузеров кроме Internet Explorer.При вводе в код проигрывателя элемента управления controls, в проигрывателе будут видны кнопки управления «Play», «Пауза»,без controls кнопки не будут отображаться.
Если вы видите это сообщение ,значит ваш браузер не поддерживает элемент audio.
Код этого проигрывателя.
Если ввести в код autoplay=»autoplay,то музыка будет играть сразу ,как откроется страница.
можете вставить свой текст.
Попробуйте вариант проигрывания, когда посетитель вашего сайта нажимает на ссылку.В этом случае музыка должна быть в формате «WAV» и «Midi».Напишите обычную ссылку в HTML,замените вместо имя свой файл.
Этот вариант работает в IE с кнопками управления ,в других браузерах проигрыватель невидим,но музыка играет и если у вас Google,Opera,Mozilla, то лучше зту ссылку не включать ,и если вы захотите выключить музыку то вам придется покинуть страницу ,или придется уменьшить громкость.
А это еще один вариант проигрывания музыки на сайте.Он работает в Internet Explorer и Google Chrome.Здесь есть панель управления,кнопка включения/выключения. Если у вас не установлены плагины в Mozilla Firefox музыка проигрываться не будет.Если в Opera у вас вместо проигрывателя написано что нет плагина,щелкните по надписи, в открывшемся окошке нажмите кнопку «Открыть содержимое»,затем еще раз в другом окне «Открыть» и вы сможете прослушать музыку.
sitesaid.ru
Поделиться:
Добавить комментарий
×
Рекомендуем посмотреть
Adblock
detector
Блог посвящен: HTML, CSS, PHP, WordPress, Bootstrap
Сегодня я расскажу, как сделать фоновую музыку на сайте используя HTML.
Это совершенно не сложно и не нужно быть гуру, чтобы создать такой эффект на сайте.
Стоит вопрос, а нужно ли это для вашего сайта? Может, вашим пользователям или читателям этот эффект будет мешать? Или даже раздражать? Ведь, если у вас, например, обучающий сайт, то музыка будет отвлекать. Если вы делаете сайт для какой-то музыкальной группы или певца, возможно, этот эффект будет классным и в тему.
Если в значении указать « -10 000 », мелодия будет играть в левой колонке.
Если в значении указать « 10 000 », мелодия будет играть в правой колонке.
Если в значении указать « 0 », мелодия будет играть равномерно в обеих колонках.
К основным атрибутам тега audio относятся:
- src — путь к аудиофайлу (может задаваться отдельно с помощью вложенного тега source);
- controls — отображается панель управления аудио (play, pause, volume и т.д.);
- autoplay — воспроизводит аудиофайл сразу после загрузки веб-страницы;
- loop — циклическое воспроизведение;
Вложенный тег source может иметь следующие атрибуты:
- src — путь к аудиофайлу;
- type — тип аудио-источника;
- media — тип устройства, на котором будет проигрываться аудиофайл (all — на всех устройствах, tv — телевизор и т.д.);
nubex.ru
Вставить музыку на сайт HTML, JavaScript, jQuery, AJAX способы:
Создание аудио проигрывателя музыки на сайте или плеера
Технология проста, создается файл проигрывателя, чтобы он не нагружал сайт или сервер выбираем технологию которую будем использовать: JavaScript, jQuery, AJAX. На основе выбранной технологии разрабатываем скрипт для нашего сайта и вставляем на сайт. Скрипт создается в зависимости от того, что Вам нужно: автоматическое воспроизведение фоновой музыки на сайте или управляемый посетителем плеер. Далее создаем папку в корне сайта для музыки и загружаем в нее аудио файлы.
Или как альтернативный сопсоб можно создать плеер по флеш-технологии (Flash), такой плеер будет смотреться более эффектно. Правда выйдет дороже и тяжелее для сайта (повысит время загрузки страниц сайта).
Установка музыки на сайт с помощью HTML
Используя возможности HTML и браузера можно вставить на сайт плеер или фоновую музыку. Технология так же проста: создается HTML5 код с тегом «audio» и этот код прописывается в сайт, а когда пользователь заходит на сайт он видит минимизированный плеер, посетитель нажимает кнопку плэй или автоматически начинает играть фоновая музыка. Вид плеера будет зависеть от браузера с которого зашел посетитель, но функциональность останется стандартной: кнопки Play, Stop, Next, Prev, Volume. Выглядит плеер с HTML кодом вот так:
Cам код для вставки выглядит так:
Как вы могли заметить команда «controls autoplay» включает автопроигрывание музыки как только посетитель заходит на сайт.
Альтернативный вариант HTML кода это тег «bgsound», это вообще не использовать визуальный плеер, при посещении сайта начнет играть музыка на сайте, но регулировать громкость, поставить на паузу и т.д. пользователь не сможет. Настройка громкости воспроизведения звукового файла настраивается в самом коде.
Форматы звуковых файлов для проигрывания музыки на сайте могут быть: WAV, AU, MIDI, MP3, OGG (расширения). Музыкальные файлы загружаются на сайт, либо используются ссылки на те сайты, где располагается звуковой файл, главное, чтобы он находился в открытом доступе.
kell4.ru
HTML — Урок 13. Музыка в html
Фоновая музыка в html
На web-страницу можно интегрировать фоновую музыку. Когда пользователь будет попадать на эту страницу, будет проигрываться мелодия, конечно, если у пользователя есть колонки или наушники.
Для этого нужен аудифайл в одном из форматов: WAV, AU, M >http://midi.bun.ru.
Положите этот файл в тот же каталог, где лежат ваши html-страницы. Теперь в код любой страницы (в теги body)добавьте следующий тег:
Теперь при просмотре этой страницы всегда будет присутствовать фоновая музыка. Рассмотрим параметры тега :
-
src — адрес звукового файла
loop — число повторов мелодии (если равно -1, то повторяется бесконечно)
balance — стереобаланс (значения от -10000 до 10000)
volume — громкость, максимальное значение = 0 (возможные значения от -10000 до 0)
Стоит ли задавать странице фоновую музыку решать вам, но хотелось бы привести несколько доводов, почему от этого лучше воздержаться:
Чаще всего у пользователя уже играет его любимая композиция или, наоборот, он сидит в тишине (может вокруг все спят) и вдруг начинает «петь» страница. Причем отключить фоновый звук пользователь не может. Что он сделает? Немедленно покинет вашу страницу и больше не вернется.
Качественный звуковой файл вы добавить не сможете (он слишком большого объема), а файлы в форматах wav, au и midi качеством не отличаются. Зачем же заставлять пользователя слушать не очень хорошую музыку, когда у него под рукой, скорее всего, есть выбор музыки отличного качества.
Наконец, каким бы маленьким не был звуковой файл, он съедает время на загрузку и часть трафика, а полезной информации не несет. Так стоит ли? Прежде, чем размещать фоновую мелодию подумайте об этом.
Подключаемые модули позволяют управлять проигрыванием звуковых файлов.
Здесь тоже не все просто. Когда мы встраиваем в html-страницу какой-либо объект, браузер пытается отобразить его самостоятельно. Если это простой объект (текст или рисунок), то браузер это сделает без посторонней помощи. Если объект незнакомый, то браузер попробует прибегнуть к помощи внешней программы или встроенного в браузер программного модуля (плагина), которые и отобразят этот объект. Если же нужного приложения браузер не найдет, то появится сообщение о том, где его можно скачать и как установить (в большинстве случаев, но не всегда).
А по статистике лишь 5% людей станут устанавливать себе дополнительные модули, остальные 95% просто уйдут со страницы.
Для примера всего вышеизложенного создадим html-страницу со следующим кодом:
www.site-do.ru
Создание сайта
Как вставить свою музыку и видео на сайт
Примеры сайтов
Управление сайтом
Анимация на сайте
Программирование
Если фоновая музыка вам мешает,выключите через кнопку проигрывателя,если кнопки нет,уберите громкость или перезагрузите страницу.
Вы наверное встречали сайты при открытии которых автоматически начинает играть фоновая музыка.Наверное и вы захотите использовать ее в какой-нибудь странице на сайте.Да,выглядит это эффектно,но уже через секунду начинаешь понимать что это лишнее.Такой вариант оформления страницы применяется редко и то в случае крайней необходимости,так как большинство пользователей ее игнорирует, а многих она вообще раздражает.
Музыка начинает звучать сразу после открытия страницы,у многих проигрывателей нет даже кнопки ее отключить,а еще чаще проигрывателя вообще не видно.К тому же для фоновой музыки нет универсального проигрывателя для всех браузеров.В России больше всего используются четыре браузера — Opera,Mozilla Firefox,Internet Explorer,Google.
Проигрыватель который будет играть фоновую музыку например в Opera,будет молчать например в Mozilla Firefox,или в других браузерах и наоборот.Даже если вы напишите код проигрывателя для всех браузеров,все равно не факт что он будет проигрываться у всех пользователей,зашедших на вашу страницу с фоновой музыкой.Браузеры могут не иметь у себя необходимых плагинов,может быть отключен JavaScript,если проигрыватель у вас написан с его помощью,да и вообще браузер не настроен на это.
Так что советую вообще не использовать этот вариант оформления вашей страницы,потому что если код с проигрывателем, и по каким-то причинам он не загрузится,то на странице будет пустое место,что портит дизайн вашего сайта.Но среди вебмастеров наверняка найдется тот,который все равно захочет чтобы у него проигрывалась фоновая музыка.
src — адрес звукового файла loop — число повторов мелодии (если равно -1, то повторяется бесконечно) balance — стереобаланс (значения от -10000 до 10000) volume — громкость, максимальное значение = 0 (возможные значения от -10000 до 0)
balance — стереобаланс (значения от -10000 до 10000)
volume — громкость, максимальное значение = 0 (возможные значения от -10000 до 0)
loop — число повторов мелодии (если равно -1, то повторяется бесконечно)
Можно вставить фоновую музыку на ваш сайт HTML с помощью контейнера audio,для всех браузеров кроме Internet Explorer.При вводе в код проигрывателя элемента управления controls, в проигрывателе будут видны кнопки управления «Play», «Пауза»,без controls кнопки не будут отображаться.
Если вы видите это сообщение ,значит ваш браузер не поддерживает элемент audio.
Код этого проигрывателя.
Если ввести в код autoplay=»autoplay,то музыка будет играть сразу ,как откроется страница.
можете вставить свой текст.
Попробуйте вариант проигрывания, когда посетитель вашего сайта нажимает на ссылку.В этом случае музыка должна быть в формате «WAV» и «Midi».Напишите обычную ссылку в HTML,замените вместо имя свой файл.
Этот вариант работает в IE с кнопками управления ,в других браузерах проигрыватель невидим,но музыка играет и если у вас Google,Opera,Mozilla, то лучше зту ссылку не включать ,и если вы захотите выключить музыку то вам придется покинуть страницу ,или придется уменьшить громкость.
А это еще один вариант проигрывания музыки на сайте.Он работает в Internet Explorer и Google Chrome.Здесь есть панель управления,кнопка включения/выключения. Если у вас не установлены плагины в Mozilla Firefox музыка проигрываться не будет.Если в Opera у вас вместо проигрывателя написано что нет плагина,щелкните по надписи, в открывшемся окошке нажмите кнопку «Открыть содержимое»,затем еще раз в другом окне «Открыть» и вы сможете прослушать музыку.
sitesaid.ru
Добавить комментарий
detector