Как вставить музыку в HTML страницу

Существует два варианта вставки музыки на сайт: фоновая музыка и плеер.
Фоновая музыка вставляется при помощи HTML тега bgsound и его атрибутов, указывающих количество повторений трека, баланс и громкость. Код такой вставки будет выглядеть следующим образом:

<bgsound src="путь_к_файлу/имя_файла.mp3" loop="-1" balance="0" volume="0">

Таким образом, мы видим, что аудиофайл будет повторяться бесконечно, баланс между аудиоканалами будет стандартным, а громкость максимальной.
Если вы хотите, чтобы пользователь мог управлять музыкой на сайте, то можете применить следующие методы:

  • Вставка при помощи встраиваемого плеера и JavaScript.
  • Вставка при помощи тега embed.
  • Вставка в HTML5 при помощи тега audio.

Для начала рассмотрим, как вставить музыку в HTML страницу на примере встраиваемого плеера. Как и для любой вставки медиафайлов, прежде всего загрузите файл с аудио на сервер. Далее, по аналогии со встраиванием видеоплеера, загрузите файлы плеера на сайт и вставьте его на страницу при помощи тегов script и object. В результате вы получите такой код:

<script language="JavaScript" src="путь_к_файлу/скрипт_плеера.js"></script>
<object type="application/x-shockwave-flash" data="путь_к_файлу/файл_плеера.swf" id="audioplayer1" height="15" width="300">
<param name="movie" value="http://ваш_домен/audio/player.swf">
<param name="FlashVars" value="playerID=1&amp;soundFile=путь_к_файлу/имя_файла.mp3">
</object>

Встраивание плеера становится уже практически ненужным, так как большинство браузеров имеют штатный плеер, который запускается при вставке аудио при помощи тега <embed>. Данный метод вставки в коде будет иметь такой вид:

<embed src="fon_music.mp3" loop="true" autostart="false">

И в заключении рассмотрим самый популярный метод, применяемый только в HTML5. В данном способе аудиозаписи добавляются тегом audio. Данный тег позволяет добавить несколько аудиофайлов разных форматов одновременно, так как некоторые браузеры поддерживают не все кодеки. Путь к файлу записывается через атрибут src, после чего при помощи type указываются тип и кодек файла. Пример вставки через тег audio будет выглядеть так:

<audio controls="controls">
<source src="путь_к_файлу_/имя_файла.wav" type="audio/wav">
<source src="путь_к_файлу_/имя_файла.mp3" type="audio/mpeg">
</audio>

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

Вернуться в блог
preloader