Как вставить музыку на сайт html – Как сделать музыку при входе на сайт 🚩 Музыка прив входе на сервер 🚩 Веб-дизайн

Содержание

Урок 14. Как вставить аудио или музыку на сайт в html


1. Как вставить аудио (музыку) на сайт в html
2. Как установить фоновую музыку в html

Как вставить аудио (музыку) на сайт в html


Данный вопрос встречается очень часто, поэтому я решил ещё в уроках посвятить ему отдельную статью. Поскольку для проигрывания аудио универсальной технологии для всех браузеров у HTML нет, то для решения этой проблемы предлагаю скачать файл аудио проигрывателя, как и делается на большинстве сайтов. Делаем всё по шагам:

1. На хостинге, где и располагается Ваш сайт, в корневом каталоге (папке, где индексный файл), соpдайте папку audio. В неё в дальнейшем будете помещать все аудио файлы.

2. Далее нужно скачать файлы плеера.

3. Теперь выберите нужные файлы, лучше в формате mp3. Создайте папку audio в корне сайта и закачайте их.

4. Остаётся только вставить код подключения плеера. Он подойдёт для любого сайта В нужном месте следует только указать путь к файлу плеера и аудио файлу, соответственно заменив слова

ваш_домен и название_аудио_файла:


<script language="JavaScript" src="http://ваш_домен/audio/audio-player.js"></script>
<object type="application/x-shockwave-flash" data="http://ваш_домен/audio/player.swf" id="audioplayer1" height="25" width="290">
<param name="movie" value="http://ваш_домен/audio/player.swf">
<param name="FlashVars" value="playerID=1&amp;soundFile=http://ваш_домен/audio/название_аудио_файла.mp3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>

И всё готово! Можете посмотреть и работу примера.Демонстрация

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


Использую возможности HTML и браузера, можно также вставить на страницу фоновую музыку. Вам понадобится аудио файл нужного формата: WAV, AU, MIDI или MP3. Можете в качестве примера использовать любой файл с указанным расширением.

Первый способ — это тег embed. Элемент embed используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.), которые исходно браузер не понимает.

Синтаксис довольно-таки прост:

<embed src="....mp3"></embed>

Закрывающий тег не требуется.

Теперь смотрим пример записи с атрибутами, а ниже с их расшифровкой:

<embed src="music.mp3" width="70" height="45" align="left" hidden="False" autostart="False" loop="True">

Атрибуты тега embed для проигрывания аудио в html
width — ширина панели в пикселях (или процентах)
height — высота панели в пикселях (или процентах)
align — расположение панели относительно текста, возможные значения left, right, center
hidden — позволяет скрыть панель, значения аттрибута: true — панель скрыта, false — панель видима (значение по умолчанию)

autostart — значение true — проигрыватель стартует автоматически при загрузке страницы, false — ждет нажатия на кнопку воспроизведение
loop — цикл, true — трэк проигрываться по кругу, а при значении false — только один раз

Если значением будет число, то Mozilla Firefox проиграет мелодию указанное количество раз, для Explorer’а числовое значение равносильно значению true.

Второй способ. Очень старый, но тоже практичный) Добавьте мелодию в ту же папку (директорию), где лежит Ваш файл, а в body пропишите следующий код:

<bgsound src="Ваш трэк.mp3" loop="1"></bgsound>

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег audio</title>
 </head>
 <body>
  <p>Аудио в HTML 5</p>
  <audio controls>
    <source src="audio/music.ogg" type="audio/ogg; codecs=vorbis"  controls="controls">
    <source src="audio/music.mp3" type="audio/mpeg">
    Тег audio не поддерживается вашим браузером. 
    <a href="audio/music.mp3">Скачайте музыку</a>.
  </audio>
 </body>
</html>

Теперь смотрим работу тега audio в Вашем браузере:Демонстрация Скачать исходники

Спасибо за внимание! В следующем уроке рассмотрим вставку видео!)

Как вставить на сайт аудио файл (музыку) с помощью HTML5

Здравствуйте, дорогие читатели блога. Не удивительно, что в последнее время медийные сайты становятся всё более популярными. На таких сайтах очень интересно находится, например можно посмотреть какое нибудь видео или же послушать отличную музыку. Но в этот раз мы будем с Вами слушать музыку, а именно научимся вставлять аудио файлы на наш сайт с помощью HTML5.

Как оказывается, что HTML5 поддерживает аудио теги, и таким образом музыку вставить на сайт очень просто. Правда, что не все старые браузеры воспроизводят аудио файл, но все современные браузеры это делают на ура.

Демо

Поддержка браузеров

Все браузеры, которые поддерживают тег <audio> — это IE9+, Chrome, Opera, Safari и Firefox. А вот ту есть ещё один нюанс, не все браузеры поддерживают все форматы аудио.

Например: IE9+ поддерживает только mp3 файлы, но не поддерживает wav и ogg.

Chrome после 6 версии поддерживает практически все форматы.

Opera 10+ не поддерживает mp3, честно, мне кажется что это её очень большой недостаток, такой популярный формат и не поддерживает. Но с wav и ogg справляется отлично.

С браузером Firefox та же самая история, что и с Оперой. За это ей огромный и жирный минус.

Safari поддерживает все форматы аудио кроме ogg.

Добавление аудио файла на сайт

Чтобы добавить аудио файл на Ваш сайт нужно между тегами <audio controls> и </audio> указать прямую ссылку на файл. Ссылка указывается с помощью тега <SOURCE>. Вот как будет выглядеть готовый код:

<audio controls>
 <source src="/aud/music.mp3">
 <source src="/aud/music.ogg">
 <source src="/aud/music.wav">
 <p>Ваш браузер не поддерживает аудио</p>
 </audio>

Как видите, что тут добавлено сразу 3 файла, таким образом если какой то браузер не поддерживает mp3 он автоматически воспроизведёт тот формат который поддерживает и так далее.

А если браузер вообще не поддерживает тег <audio> то выскочит вот это сообщение «Ваш браузер не поддерживает аудио».

Но мы же добрые люди 🙂 И если пользователь не сможет прослушать музыку, мы дадим её ему скачать. Для этого Вам нужно добавить просто ссылки на файлы. Таким образом у нас получится следующий код:

<audio controls>
 <source src="/aud/music.mp3">
 <source src="/aud/music.ogg">
 <source src="/aud/music.wav">
 <p>Ваш браузер не поддерживает аудио</p>

<a href="/aud/music.mp3">Название</a>,
 <a href="/aud/music.ogg">Название</a>,
 <a href="/aud/music.wav">Название</a>

</audio>

Таким образом пользователь сможет скачать файл 🙂

Друзья, а вот пример наших трудов. Простой проигрыватель браузер подставляет сам.

Демо

Вот и всё, дорогие друзья. Если у Вас возникнут вопросы или трудности спрашивайте в комментариях. До скорых встреч.

Вставка видео и аудио в HTML, опции плеера

Цель урока: Как вставить видео и аудио в html, форматы файлов

Вставка аудио

Форматы аудио-файлов:

Для вставки аудио-плеера используется следующий код:

<audio controls="controls">
	<source src="song.ogg" type="audio/ogg">
	<source src="song.mp3" type="audio/mpeg">
</audio>

<audio controls=»controls»> <source src=»song.ogg» type=»audio/ogg»> <source src=»song.mp3″ type=»audio/mpeg»> </audio>

В браузере Google Chrome плеер будет выглядеть:

Атрибуты тега <audio> для плеера:

АтрибутЗначениеОписание
autoplayautoplayУказывает, что аудио должен начать играть, как только будет готов
controlscontrolsУказывает, что элементы управления воспроизведением должны отображаться
looploopУказывает, что аудио должно начаться снова, когда оно будет закончено
preloadauto
metadata
none
Определяет, должно ли аудио быть загруженным при загрузке страницы
srcurlУказывает адрес аудио для проигрывания
Другие возможности вставки аудио на сайт
  1. <a href="имя_файла.mp3">Щелкни </a>

    <a href=»имя_файла.mp3″>Щелкни </a>

  2. <bgsound src="04.wav" loop="5">

    <bgsound src=»04.wav» loop=»5″>

    *только для форматов: wav, mp3, aiff, wma

  3. <embed src="имя_файла.wav">

    <embed src=»имя_файла.wav»>

Вставка видео

Формат видео-файлов:

<video controls="controls" poster="logo.png">
	<source src="movie.mp4" type="video/mp4">
	<source src="movie.ogg" type="video/ogg">
Ваш браузер не поддерживает video.
</video>

<video controls=»controls» poster=»logo.png»> <source src=»movie.mp4″ type=»video/mp4″> <source src=»movie.ogg» type=»video/ogg»> Ваш браузер не поддерживает video. </video>

Результат в браузере:

Атрибуты тега <video> для плеера:

АтрибутЗначениеОписание
audiomutedОпределяет по умолчанию состояние звука. В настоящий момент только «muted» разрешено
autoplayautoplayЕсли указан, видео начнет играть сразу как только оно будет готово
controlscontrolsЕсли указан, кнопки управления будут показаны, такие как кнопка воспроизведения
heightпикселиУказывает высоту видео плеера
looploopЕсли указан, видео начнет проигрываться снова, как только закончится
posterurlУказывает URL изображения, представляющего видео
preloadauto
metadata
none
Если указан, видео будет загружено при загрузке страницы, и готово к запуску. Игнорируется, если «autoplay» указан
srcurlАдрес URL видео для проигрывания
widthпикселиУказывает ширину видео плеера

Пример:

<video src="04.avi" loop="loop" audio="muted">

<video src=»04.avi» loop=»loop» audio=»muted»>

Другой вариант вставки видео (без плеера):

<a href="имя_файла.avi">Щелкни и смотри</a>
<!-- Пример: -->
<a href="ocean.qt"> Видеоклип 1 Мб</a>

<a href=»имя_файла.avi»>Щелкни и смотри</a> <!— Пример: —> <a href=»ocean.qt»> Видеоклип 1 Мб</a>

* для форматов mpeg, avi

Фавикон Favicon

Фавиконка отображается в адресной строке браузера перед URL страницы, также Фавикон можно заметить во вкладке браузера страницы. Поисковые системы передают Favicon вместе с результатами поиска.

  • файлы с расширением .ico
  • размер 16×16 пикселей

Сервис для преобразования в ico-формат: http://image.online-convert.com/

<html>
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

<html> <head> <link rel=»icon» href=»favicon.ico» type=»image/x-icon»> </head>

Как сделать фоновую музыку на сайте – 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>

Предыдущая запись
Атрибут download в HTML5 (для скачивания файлов) Следующая запись
Подключение. Основы bootstrap 3 для начинающих. Урок №2

Вставить добавить аудио на сайт. Тег HTML5

В этой статье мы расскажем Вам как

вставить (добавить) аудио

файл на сайт. Сначала мы используем два флэш-плеера, а затем разместим аудио на сайте с помощью тега <audio> доступного в HTML5

Для примера, наш плеер, файл и скрипт находятся в папке PLAYER
Плеер 1
Пишем следующий код:

<script type="text/javascript" src="player/swfobject.js"></script>
<object type="application/x-shockwave-flash" data="player/player-a.swf">
<param name="movie" value="player/player-a.swf">
<!-- В этой строке меняем цвета у плеера,
также указываем проигрываемый файл -->
<param name="FlashVars" value="bg=0xf8f8f8&leftbg=0xeeeeee&lefticon=0x666666&rightbg=0x424141&rightbghover=0x636262&righticon=0x666666&righticonhover=0xffffff&text=0x666666&slider=0x666666&track=0xFFFFFF&border=0x666666&loader=0x9FFFB8&loop=no&playerID=1&soundFile=player/music.mp3">
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
</object>

Плеер 2
Пишем следующий код:
<script type="text/javascript" src="player/swfobject.js"></script>
<object type="application/x-shockwave-flash" data="player/player-b.swf">
<param name="movie" value="player/player-b.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<!--
В этой строке меняем цвета у плеера, также указываем проигрываемый файл
-->
<param name="FlashVars" value="mp3=player/music.mp3&width=250&showstop=1&showvolume=1&buttonwidth=22&sliderwidth=12&volumeheight=8&bgcolor1=f5f5f5&bgcolor2=cccccc&slidercolor1=888888&slidercolor2=#333333&sliderovercolor=333333&buttoncolor=666666&buttonovercolor=000000&textcolor=666666&autoplay=0" />
</object>

