Javascript Audio Player

[xdragon124]

I am currently in the process of developing a website with a custom audio player that will use specified divs as their controllers. I am currently confused on a few things:
1. Getting the next song to play after the first one is done
2. Implementing a playlist.

For number one, I have implemented the following JS for the play button:

$("#play-button").click(function(){
		if (currentsong = 1) {
			$("#audio-1")[0].play();
		}
		else if (currentsong = 2) {
			$("#audio-2")[0].play();
		}
		else if (currentsong = 3) {
			$("#audio-3")[0].play();
		}
		else if (currentsong = 4) {
			$("#audio-4")[0].play();
		}
		else {
			$("#audio-5")[0].play();
		}
	})

However, this doesn't solve the issue of getting the next song to play after. Furthermore, is there a more efficient way of implementing the code above?

So I guess to specify, my plea for help encompasses the following points:
1. Implementation of a playlist
2. Getting the next song to play after the preceeding song has finished
3. [much more general] Any other methods to create a playlist using javascript

Thanks,

[devnull69]

1) Where is currentsong defined?
2) Where do you update currentsong?
3) The comparison operator is == rather than =

if(currentsong == 1) {

[xdragon124]

$(document).ready(function(){
	var currentsong;
	
	$("#play-button").click(function(){
		if (currentsong == 1) {
			$("#audio-1")[0].play();
		}
		else if (currentsong == 2) {
			$("#audio-2")[0].play();
		}
		else if (currentsong == 3) {
			$("#audio-3")[0].play();
		}
		else if (currentsong == 4) {
			$("#audio-4")[0].play();
		}
		else {
			$("#audio-5")[0].play();
		}
	}) 
	
	$("#pause-button").click(function(){
		if (currentsong == 1) {
			$("#audio-1")[0].pause();
		}
		else if (currentsong == 2) {
			$("#audio-2")[0].pause();
		}
		else if (currentsong == 3) {
			$("#audio-3")[0].pause();
		}
		else if (currentsong == 4) {
			$("#audio-4")[0].pause();
		}
		else {
			$("#audio-5")[0].pause();
		}
	})
	
	$("#next-button").click(function(){
		if (currentsong < 5) {
			currentsong = currentsong + 1;
		}
		else if (currentsong == 5) {
			currentsong = 1;
		}
	})
})

this is the entire file currently.

I edited the comparison operators from = to ==, but now the buttons no longer function.

Thanks,

[devnull69]

This is a much shorter equivalent version (with added initialisation for currentsong)

$(document).ready(function(){
	var currentsong=1;
	
	$("#play-button").click(function(){
                $('#audio-'+currentsong)[0].play();
	}) 
	
	$("#pause-button").click(function(){
                $('#audio-'+currentsong)[0].pause();
	})
	
	$("#next-button").click(function(){
		if (currentsong < 5) {
			currentsong++;
		}
		else {
			currentsong = 1;
		}
	})
})

[xdragon124]

Thank you very much devnull69. The player now works as I hoped.

I have another concern regarding the audio player. I would like to set it so that after one song finishes, the next song will play. Is there a way I can implement this?

Thanks,

[devnull69]

The specification says that there is the "ended" event for <audio> elements that should do exactly what you were looking for.

But: Last time I checked (about one year ago) it wasn't implemented in all browsers. Maybe it's different now, try it

$('#audio-1').on('ended', function() {
   $('#audio-2')[0].play();
});

[xdragon124]

Hi,
I have tested that and it indeed works. Thanks for everything.

One last thing, I would like to make a moving banner where the current song name would go. Is there any way I can do this?

I could make a string variable where each value of currentsong would denote a song title. But I'm at a lost.

[rnd me]

Originally Posted by xdragon124

Hi,
I have tested that and it indeed works. Thanks for everything.

One last thing, I would like to make a moving banner where the current song name would go. Is there any way I can do this?

I could make a string variable where each value of currentsong would denote a song title. But I'm at a lost.

i used a marquee tag for that old-school winamp-style scrolling title.

[xdragon124]

I have implemented the marque tag as suggested.
However, the text will not fully scroll through before it cuts off and starts from the start again.

[rnd me]

Originally Posted by xdragon124

I have implemented the marque tag as suggested.
However, the text will not fully scroll through before it cuts off and starts from the start again.

adjust the font size, or put the marquee at width>100% inside a container whose width is set to the proper size and whose oveflow property is "hidden".

look into the different attrib supported by marquee; you can adjust the scroll behavior and speed. i don't know the options off-hand or whether or not they will help you. i seem to rembeber being able to tell it to loop or run once, perhaps all you need to do is loop it...

anyways, glad its working more than before; progress.

[xdragon124]

Hmm, alright, thanks I look over the documentation!

One last question remaining this: I'm using cufon for font replacement. When it first loads up, the font is successfully replaced, however, as it moves to the next song, the text goes back to the default Times New Romans. Is there a way that I can actively update the font replacement? Thanks,

[rnd me]

Originally Posted by xdragon124

Hmm, alright, thanks I look over the documentation!

One last question remaining this: I'm using cufon for font replacement. When it first loads up, the font is successfully replaced, however, as it moves to the next song, the text goes back to the default Times New Romans. Is there a way that I can actively update the font replacement? Thanks,

i would dump the cufon and use webfonts, which extend css with new font-families.

i haven't implemented cufon myself, but my design guy moved to web fonts last year, after chrome and firefox removed some pretty asinine SOP restrictions from it...

i'm sure cufon provides a javascript command to re-scan, but you'll have to figure that one out on your own, show/hide many marquees, use webfonts, or repost a dedicated cufon question...

godspeed