Имеется код, приведен ниже, вопрос допустим на странице 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);
