Как сделать фоновую мелодию для веб-страницы из mp3-файла? Для начала – убедиться, что она нужна. Я, например, считаю, что единственное место во всём Вебе, где уместны фоновые мелодии – это игры. Пожалуйста, ставьте такие скрипты только в них.

Так как стандарт очень долго хранил молчание насчёт фоновых мелодий, каждый браузер реализовывал его по-своему

Путаница тут страшная. <embed>, который часто советуют, например, требует от Firefox подгружать плагин. А что касается форматов, то ещё недавно их поддержка выглядела так:

Browser Ogg MP3 WAV
FireFox 3.6+ ✓ ✓
Safari 5+ ✓ ✓
Chrome 6 ✓ ✓
Opera 10.5+ ✓ ✓
Internet Explorer 9 (beta) ✓ ✓

Так что используйте JPlayer. Но иногда и он обваливается с ошибкой, что b.test – не является функцией :( .

Мне jPlayer не помог. Пришлось родить кроссплатформенное решение:

&lt;bgsound src="sound/plan.mp3" loop="1"&gt;
&lt;object id="opera_player1" data="sound/plan.mp3" type="application/x-mplayer2" width="0" height="0"&gt;
 &lt;param name="filename" value="sound/plan.mp3"&gt;
 &lt;param name="autostart" value="1"&gt;
 &lt;param name="autoplay" value="1"&gt;
 &lt;param name="hidden" value="1"&gt;
 &lt;param name="playcount" value="9999"&gt;
&lt;/object&gt;
&lt;audio src="sound/plan.mp3" autoplay="autoplay" loop="loop"&gt;
&lt;object id="webkit_player" data="sound/plan.mp3" type="application/x-mplayer2" width="0" height="0"&gt;
 &lt;param name="filename" value="sound/plan.mp3"&gt;
 &lt;param name="autostart" value="1"&gt;
 &lt;param name="autoplay" value="1"&gt;
 &lt;param name="hidden" value="1"&gt;
&lt;/object&gt;
&lt;/audio&gt;

В IE я это, впрочем, пока не тестировал.

Первый блок – исключительно для Opera. Во втором не забываем loop=”loop” – Chrome игнорирует Playcount.

Важно помнить, что object в Firefox не понимает loop. Так что просто ставьте большой playcount. А вот webkit-браузеры понимают его слишком хорошо и будут играть мелодию, даже когда вы покините сайт. Поэтому не забудьте убрать param loop во втором блоке.

И никогда не пытайтесь сгенерировать этот код через JavaScript. Такая реализация страшно тормозит даже на локальном компьютере.

А ещё не забывайте, что браузеры – умные создания и если поместить эти object’ы в скрытый блок (не важно, через, display: none; или visibility: hidden), Firefox их проигрывать не будет.

Причём мы говорим, разумеется, о desktop-ных браузерах. Про мобильные даже вспоминать страшно.