jQuery+css3轨迹回放音乐播放器代码,有按钮,进度条和示波器功能,示波器是附加功能,能显示某个时间点的状态。(不兼容IE6,7,8)
js代码
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/prefixfree.min.js"></script>
<script src="js/jquery-PlayBar.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/jquery-echarts.min.js"></script>
<script type="text/javascript">
var data = [];
$(document).ready(function(){
for (var i = 0; i < 1000; i++) {
data.push(randomData());
}
console.debug(data);
$.playBar.addBar($('.test'),data.length*1000);//第一个参数是需要显示播放器的容器,第二个参数为时间,单位毫秒
$.playBar.changeBarColor("#72dfff");//设置进度条颜色
$.playChart.addChart("echarts",data);
//点击暂停,再点击播放
$("#controlBtn").click(function(){
if($(this).hasClass("pause")){
pausePlayer();
}else if($(this).hasClass("play")){
startPlayer();
}
});
//点击停止按钮,时间清零
$("#stopBtn").click(function(){
stopPlayer();
//clearTimeout(t);
$.playBar.addBar($('.test'),data.length*1000);//第一个参数是需要显示播放器的容器,第二个参数为时间,单位毫秒
$("#controlBtn").addClass("play").removeClass("pause");
});
})
function startPlayer(){
//开启进度条
$("#controlBtn").addClass("pause").removeClass("play");
$.playBar.Begin();
//开启echarts
$.playChart.Begin();
}
function pausePlayer(){
//暂停进度条
$("#controlBtn").addClass("play").removeClass("pause");
$.playBar.Pause();
//暂停echarts
$.playChart.Pause();
}
//停止播放
function stopPlayer(){
$.playBar.Stop();
$.playChart.Stop();
}
var now = +new Date(1997, 9, 3);
var oneDay = 24 * 3600 * 1000;
var value = Math.random() * 1000;
function randomData() {
now = new Date(+now + oneDay);
value = value + Math.random() * 21 - 10;
return {
name: now.toString(),
value: [
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
Math.round(value)
]
}
}
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791