用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;
        }
    }