一、一開始在看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({//配置jplayerready: function () {$(this).jPlayer("setMedia", {//設置音頻播放文件，可單獨使用來切換不同音頻效果mp3: ""//需要播放的音頻url});},swfPath: "",//必填，定義jPlayer 的Jplayer.swf文件的路徑。supplied: "mp3",wmode: "window",//supplied格式為mp3或flash需要指定為windowcssSelectorAncestor: '.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;}}

總結

以上是生活随笔為你收集整理的用Jplayer做的一个带动画的播放器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。