jQuery MP3 Player : how to stop all running instances when playing another
I made a jQuery script that plays MP3, but when I play the first MP3 and than I play an another one, the two MP3 sounds play together.
How to stop all instances of MP3 and then, play the selected player ?
This is my code :
(function($){
$.fn.roundedplayer = function(gopt){
return this.each(function(){
var $this = $(this);
var opt = $.extend({
color: '#e56d49',
radius: 200,
lineWidth: 10,
padding : 6,
shadowBlur:20,
},gopt);
opt.radius = $this.data('radius')?$this.data('radius'):opt.radius;
opt.color = $this.data('color')?$this.data('color'):opt.color;
var $div = $('').attr('class',$this.attr('class')).css({position:'relative',width:opt.radius*2+opt.shadowBlur*2,height:opt.radius*2+opt.shadowBlur*2});
var $canvas = $('');
var $canvas2 = $('');
var ctx = $canvas[0].getContext("2d");
var $img = $('');
var isPlaying = false;
var audio = $this[0];
$this.wrap($div);
$this.after($canvas2).after($canvas).after($img);
/**
* CSS
**/
$canvas.css({position:'absolute', top:0, left:0});
$canvas2.css({position:'absolute', top:0, left:0});
$img.css({position:'absolute',
top: opt.shadowBlur + opt.padding + opt.lineWidth/2,
left: opt.shadowBlur + opt.padding + opt.lineWidth/2,
width: (opt.radius - opt.lineWidth/2 - opt.padding) * 2,
height: (opt.radius - opt.lineWidth/2 - opt.padding) * 2,
borderRadius: (opt.radius - opt.lineWidth/2 - opt.padding) * 2,
boxShadow: "inset 0px 0px 10px #000"
});
$img.animate({boxShadow: "inset 0px 0px 10px #000"})
/**
* OUTER CIRCLE
**/
ctx.beginPath();
ctx.arc(opt.radius + opt.shadowBlur, opt.radius + opt.shadowBlur, opt.radius - opt.lineWidth/2 - opt.padding - 2, 0, Math.PI*2, true);
ctx.closePath();
ctx.lineWidth = opt.lineWidth + opt.padding*2;
ctx.strokeStyle = "#FFFFFF";
ctx.shadowColor="rgba(0,0,0,0.4)";
ctx.shadowBlur = 20;
ctx.stroke();
/**
* BOUTON LECTURE
**/
var $play = $('').css({position:'absolute', left:opt.radius + opt.shadowBlur - 60,top:opt.radius + opt.shadowBlur - 60,cursor:'pointer',opacity:0.6});
$(this).parent().append($play);
var ctx = $play[0].getContext("2d");
$play.draw = function(state){
$play[0].width = $play.width();
var ctx = $play[0].getContext("2d");
ctx.beginPath();
ctx.arc(60,60,50,0,2*Math.PI,true);
ctx.lineWidth = 5;
ctx.strokeStyle = '#FFF';
ctx.fillStyle = "rgba(0,0,0,0.8)";
ctx.fill();
ctx.stroke();
if(state == 'play'){
ctx.beginPath();
ctx.moveTo(40,29);
ctx.lineTo(90,60);
ctx.lineTo(40,91);
ctx.fillStyle = "#FFFFFF";
ctx.fill();
}else{
ctx.beginPath();
ctx.moveTo(45,37);
ctx.lineTo(45,80);
ctx.moveTo(75,37);
ctx.lineTo(75,80);
ctx.lineWidth = 15;
ctx.strokeStyle = '#FFF';
ctx.stroke();
}
}
/**
* CURSEUR
**/
var csize = opt.lineWidth/2+opt.padding+3;
var $cursor = $('').css({
position:'absolute',
top:0,
left:0,
marginLeft:-csize,
marginTop:-csize
});
$this.parent().append($cursor);
var ctx = $cursor[0].getContext('2d');
ctx.beginPath();
ctx.arc(csize,csize,csize,0,2*Math.PI,true);
ctx.shadowColor="rgba(0,0,0,0.4)";
ctx.shadowBlur = 5;
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.fillStyle = "#EEE";
ctx.fill();
ctx.beginPath();
ctx.arc(csize,csize,opt.lineWidth/2,0,2*Math.PI,true);
ctx.fillStyle = "#585858";
ctx.fill();
/**
* Dessine le cercle coloré indiquant la progression
* @param percent Pourcentage (/100) de la progression de lecture
**/
function drawInner(percent){
var ctx = $canvas2[0].getContext("2d");
var p = percent/100;
var radius = opt.radius + opt.shadowBlur;
// Le fond blanc
ctx.beginPath();
ctx.arc(radius, radius, opt.radius - opt.lineWidth/2 - opt.padding - 2, 5*Math.PI/2, 9*Math.PI/2, false);
ctx.lineWidth = opt.lineWidth;
ctx.strokeStyle = "#ededed";
ctx.stroke();
// La progression
ctx.beginPath();
ctx.arc(radius, radius, opt.radius - opt.lineWidth/2 - opt.padding - 2, 5*Math.PI/2, (5+4*p)*Math.PI/2, false);
ctx.lineWidth = opt.lineWidth;
ctx.strokeStyle = opt.color;
ctx.stroke();
// Ombre sur la progression
for( var i=1; i radius || Math.abs(y) > radius){
return false;
}
var a = Math.atan2(x,y);
a = (2 - a/(Math.PI/2))/4;
$canvas2[0].width = $canvas2.width();
audio.currentTime = audio.duration * a;
drawInner(a*100);
if(!isPlaying){
$play.trigger('click');
}
})
$play.hover(function(){
$play.stop().fadeTo(500,1);
},function(){
$play.stop().fadeTo(500,0.6)
}).click(function(event){
event.preventDefault();
if(isPlaying){
isPlaying = false;
$this[0].pause();
}else{
isPlaying = true;
$this[0].play();
$this[0].volume = 0.2;
}
$play.draw(isPlaying?'pause':'play')
}).draw('play');
});
}
})(jQuery);
1: How to solve this problem?
2: And I have another question, since a MP3 is finished and when I want to replay it again, I have to click one time on pause/play to reinitialize the player and another time pause/play to play the MP3. Can I modify this too?
链接地址: http://www.djcxy.com/p/71140.html