jQuery+css3轨迹回放音乐播放器代码

来源:https://www.sucaihuo.com/js/2909.html 2017-09-04 20:37浏览(1105) 收藏

jQuery+css3轨迹回放音乐播放器代码,有按钮,进度条和示波器功能,示波器是附加功能,能显示某个时间点的状态。(不兼容IE6,7,8)
jQuery+css3轨迹回放音乐播放器代码
分类:html5 > 音频 难易:初级
查看演示 下载资源 下载积分: 20 积分

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>
标签: 音乐播放器
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2