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

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

核心JS代码如下：

 

 
     
     
          
  1. var video = document.querySelector('audio'); 
    2.  
          
  2. var control = document.querySelector('.scroll p'); 
    3.  
          
  3. var scroll = document.querySelector('.scroll span'); 
    4.  
          
  4. var lrc = document.querySelector('.lrc ul') 
    5.  
          
  5. var times = document.getElementsByClassName('time'); 
    6.  
          
  6. var time = []; 
    7.  
          
  7. for(var i=0;i<times.length;i++){ 
    8.  
          
  8. time[i]=times[i].innerText; 
    9.  
          
  9. } 
    10.  
          
  10. control.onclick = function (){ 
    11.  
          
  11. if(video.paused){ 
    12.  
          
  12. video.play(); 
    13.  
          
  13. control.style.backgroundImage='url(btn1.png)'; 
    14.  
          
  14. } 
    15.  
          
  15. else{ 
    16.  
          
  16. video.pause(); 
    17.  
          
  17. control.style.backgroundImage='url(btn2.png)'; 
    18.  
          
  18. } 
    19.  
          
  19. } 
    20.  
          
  20. var num=0; 
    21.  
          
  21. var top1=30; 
    22.  
          
  22. video.addEventListener('timeupdate',function (){ 
    23.  
          
  23. var t=video.currentTime/video.duration ; 
    24.  
          
  24. scroll.style.height=t*300+'px'; 
    25.  
          
  25. if(t*300>=60){ 
           control.style.opacity='0.2';} 
    26.  
          
  26. if(t*video.duration>=time[num]&&t*video.duration<=time[num+1]){ 
    27.  
          
  27. top1-=30; 
    28.  
          
  28. num++; 
    29.  
          
  29. lrc.style.top=top1+'px'; 
    30.  
          
  30. } 
    31.  
          
  31. else if(t*video.duration>=time[num+1]){ 
           top1-=30;num++;console.log(num);} 
    32.  
          
  32. else if(t*video.duration<time[num]){top1+=30;num--;} 
    33.  
          
  33. },false) 
    34.