Jump to content
vBWarez - Rest In Peace

Add Random Background Music using HTML5

Recommended Posts

This will add an HTML5 random background music player to any vB5x site (or any site by [COLOR="#FFFF00"]removing the vB code[/COLOR]).
It is a modification of the classic random midi player.
All code for embedded vs background and this browser vs that browser have been removed.
MIDI files have been replaced with MP3's.
The player code has been replaced with modern <audio> code which works in most modern browsers and mobile devices.

One can add the code in various ways but I used the Site Builder, added a Static HTML module, and added this code-
[CODE]<!-- Start Background Music Player -->

[COLOR="#FFFF00"]<vb:if condition="is_member_of($user, 2)">
var sound1="[COLOR="#00FFFF"]Brazil.mp3[/COLOR]"
var sound2="[COLOR="#00FFFF"]Big_Balls.mp3[/COLOR]"
var sound3="[COLOR="#00FFFF"]Night_Life.mp3[/COLOR]"
var sound4="[COLOR="#00FFFF"]Kiss.mp3[/COLOR]"
[COLOR="#EE82EE"]var sound5[/COLOR]="[COLOR="#00FFFF"]Futures.mp3[/COLOR]"
var x=Math.round(Math.random()*[COLOR="#FF0000"]4[/COLOR])
[COLOR="#EE82EE"]if (x==0) x=sound1
else if (x==1) x=sound2
else if (x==2) x=sound3
else if (x==3) x=sound4
else x=sound5[/COLOR]
document.write('<audio autoplay="" controls="" preload=""><source src='+'"/[COLOR="#00FF00"]Media_Server/Song_of_the_Day[/COLOR]/'+x+'"'+'type="audio/mpeg"></audio>')
<!-- End Background Music Player -->


1. You need to set the [COLOR="#00FF00"]folder path to your MP3's[/COLOR]
2. You need to add the [COLOR="#00FFFF"]titles of your MP3's[/COLOR]
3. Folder paths and song names can not contain spaces
4. Add more songs by adding more [COLOR="#EE82EE"]X values and song entries[/COLOR]
5. The [COLOR="#FF0000"]random value[/COLOR] should equal your number of songs -1 (because zero is used)

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...