Hello

Im trying to make a simple embedded mp3 player on a page of my website. Javascript is not my strong point so i think this will be very easy for anyone with a basic grasp of the language.

I have got the embedded system working but if i want to play more than 1 song on my page, i need to use more than one player - what i want if a simple addidtion to my playsong() function which will tell the embedded player which track has been requested for listening.

My very simple code:

<!--my mp3 files are saved as songs/1.mp3 - songs/2.mp3 - songs/3.mp3 etc-->

<script language='javascrtipt' type='text/javascript'> 
function playsong(song_id)
{
document.embeds[song_id].play();
}
</script>

<a href='#' onClick='playsong(1);'>play 1</a><br>
<a href='#' onClick='playsong(2);'>play 2</a><br>
<a href='#' onClick='playsong(3);'>play 3</a><br>

<!-- effectively i need to assign a variable containing the file name to the embed statement 

     i.e - src="songs/".song_id.".mp3" -->

<object>
<embed src="songs/1.mp3" autostart="false" loop="false" width="280" height="42" controller="true" bgcolor="#ffffff"></embed>
</object>

I would be greatfull if somebody could tell me how to do this or point me in the direction of a resource that could help. Ive looked at alot of mp3 scripts but none that allow you to play several songs from one player without the aid of flash - id like to write this code from scratch

Simply store the URI's of your songs in a array, and change the emebed src on click

<script type="text/avascript">
var arySongs=new Array();
for (var i=1;i<=3;i++){
  arySongs[i]="songs/"+i+".mp3";
}

function playsong(song_id){
  var player=document.getElementById('player');
  player.src=arySongs[song_id];
  player.play();
}
</script>

<a href='javascript:playsong(1);'>play 1</a><br>
<a href='javascript:playsong(2);'>play 2</a><br>
<a href='javascript:playsong(3);'>play 3</a><br>
<object>
<embed  id="player" 
        src="songs/1.mp3" 
        autostart="false" 
        loop="false" 
        width="280" 
        height="42" 
        controller="true" 
        bgcolor="#ffffff"></embed>
</object>

Not tested, but if the embed element is a reachable via the getElementById() (but it should...) this should work

Excellent i think thats what im looking for. Only thing is that the src of the embed tag still says src="songs1", has that now become irrelevant as you put the ary songs variable up the top. I cant test it on this puter but will do when i get home.

Thanks Alot

It could not be totally irrelevant, as on the page load, before the user plays anything, it could pre-load a track.
But otherwise, yes, it's not needed anymore.