Плеер HTML5
Тег <audio> добавляет аудиозаписи на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>. Список поддерживаемых браузерами кодеков ограничен, поэтому лучше указывайте несколько аудио файлов.
<audio controls>
<source src="music.ogg" type="audio/ogg; codecs=vorbis">
<source src="music.mp3" type="audio/mpeg">
<source src="music.wav" type="audio/wav">
<source src="music.aac" type="audio/aac; codecs=vorbis">
</audio>

Для тега <audio> предусмотрено несколько атрибутов:
autoplay - звук начинает играть сразу после загрузки страницы;
controls - добавляет панель управления к аудиофайлу;
loop="loop" - повторение звукозаписи;
preload="none | metadata | auto" - загрузка аудиофайла вместе с загрузкой веб-страницы
none - файл не загружается;
metadat - загружается только служебная информация;
auto - файл загружается вместе с веб-страницей

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

Фоновая музыка на сайте

Если фоновая музыка вам мешает,выключите через кнопку проигрывателя,если кнопки нет,уберите громкость или перезагрузите страницу.

Вы наверное встречали сайты при открытии которых автоматически начинает играть фоновая музыка.Наверное и вы захотите использовать ее в какой-нибудь странице на сайте.Да,выглядит это эффектно,но уже через секунду начинаешь понимать что это лишнее.Такой вариант оформления страницы применяется редко и то в случае крайней необходимости,так как большинство пользователей ее игнорирует, а многих она вообще раздражает.

Музыка начинает звучать сразу после открытия страницы,у многих проигрывателей нет даже кнопки ее отключить,а еще чаще проигрывателя вообще не видно.К тому же для фоновой музыки нет универсального проигрывателя для всех браузеров.В России больше всего используются четыре браузера — Opera,Mozilla Firefox,Internet Explorer,Google.

Проигрыватель который будет играть фоновую музыку например в Opera,будет молчать например в Mozilla Firefox,или в других браузерах и наоборот.Даже если вы напишите код проигрывателя для всех браузеров,все равно не факт что он будет проигрываться у всех пользователей,зашедших на вашу страницу с фоновой музыкой.Браузеры могут не иметь у себя необходимых плагинов,может быть отключен JavaScript,если проигрыватель у вас написан с его помощью,да и вообще браузер не настроен на это.

Так что советую вообще не использовать этот вариант оформления вашей страницы,потому что если код с проигрывателем, и по каким-то причинам он не загрузится,то на странице будет пустое место,что портит дизайн вашего сайта.Но среди вебмастеров наверняка найдется тот,который все равно захочет чтобы у него проигрывалась фоновая музыка.

</bgsound>

<bgsound src=»name.mid» balance =»0″ volume=»500″ loop=»1″></bgsound>

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.

Код этого проигрывателя.

Если вы видите это сообщение ,значит ваш браузер не поддерживает элемент audio.

Если ввести в код autoplay=»autoplay,то музыка будет играть сразу ,как откроется страница.

Если вы видите это сообщение ,значит ваш браузер не поддерживает элемент audio.

Между тегами <p> и </p> можете вставить свой текст.

Попробуйте вариант проигрывания, когда посетитель вашего сайта нажимает на ссылку.В этом случае музыка должна быть в формате «WAV» и «Midi».Напишите обычную ссылку в HTML,замените вместо имя свой файл.
Этот вариант работает в IE с кнопками управления ,в других браузерах проигрыватель невидим,но музыка играет и если у вас Google,Opera,Mozilla, то лучше зту ссылку не включать ,и если вы захотите выключить музыку то вам придется покинуть страницу ,или придется уменьшить громкость.

Фоновая музыка

<a href=»имя.wav»>Фоновая музыка WAV и Midi</a>

А это еще один вариант проигрывания музыки на сайте.Он работает в Internet Explorer и Google Chrome.Здесь есть панель управления,кнопка включения/выключения. Если у вас не установлены плагины в Mozilla Firefox музыка проигрываться не будет.Если в Opera у вас вместо проигрывателя написано что нет плагина,щелкните по надписи, в открывшемся окошке нажмите кнопку «Открыть содержимое»,затем еще раз в другом окне «Открыть» и вы сможете прослушать музыку.
<embed src=»имя.mp3″ autostart=»true» hidden=»false» loop=»false» align=»center»>
</embed>

Размещается он между тегами <body></body>

Атрибуты тега <embed>

