@mmetro

Как остановить воспроизведение предыдущего плеера при запуске следующего?

Имеется код, приведен ниже, вопрос допустим на странице n-ое количество плееров, в текущий момент пользователь слушает плеер А, через какое-то время пользователь запускает плеер Б, как остановить воспроизведение плеера А?

(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);
  • Вопрос задан
  • 405 просмотров
Пригласить эксперта
Ответы на вопрос 2
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
Вы микшируете или музыку слушаете?!
Зачем Вам много плееров?

mmetro: плеер не привязан никак ни к песне, ни к позиции экрана, ни к плейлисту. Всегда можно переключить его на другую песню или на плейлист.
Если у Вас туча композиций, но одновременно играет только одна - достаточно одного плеера!
Ответ написан
@LiguidCool
Ну вообще надо делать один плеер и подставлять ему необходимые данные из плейлиста.
Ну а вашим решением будет перебор всех плееров each'ем и постановка на паузу. Затем включаете свой плеер.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы