Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Javascript Audio Player

    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:
    Code:
    $("#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,

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    1) Where is currentsong defined?
    2) Where do you update currentsong?
    3) The comparison operator is == rather than =
    Code:
    if(currentsong == 1) {

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Code:
    $(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,
    Last edited by xdragon124; 11-14-2012 at 06:03 PM. Reason: Adding contextual information

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    This is a much shorter equivalent version (with added initialisation for currentsong)
    Code:
    $(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;
    		}
    	})
    })
    Last edited by devnull69; 11-14-2012 at 07:09 PM.

  • Users who have thanked devnull69 for this post:

    xdragon124 (11-15-2012)

  • #5
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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,
    Last edited by xdragon124; 11-15-2012 at 04:57 AM.

  • #6
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    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
    Code:
    $('#audio-1').on('ended', function() {
       $('#audio-2')[0].play();
    });

  • #7
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,333
    Thanks
    11
    Thanked 587 Times in 568 Posts
    Quote Originally Posted by xdragon124 View Post
    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.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    xdragon124 (11-21-2012)

  • #9
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.
    Last edited by xdragon124; 11-21-2012 at 05:11 AM.

  • #10
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,333
    Thanks
    11
    Thanked 587 Times in 568 Posts
    Quote Originally Posted by xdragon124 View Post
    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.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #11
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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,

  • #12
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,333
    Thanks
    11
    Thanked 587 Times in 568 Posts
    Quote Originally Posted by xdragon124 View Post
    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
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    xdragon124 (11-22-2012)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •