Multiple Instance Audio Play Using Jquery /javascript

Track Name :- i run this bitch By :- DJ Harsha

Solution 1:

Rather than storing the id of the current playing audio element, you can simplify your logic by pausing them as a group when playing a new one:

$(function () {
    $(".playback").click(function (e) {
        e.preventDefault();
        var $playback = $(this);

        $('audio').not(this).each(function() { $(this)[0].pause(); });
        var audio = $(this).next('audio')[0];
        if (audio.paused) {
            audio.play()
            $playback.html('<i class="fa fa-pause"></i> Stop');
        }
        else {
            audio.pause();
            $playback.html('<i class="fa fa-play"></i> Play');
        }
    });
}); 

Solution 2:

Try something like

$(function () {
    var curAudio;
    $(".playback").click(function (e) {
        e.preventDefault();
        var song = $(this).next('audio')[0];

        if (curAudio && song != curAudio && !curAudio.paused) {
            curAudio.pause();
            $(curAudio).prev().html('<i class="fa fa-play"></i> Play');
        }

        if (song.paused) {
            song.play();
            curAudio = song;
            $(this).html('<i class="fa fa-pause"></i> Stop');
        } else {
            song.pause();
            curAudio = undefined;
            $(this).html('<i class="fa fa-play"></i> Play');
        }
        curPlaying = $(this).parent()[0].id;
    });
});

Share