各種音樂(lè)播放器上都有一個(gè)自動(dòng)滾動(dòng)播放歌詞的功能，當(dāng)前滾動(dòng)到的歌詞會(huì)高亮居中顯示，即使歌詞被換行也能正常居中，那么這個(gè)功能基于JavaScript怎么實(shí)現(xiàn)讓歌詞滾動(dòng)播放呢？感興趣的朋友一起看看吧

各種音樂(lè)播放器上都有一個(gè)自動(dòng)滾動(dòng)播放歌詞的功能，當(dāng)前滾動(dòng)到的歌詞會(huì)高亮居中顯示，即使歌詞被換行也能正常居中，那么這個(gè)功能基于JavaScript怎么實(shí)現(xiàn)讓歌詞滾動(dòng)播放呢？請(qǐng)看下文詳解。

一般音樂(lè)播放器使用的歌詞格式都是lrc，為了方便處理，我們這里使用XML格式的歌詞。介紹一個(gè)網(wǎng)站：中文歌詞庫(kù)。它提供xml格式的歌詞。

我們先來(lái)看一下這個(gè)例子的最終效果：

下面是基于jQuery的具體代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Player</title>
 <style type="text/css">
 #audio-wrapper{
  border:1px solid;
  text-align:center;
 }
 .activated{
  color:#33b;
  font-weight:bold;
  background:#ddf;
 }
 #lrc{
  text-align:center;
  width:360px;
  height:400px;
  overflow:hidden;
  border:2px solid #ddd;
  box-shadow:2px 2px 2px silver;
 }
 .lyrics-container{
  position:relative;
  width:99%;
  height:80%;
  border:1px solid red;
  overflow:hidden;
 }
 .lyrics-container2{
  position:absolute;
  width:355px;
 }
 #lrc p{
  text-indent:0;
  margin:0;
  padding:6px;
 }
 .music-title,.album,.artist{
  margin:0;
  padding:4px;
  text-indent:0;
  text-align:left;
 }
 </style>
 <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
</head>
<body>
 <div id="#audio-wrapper">
  <p><audio src="data/aimei.mp3" controls></audio></p>
 </div>
 <div id="lrc"></div>
 <script type="text/javascript">
 $(document).ready(function(){
  var $lrc = $('#lrc');
  var html ='';
  $('audio').on('play',function(){
   var start = new Date();
   if($lrc.html() == ''){
    $.ajax({
     url:'data/aimei.xml',
     type:'get',
     dataType:'xml',
     success:function(data){
      html += '<div class="info">';
      if($(data).find('TITLE').length > 0){
       html += '<p class="music-title">歌曲：' + $(data).find('TITLE').text()+'</p>';
      }
      if($(data).find('ALBUM').length > 0){
       html += '<p class="album">專(zhuān)輯：' + $(data).find('ALBUM').text()+'</p>';
      }
      if($(data).find('ARTIST').length > 0){
       html += '<p class="artist">演唱：' + $(data).find('ARTIST').text()+'</p>';
      }
      html += '</div>';
      html += '<div class="lyrics-container">'
      html += '<div class="lyrics-container2">'
      $(data).find('LRC').each(function(){
       html += '<p class="lyrics" tag="'+ $(this).attr('TAG') +'">' + $(this).text() +'</p>';
      });
      html += '</div></div>';
      $lrc.html(html);
      //alert($(data).find('LRC').length);
     }
    });
   }
   var timer = setInterval(function(){
    var now = new Date();
    var elapsed = now - start;
    if($lrc.find('.lyrics').length){
     $lrc.find('.lyrics').each(function(){
      var isOK = elapsed - $(this).attr('tag');
      if(isOK < 13 && isOK > 0){
       $lrc.find('.lyrics').removeClass('activated');
       $(this).addClass('activated');
       if($(this).prevAll('.lyrics').length > 3){
        $('.lyrics-container2').animate({
         'top':'-=30px'
        });
        //console.log($(this).prevAll('.lyrics').length);
       }
      }
     });
    }    
   },10);
  });
 });
 </script>
</body>
</html>

以上內(nèi)容是本文給大家詳解的基于JavaScript怎么實(shí)現(xiàn)讓歌詞滾動(dòng)播放的全部?jī)?nèi)容，希望大家喜歡。

您可能感興趣的文章: