用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、当音频播放完毕，触发jplayer

ended()

方法，此处执行

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