音乐歌词

音乐歌词

开始学习HTML5和css3了，刚学了audio和video标签就做了一个简单的同步歌词的播放器，很简单，没什么技术含量……嘿嘿！

原理很简单就是通过给audio添加一个timeupdate事件，每当播放时间改变的时候就获取当前播放时间来改变歌词top值，使歌词上移。

核心JS代码如下：

var video = document.querySelector('audio');
var control = document.querySelector('.scroll p');
var scroll = document.querySelector('.scroll span');
var lrc = document.querySelector('.lrc ul')
var times = document.getElementsByClassName('time');
var time = [];
for(var i=0;i<times.length;i++){
time[i]=times[i].innerText;
}
control.onclick = function (){
if(video.paused){
video.play();
control.style.backgroundImage='url(btn1.png)';
}
else{
video.pause();
control.style.backgroundImage='url(btn2.png)';
}
}
var num=0;
var top1=30;
video.addEventListener('timeupdate',function (){
var t=video.currentTime/video.duration ;
scroll.style.height=t*300+'px';
if(t*300>=60){control.style.opacity='0.2';}
if(t*video.duration>=time[num]&&t*video.duration<=time[num+1]){
top1-=30;
num++;
lrc.style.top=top1+'px';
}
else if(t*video.duration>=time[num+1]){top1-=30;num++;console.log(num);}
else if(t*video.duration<time[num]){top1+=30;num--;}
},false)