Вернуться ко всем статьям
Как вставить музыку в 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&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>
При помощи дополнительных атрибутов можно включить автоматическое воспроизведение, зациклить трек, управлять буферизацией.
