Need a random mp3 to play on page load

Sep 13th, 2015 at 10:40 AM
User 38401 Photo

Jo Rice
Senior Advisor
10,951 posts

Hi guys,

I have a client that has a ton of music playing on her old site (old flash site with no button to even turn it off even). She's agreed to remove the music from most of the pages, but she would still like the main pages to use it. Since she's the boss and I'm not I've agreed to do this, but I'm also trying to find way to do a random song on page load so it isn't always the same song.

She has about 50 different songs that go with a lot of product pages that will be removed from those pages and I'd love to be able to utilize that music in a random choice when the page loads. I've looked all over the place and all I've found so far is one very old script that I'm not sure are a good choice (although I will probably see if it work).

Anyone have any ideas on how to do this? I'd like to put about 10 songs per page to choose from. I don't want them playing in a random order, just choosing a random song and looping the song so that it will always be only one song that loads and that it will change on reload or refresh, etc.

Thanks for any help anyone can give on this. If not that's ok, in the end she'll just need to choose a song for each page, just would be a nice touch to be able to do this for her. :)
Jo

http://elementsinwebdesign.com
Sep 13th, 2015 at 12:09 PM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,190 posts

Hi Jo,
Give this a try.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Random MP3 player one</title>

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript">
var numberOfSongs = 3
var sound = new Array(numberOfSongs+1)
sound[0]= "http://mydomain.com/coolsongone.mp3"
sound[1]= "http://mydomain.com/coolsongtwo.mp3"
sound[2]= "http://mydomain.com/coolsongthree.mp3"
function randomNumber(){
var randomLooper = -1
while (randomLooper < 0 || randomLooper > numberOfSongs || isNaN(randomLooper)){ randomLooper = parseInt(Math.random()*(numberOfSongs+1))
}
return randomLooper
}
var randomsub = randomNumber()
var soundFile = sound[randomsub]
document.write ('<EMBED src= "' + soundFile + '" hidden=true autostart=true loop=true>')
</script>
</head>
<body>

</body>
</html>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Sep 13th, 2015 at 12:30 PM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,190 posts

Here's another version.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Random MP3 player two</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<script type="text/javascript">
function play()
{
var a = Math.random()*2;
a=Math.floor(a);

if(a==1)
{
document.getElementById('soundtrack').innerHTML="<audio id='background_audio1' loop autoplay><source src='http://mydomain.com/mycoolsongone.mp3' type='audio/ogg'>Your browser does not support the audio element.</audio>";
}
if(a==0)
{
document.getElementById('soundtrack').innerHTML="<audio id='background_audio1' loop autoplay><source src='http://mydomain.com/mycoolsongtwo.mp3' type='audio/ogg'>Your browser does not support the audio element.</audio>";
}
}
</script>
</head>
<body onload="play()">;
<div id="soundtrack">

</div>
</body>

</html>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Sep 13th, 2015 at 04:26 PM
User 38401 Photo

Jo Rice
Senior Advisor
10,951 posts

Thanks much Eric, I'll give them a try tomorrow (heading out the door again lol), appreciate it big time! :)
Jo

http://elementsinwebdesign.com
Sep 13th, 2015 at 08:02 PM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,190 posts

Here's another.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Random MP3 player three</title>

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<style type="text/css">
body {
text-align:center;
}
#music {
height:1px;
width:1px;
line-height:0px;
font-size:0;
position:absolute;
left:0;
top:0;
}
</style>
<script type="text/javascript">
<!--
function PlayIt(mp3){
nummp3 = 5 //this needs to be the number of songs you have
day = new Date()
z = day.getTime()
y = (z - (parseInt(z/1000,10) * 1000))/10
x = parseInt(y/100*nummp3,10) + 1
//to add more songs follow the format below, add as many as you like
if (x == (1)){
mp3=("http://mydomain.com/coolsongone.mp3")
}
if (x == (2)){
mp3=("http://mydomain.com/coolsongtwo.mp3")
}
if (x == (3)){
mp3=("http://mydomain.com/coolsongthree.mp3")
}
if (x == (4)){
mp3=("http://mydomain.com/coolsongfour.mp3")
}
if (x == (5)){
mp3=("http://mydomain.com/coolsongfive.mp3")
}
document.getElementById('music').innerHTML='<object width="1" height="1" '
+'classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" '
+'codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" '
+'standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">'
+'<param name="url" value="'+mp3+'">'
+'<param name="uiMode" value="full">'
+'<param name="autoStart" value="true">'
+'<param name="loop" value="true">'
+'<embed type="application/x-mplayer2" '
+'pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" '
+'showcontrols="true" uimode="full" width="1" height="1" '
+'src="'+mp3+'" autostart="true" loop="true">'
+'<\/object>';
}
window.onload=PlayIt;
//-->
</script>
</head>

<body>
<div id="music"></div>
</body>
</html>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Sep 14th, 2015 at 08:33 AM
User 38401 Photo

Jo Rice
Senior Advisor
10,951 posts

Thanks again Eric,

Do you recommend any of these in particular?
Jo

http://elementsinwebdesign.com
Sep 14th, 2015 at 09:11 AM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,190 posts

One or two as three will usually trip a security plugin warning.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Sep 15th, 2015 at 06:35 PM
User 38401 Photo

Jo Rice
Senior Advisor
10,951 posts

Awesome, thanks so very very much for your help Eric!
Jo

http://elementsinwebdesign.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.