用Jplayer做的一个带动画的播放器

一、一开始在看Jplayer的文档说明的时候，我内心是崩溃的，第一个demo很少，而且很多东西没交代清楚，第二个是代码整理的也不算很完整，毕竟是翻译别人外国人的东西，所以没自己撰写的完整，有些还只是停留在English版本下，这样对于四级没过的前端小白来说，确实是个很蛋疼的事情。最后就是通过对比各种demo，然后度娘各种别人写的文档，最终找到了一些有用数据，完成一个点击带播放效果的播放器。

demo1

图一:未播放状态

图二:点击播放状态

一、实现效果

这里是一个播放器，点击图一蓝色区域按钮，蓝色按钮编程绿色播放效果，音频播放，同时图像中间绿色区域开始转动，边框进度条也开始转动。

二、实现思路

1、主要用了jquery来完成整个效果，首先给蓝色按钮绑定点击事件，点击之后，执行$("#jquery-jplayer").jPlayer("play");
2、jplayer执行之后，触发jplayer的play()方法,在里面隐藏蓝色按钮，出现绿色按钮。同时ShowProgess()执行；
3、在ShowProgess一共有两个旋转效果，一个是绿色区域，一个是进度条，由于他们的旋转进度都不相同，所以用两个定时器来设计旋转动画，Time2是绿色区域的旋转，Time1是进度条旋转。在这里没有用jplayer的时间是因为考虑到旋转的频率，用定时器可以自由设定旋转的频率；
4、进度条效果是用了两个半圆来完成，在旋转角度<=180度时，只旋转右半圆，>=180度时，右半圆停止，旋转左半圆，最后完成动画进度条的播放效果。
5、当音频播放完毕，触发jplayerended()方法，此处执行ClearTimer()清除定时器，初始化动画。

HTML部分

<div id="jquery-jplayer" ></div>//定义播放器的id，这个是最重要的，音频的播放就是靠他来完成。
<div class="play-progress">//circle box
   <div class="play-left-box">//left semicircle shadow 
     <div class="play-left"></div></div>//left semicircle
   <div class="play-right-box">
     <div class="play-right"></div></div>
   <div class="indicator-relative">//progress bar
      <div class="indicator indicator-new"></div></div>
   <div class="play-shader"></div>
   <div class="stophorn"></div>
   <div class="playinghorn" style="display: none;"></div>  
</div>

CSS部分

JS部分

   var QIU = {
        InitJplayer: function () {
            $("#jquery-jplayer").jPlayer({//配置jplayer
                ready: function () {
                    $(this).jPlayer("setMedia", {//设置音频播放文件，可单独使用来切换不同音频效果
                        mp3: ""//需要播放的音频url
                    });
                },
                swfPath: "",//必填，定义jPlayer 的Jplayer.swf文件的路径。
                supplied: "mp3",
                wmode: "window",//supplied格式为mp3或flash需要指定为window
                cssSelectorAncestor: '.jp_container_1',//5、定义这个，可以直接把当前播放时间、总时间直接输出到html上
                toggleDuration: false,
                play: function (event) {
                    $("#fivestep .stophorn").hide();
                    $("#fivestep .playinghorn").show();
                    QIU.ShowProgess();//播放动画
                    $("#fivestep .play-progress .indicator").removeClass("indicator-new");
                },
                error: function (event) {
                    var bj = event.jPlayer.error;
                    for (var item in bj) {
                        console.log("Error中" + item + " 错误报告=" + bj[item] + "<br>")
                    }
                },
                ended: function (event) {
QIU.ClearTimer
                },
                timeupdate: function (event) {//音频播放后，每200MS执行一次
                }
            })
        },
        ShowProgess: function () {
            $("#fivestep .play-left").css({WebkitTransform: 'rotate(-45deg)', Transform: 'rotate(-45deg)'})
            $("#fivestep .play-right").css({WebkitTransform: 'rotate(135deg)', Transform: 'rotate(135deg)'});
            $("#fivestep .play-progress .indicator-relative").css({
                WebkitTransform: 'rotate(0deg)',
                Transform: 'rotate(0deg)'
            });

            QIU.Timer2 = setInterval(function () {//中间绿色旋转动画
                var step = QIU.step;
                $("#fivestep .playinghorn").css({
                    WebkitTransform: 'rotate(' + step + 'deg)',
                    Transform: 'rotate(' + step + 'deg)'
                });//图片旋转
                QIU.step++;
            }, 5);
            QIU.Timer = setInterval(function () {//进度条动画
                QIU.currentTime += QIU.interval * 0.001 - 0.001;
                QIU.duration = parseInt($("#jquery-jplayer").data("jPlayer").status.duration);
                var percentage = parseFloat(QIU.currentTime / QIU.duration);
                var currAngle = (percentage * 360).toFixed(4);
                var degreeA, degreeB;
                if (currAngle < 180) {
                    degreeA = -45;
                    degreeB = 135 + parseFloat(currAngle);
                }
                else {
                    degreeB = 315;
                    degreeA = parseFloat(currAngle) - 225;
                }
                var indicatorStyle = {
                    WebkitTransform: 'rotate(' + currAngle + 'deg)',
                    Transform: 'rotate(' + currAngle + 'deg)'
                };
                $("#fivestep .play-left").css({
                    WebkitTransform: 'rotate(' + degreeA + 'deg)',
                    Transform: 'rotate(' + degreeA + 'deg)'
                });
                $("#fivestep .play-right").css({
                    WebkitTransform: 'rotate(' + degreeB + 'deg)',
                    Transform: 'rotate(' + degreeB + 'deg)'
                });
                $("#fivestep .play-progress .indicator-relative").css(indicatorStyle);//进度点
                if (QIU.PlayIsCompleted) {
                    QIU.PlayIsCompleted = false;
                    QIU.ClearTimer();
                }
            }, QIU.interval);
        },//播放动画
        ClearTimer: function () {//清除动画
            $("#fivestep .play-left").css({WebkitTransform: 'rotate(-45deg)', Transform: 'rotate(-45deg)'})
            $("#fivestep .play-right").css({WebkitTransform: 'rotate(135deg)', Transform: 'rotate(135deg)'});
            $("#fivestep .play-progress .indicator-relative").css({
                WebkitTransform: 'rotate(0deg)',
                Transform: 'rotate(0deg)'
            });
            $("#fivestep .playinghorn").hide();
            $("#fivestep .stophorn").show();
            $("#fivestep .play-progress .indicator").addClass("indicator-new");
            QIU.currentTime = 0;
            clearInterval(QIU.Timer);
            clearInterval(QIU.Timer2);
            QIU.Timer = null;
            QIU.Timer2 = null;
        }
    }