src=»имя.mp3″ —Указывает на расположение файла,который должен
     находиться в одной папке с сайтом,или src=»htpp://адрес ресурса/имя.mp3″
     если он находиться в Интернете.

autostart=»true» —Автостарт проигрывания — да, или «false»-нет.

hidden=»false» —Будет ли скрыта панель управления проигрывателя -нет, или      «true» -да.

loop=»false» —Повторение проигрывания -нет, или «true»-да.

width=»300″ —Ширина проигрывателя в пикселях -изменяемая.

height=»65″ —Высота проигрывателя в пикселях -изменяемая.

align=»center»—Расположение проигрывателя в ячейке,возможно
      «left»-левый,»center»-центр, «right»-правый.

Расширение для файла может быть и MIDI,в этом случае файл получается размером намного меньше чем MP3,но и качество намного уступает.Так что здесь нужен компромисс, или быстрая загрузка или хорошее звучание.

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

Подробности
Категория: Блогобзор
Автор: SEO & WEB — KELL4
Зачем нужна музыка на сайте?
Будь современным и креативным!

Довольно интересный вопрос, воспроизведение музыкальных или голосовых файлов на сайте, или встроенный плеер помогает посетителям сайта расслабиться, вызывает положительные эмоции и настроивает на нужный лад, так сказать облегчает взаимодействие с сайтом. Но данные эффекты работают только в том случае, когда музыка на сайте подобрана правильно и громкость звука не превышает допустимые пределы, иначе все ваши старания окажутся напрасными и вызовут отрицательные эмоции у посетителей сайта.

Как вставить аудио (музыку) на сайт в html?

Нам часто задают такой вопрос, музыка на сайте является актуальным и креативным элементом, а способов её воспроизведения много и их не так сложно внедрить. Начнем с того, что каждый пользователь Глобальной Сети использует какой либо браузер для выхода в Интернет, а общей и универсальной технологии воспроизведения звуковых и музыкальных файлов нет, каждый браузер работает по своим собственным алгоритмам и они несколько отличаются друг от друга, поэтому при воспроизведении музыки с помощью внедрения в HTML код страницы могут возникать проблемы. Но как Вы знаете, все проблемы решаемы!

1 способ.

Создание аудио проигрывателя музыки на сайте или плеера

Технология проста, создается файл проигрывателя, чтобы он не нагружал сайт или сервер выбираем технологию которую будем использовать: JavaScript, jQuery, AJAX. На основе выбранной технологии разрабатываем скрипт для нашего сайта и вставляем на сайт. Скрипт создается в зависимости от того, что Вам нужно: автоматическое воспроизведение фоновой музыки на сайте или управляемый посетителем плеер. Далее создаем папку в корне сайта для музыки и загружаем в нее аудио файлы.

Или как альтернативный сопсоб можно создать плеер по флеш-технологии (Flash), такой плеер будет смотреться более эффектно. Правда выйдет дороже и тяжелее для сайта (повысит время загрузки страниц сайта).

2 способ.

Установка музыки на сайт с помощью HTML

Используя возможности HTML и браузера можно вставить на сайт плеер или фоновую музыку. Технология так же проста: создается HTML5 код с тегом «audio» и этот код прописывается в сайт, а когда пользователь заходит на сайт он видит минимизированный плеер, посетитель нажимает кнопку плэй или автоматически начинает играть фоновая музыка. Вид плеера будет зависеть от браузера с которого зашел посетитель, но функциональность останется стандартной: кнопки Play, Stop, Next, Prev, Volume. Выглядит плеер с HTML кодом вот так:


  

Cам код для вставки выглядит так:

Как вы могли заметить команда «controls autoplay» включает автопроигрывание музыки как только посетитель заходит на сайт.

Альтернативный вариант HTML кода это тег «bgsound», это вообще не использовать визуальный плеер, при посещении сайта начнет играть музыка на сайте, но регулировать громкость, поставить на паузу и т.д. пользователь не сможет. Настройка громкости воспроизведения звукового файла настраивается в самом коде.

Форматы звуковых файлов для проигрывания музыки на сайте могут быть: WAV, AU, MIDI, MP3, OGG (расширения). Музыкальные файлы загружаются на сайт, либо используются ссылки на те сайты, где располагается звуковой файл, главное, чтобы он находился в открытом доступе.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *