How to stop playback of the previous player when starting the next one?

Question

JavaScript

There is a code below, the question is, let's say there are n-th number of players on the page, at the moment the user is listening to player A, after some time the user starts player B, how to stop playing player A?

(function($){
    $.fn.sPlayer = function(options) {
        var defaults = {
            theme: 'minimal'
        };
        var options = $.extend(defaults, options);
        
        return this.each(function(){
            var $sPlayer = $(this);
            
            var $audio_wrap = $('<div></div>').addClass('s_player').addClass(options.theme);
            
            var $audio_controls = $('<div class="s_player_wrapper"><div class="s_playback"> <svg version="1.1" id="s_playback" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="10px" height="10px" viewBox="0 0 10 10" enable-background="new 0 0 10 10" xml:space="preserve"> <polygon id="l" points="5,7.5 0,10 0,0 5,2.5 "/> <polygon id="r" points="10,5 5,7.5 5,2.5 10,5 "/> </svg> </div> <div class="s_current">00:00</div> <div class="s_seek"><div class="s_progress"><div class="s_handle"></div></div></div><div class="s_duration">00:00</div> <div class="s_volume"> <svg version="1.1" id="s_playback" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="10px" height="10px" viewBox="0 0 10 10" enable-background="new 0 0 10 10" xml:space="preserve"> <polygon points="0,0 2,0 2,10 0,10 "/> <polygon points="4,3 6,3 6,10 4,10 "/> <polygon points="8,6 10,6 10,10 8,10 "/> </svg> </div></div>');
        
            $sPlayer.wrap($audio_wrap);
            $sPlayer.after($audio_controls);
    
    
            var $audio_container = $sPlayer.parent('.s_player');
            var $audio_controls = $('.s_player_wrapper', $audio_container);
            var $s_playback = $('.s_playback', $audio_container);
            var $s_current = $('.s_current', $audio_container);
            var $s_seek = $('.s_seek', $audio_container);
            var $s_progress = $('.s_progress', $audio_container);
            var $s_handle = $('.s_handle', $audio_container);
            var $s_duration = $('.s_duration', $audio_container);
            var $s_volume = $('.s_volume', $audio_container);
            var seeksliding = false;
            var $animate_playback={
                'pause_to_play':{
                    "left":[
                        "0,0 4,0 4,10 0,10",
                        "0,0 4.25,0.625 4.25,9.375 0,10",
                        "0,0 4.5,1.25 4.5,8.75 0,10",
                        "0,0 4.75,1.875 4.75,8.125 0,10",
                        "0,0 5,2.5 5,7.5 0,10"
                    ],
                    "right": [
                        "6,0 10,0 10,10 6,10",
                        "5.75,0.625 10,1.25 10,8.75 5.75,9.375",
                        "5.5,1.25 10,2.5 10,7.5 5.5,8.75",
                        "5.25,1.875 10,3.75 10,6.25 5.25,8.125",
                        "5,2.5 10,5 10,5 5,7.5"
                    ]
                },
                'play_to_pause':{
                    "left":[
                        "0,0 5,2.5 5,7.5 0,10",
                        "0,0 4.75,1.875 4.75,8.125 0,10",
                        "0,0 4.5,1.25 4.5,8.75 0,10",
                        "0,0 4.25,0.625 4.25,9.375 0,10",
                        "0,0 4,0 4,10 0,10"
                    ],
                    "right": [
                        "5,2.5 10,5 10,5 5,7.5",
                        "5.25,1.875 10,3.75 10,6.25 5.25,8.125",
                        "5.5,1.25 10,2.5 10,7.5 5.5,8.75",
                        "5.75,0.625 10,1.25 10,8.75 5.75,9.375",
                        "6,0 10,0 10,10 6,10"
                    ]
                }, 
            }
            
            var $play_icon = function(){
                i=0;
                pause_to_play = setInterval(function(){
                    $s_playback.find('#l').attr('points', $animate_playback['pause_to_play']['left'][i]);
                    $s_playback.find('#r').attr('points', $animate_playback['pause_to_play']['right'][i]);
                    if(i==4){
                        clearInterval(pause_to_play);
                    }
                    i++;
                }, 25);
            };
            
            var $pause_icon = function(){
                i=0;
                play_to_pause = setInterval(function(){
                    $s_playback.find('#l').attr('points', $animate_playback['play_to_pause']['left'][i]);
                    $s_playback.find('#r').attr('points', $animate_playback['play_to_pause']['right'][i]);
                    if(i==4){
                        clearInterval(play_to_pause);
                    }
                    i++;
                }, 25);
            };

            // функция воспроизведения
            var s_playback = function(){
                if($sPlayer[0].paused == false){
                    $sPlayer[0].pause();
                } else {
                    $sPlayer[0].play();
                }
                
            };
            
            // событие при клике кнопки плейбек
            $s_playback.click(s_playback);

            // событие при воспроизведении
            $sPlayer.bind('play', function(){
                $pause_icon();
            });
            // событие при паузе
            $sPlayer.bind('pause', function(){
                $play_icon();
            });
            // событие при остановки
            $sPlayer.bind('ended', function(){
                $play_icon();
                $sPlayer[0].currentTime=0;
            });

            // перемотка
            var createSeek = function(){

                var audio_duration = $sPlayer[0].duration;
                
                $s_seek.slider({
                    value: 0,
                    step: 0.01,
                    orientation: "horizontal",
                    range: false,
                    max: audio_duration,
                    start: function(){
                        seeksliding = true;
                    },
                    slide: function(e,ui){
                        var progress = (ui.value*100)/$sPlayer[0].duration;
                        $s_progress.css('width', progress+"%");
                    },
                    stop: function(e,ui){
                        seeksliding = false;
                        $sPlayer[0].currentTime=ui.value;
                    }
                });
            }

            var getTimeFormat = function(seconds){
                var m = Math.floor(seconds / 60)<10 ? "0"+Math.floor(seconds / 60) : Math.floor(seconds / 60);
                var s = Math.floor(seconds % 60)<10 ? "0"+Math.floor(seconds % 60) : Math.floor(seconds % 60);
                
                return m+":"+s;
            }

            var seekUpdate = function(){
                var currentTime = $sPlayer[0].currentTime;
                if(!seeksliding){
                    $s_seek.slider('value', currentTime);
                    var progress = (currentTime*100)/$sPlayer[0].duration;
                    $s_progress.css('width', progress+"%");
                    $s_current.text(getTimeFormat(currentTime));
                }
            }

            $sPlayer.bind('timeupdate', seekUpdate); 

            $sPlayer.bind('loadedmetadata', function(){
                $s_duration.text(getTimeFormat($sPlayer[0].duration));
                createSeek();
            });

        });
    };
})(jQuery);

Answer 1

Do you mix or listen to music?!
Why do you need a lot of players?
mmetro : the player is not tied to a song, screen position, or playlist in any way. You can always switch it to another song or playlist.
If you have a lot of songs, but only one is playing at the same time - one player is enough!

Answer 2

Well, in general, you need to make one player and substitute the necessary data from the playlist for it.
Well, your solution will be to enumerate all the players each and pause. Then turn on your player.