jQuery MP3播放器:如何在播放另一个时停止所有正在运行的实例

我制作了一个播放MP3的jQuery脚本,但是当我播放第一首MP3而不是播放另一首时,这两首MP3一起播放。

如何停止MP3的所有实例,然后播放选定的播放器?

这是我的代码:


    (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:如何解决这个问题?

2:我还有一个问题,因为MP3已经结束了,当我想再次播放时,我必须点击一次暂停/播放才能重新初始化播放器,另一次暂停/播放播放MP3。 我可以修改吗?

链接地址: http://www.djcxy.com/p/71139.html

上一篇: jQuery MP3 Player : how to stop all running instances when playing another

下一篇: Can you autoplay HTML5 videos on the iPad?