H5 jQ 歌词定位时间
2017-07-05 本文已影响0人
Sasoli
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#txt{
width: 300px;
height: 500px;
margin: 0 auto;
border: 1px solid #000;
/*float: right;*/
}
audio{
position: relative;
left: 50%;
margin-left: -150px;
}
</style>
</head>
<body>
<audio src="" controls="controls"></audio>
<div id="txt"></div>
</body>
<script src="js/jquery-3.1.1.min.js"></script>
<script>
var data = [
{
"title":'测试文本',
// "time":[10,23,52,70,194,256],
"audio_src":'http://mp3dkm.oss-cn-shanghai.aliyuncs.com/test/2.mp3',
"message":['[00:00:01]10s内测试文本','[00:00:10]10s至50s，测试文本','[00:00:50]50s开始，这是一段很长的测试文本。一直到2m13s','[00:02:13]2m13s至3m28s测试文本','[00:03:28]测试文本结束']
}
];
//获取音频地址并添加
var src = data[0].audio_src;
$('audio').attr('src',src);
//定义出来方便以后用
var lrc = '';
var time = '';
//获取信息数据
var message = data[0].message;
//遍历
$.each(message, function (index, value) {
//调整需要显示到p标签的文字
var lrc0 = message[index].split(']');
lrc = lrc0[1];
//创建p标签，把文字加进去
var p = $('<p>'+ lrc +'</p>');
//插入到文本框
$('#txt').append(p);
//调整时间
var time0 = lrc0[0];
var time1 = time0.split('[');
var time2 = time1[1].split(':');
//监听音频播放时间
$('audio')[0].addEventListener('timeupdate', function () {
//转换数据类型一致
var currentTime = parseInt($('audio')[0].currentTime);
time = parseInt(time2[0]*60*60)+parseInt(time2[1]*60)+parseInt(time2[2]);
//为每个创建的p标签动态加id
p.attr('id','lrc'+time);
if(time <= currentTime){
p.css('color','red')
}else {
p.css('color','black')
}
//点击歌词定位播放时间
p.click(function () {
//把id的数字部分取出来
var cTime = parseInt(this.id.split('c')[1]);
$('audio')[0].currentTime = cTime;
})
})
});
</script>
</html>
