Multiple instance Audio play / pause using Jquery

Question

This the HTML Markup i used to Display Tracks . i Have some Jquery to accomplish some of requirements . But Most importantly i cant figure out a way to Play / Pause Multiple instance audio using Jquery .i have asked this every same question before . as you might notice from my code im Jquery Noob . Tried hours of googling . But no Luck

        <div class="track-item">
            <span>Track Uploaded by  - <a href="#">DJ Hardwell</a></span>

            <div class="track-default-options">
                <audio src="http://195.154.217.103:8117/;mp3"></audio>
                <div class="track-total-time">0.00 | 48.37</div>

                <div class="track-seek-bar"></div>
                <button class="play btn btn-xs btn-primary"><i class="fa fa-play"></i> Play</button>
                &nbsp;
                <button id="pause" class="btn btn-xs btn-success"><i class="fa fa-download"></i> Download</button>
                &nbsp;
                <button class="btn btn-xs btn-danger share"><i class="fa fa-share"></i> Share</button>
                <div class="track-uploaded-date">
                    <p>Uploaded on 3 days ago</p>
                </div>
            </div>
            <div class="track-share-options" style="display: none">
                <button type="button" class="btn btn-xs btn-danger share-close"><i class="fa fa-minus"></i>
                    Show Less
                </button>
                &nbsp;
                <br/>
                <button class="btn btn-xs btn-facebook"><i class="fa fa-facebook"></i> | Facebook</button>
                &nbsp;
                <button class="btn btn-xs btn-twitter"><i class="fa fa-twitter"></i> | Twitter</button>
                &nbsp;
                <button class="btn btn-xs btn-google-plus"><i class="fa fa-google-plus"></i> | Google+
                </button>
            </div>
        </div>

This is Jquery code that i used to change some button states and to hide and show share buttons

// ****************************** //
     // Track - Play / Share //
// ****************************** //

// Share Button
$(document).on('click' , '.share' , function(event){
    event.preventDefault();
        $(this).closest('.track-default-options').fadeOut('slow' , function(){
            $(this).next().closest('.track-share-options').fadeIn('slow');
    });
});
$(document).on('click' , '.share-close' , function(event) {
    event.preventDefault();
        $(this).closest('.track-share-options').fadeOut('slow' , function(){
            $(this).prev().closest('.track-default-options').fadeIn('slow');
        });
});


// Play Button

$(document).on('click' , '.play' , function(event){
    event.preventDefault();
    $(this).html('<i class="fa fa-pause"></i> Pause');
    $(this).addClass('playing');
    $(this).prev('.track-seek-bar').addClass('track-seek-bar-active');
    $(this).prevAll('.track-total-time').css('visibility' , 'visible');
});

// Pause Button
$(document).on('click' , '.playing' , function(){
    $(this).html('<i class="fa fa-play"></i> Play');
    $(this).removeClass('playing');
    $(this).prev('.track-seek-bar').removeClass('track-seek-bar-active');
    $(this).prevAll('.track-total-time').removeAttr('style');

});

Right Now Everything Just works fine . Buttons hide and shows etc . What i really need is to only play one audio at a time .

As an Example if an audio is already playing in the browser , if the user chooses to play another track while previously selected music is still playing it need to be paused and start the new selected audio immediately.

This is Previously asked Question on the same topic . But it's Very different now .My Previous Question . I have Tried get it working the with new HTML .No luck with it though. That why i'm here .

i also have a FIDDLE Setup. you can really see what's my actual requirement and what i cannot understand to do.

Since i guess i have written a horrible Jquery Code , if you can and have time point me out an better way to do it

Please Suggest me an answer for this . ill really appreciate it ! . Thanks

romuleald romuleald · Accepted Answer · 2015-04-21T11:29:29

This trick do the job, but you will need to change your code to display play/pause on .play or .pause

$('audio').on('play', function(){
    $('audio').not(this).trigger('pause')
})

Multiple instance Audio play / pause using Jquery

1 Answers