Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Play a certain audio track when clicked

Tags:

html

jquery

php

All the songs have a .song class but it plays the first song on the playlist. It's basically the play button for the whole playlist. I've play around with this for awhile and I can't seem to get it right. It might be the simplest thing too. I have the song populate with php depending on the album. I want people to be able to click a certain song and that song plays.

example: http://mixtapemonkey.com/mixtape?m=637

Also if you know how to toggle between the play and stop button, that would be nice to throw in there too. Thanks!

<script>

jQuery(document).ready(function(){

    i=0;

    nowPlaying = document.getElementsByClassName('playsong');
    nowPlaying[i].load();

    $('.play').on('click', function() {
        nowPlaying[i].play();
        callMeta();
    });

    $('.song').on('click', function() {
        nowPlaying[i].play();
        callMeta();
    });

    $('.pause').on('click', function() {
        nowPlaying[i].pause();
        callMeta();
    });

    $('.next').on('click', function() {
        $.each($('audio.playsong'), function(){
            this.pause();
        });
        ++i;
        nowPlaying[i].load();
        nowPlaying[i].play();
        callMeta();

    })

    function callMeta(){
        var trackTitle = $(nowPlaying[i]).attr('data-songtitle');
        $('.songtitle').html(trackTitle);

        var trackArtist = $(nowPlaying[i]).attr('data-songartist');
        $('.songartist').html(trackArtist);

    }

})

like image 611
Mark Serrano Avatar asked Oct 20 '25 10:10

Mark Serrano


1 Answers

You have to target the audio element inside each .song, now you're always targeting the first one.
To toggle, check if the audio is paused, and play() or pause() accordingly :

$('.song').on('click', function() {
    var audio = $('.playsong', this).get(0);

    if (audio.paused) {
         audio.play();
    }else{
         audio.pause()
    }
    callMeta();
});

EDIT:

with a few changes, I'm guessing something like this would work :

jQuery(document).ready(function($){

    var audios = $('.playsong');
    var audio  = audios.get(0);

    audio.load();

    $('.play').on('click', function() {
        callMeta(audio);
    });

    $('.song').on('click', function() {
        audio = $('.playsong', this).get(0);
        callMeta(audio);
    });

    $('.pause').on('click', function() {
        audio.pause();
    });

    $('.next').on('click', function() {
        var i = audios.index(audio);
        audio = $(audios).get(i+1);
        callMeta(audio);
    });

    function callMeta(elem){
        audios.each(function(i,el) {
            if (!el.paused) {
                el.pause();
                el.currentTime = 0;
            }
        });
        elem.load();
        elem.play();
        $(elem).on('ended', function() {
            $('.next').trigger('click');
        });
        $('.songtitle').html($(elem).attr('data-songtitle'));
        $('.songartist').html( $(elem).attr('data-songartist') );
    }
});
like image 182
adeneo Avatar answered Oct 21 '25 23:10

adeneo



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!