Cara melaksanakan main balik menatal lirik berdasarkan kemahiran JavaScript

Cara melaksanakan main balik menatal lirik berdasarkan kemahiran JavaScript_javascript

WBOY

Lepaskan： 2016-05-16 15:33:55

asal

3334 orang telah melayarinya

Pelbagai pemain muzik mempunyai fungsi untuk menatal dan memainkan lirik secara automatik scroll lirik? Sila lihat butiran di bawah.

Secara amnya, format lirik yang digunakan oleh pemain muzik ialah lrc Untuk memudahkan pemprosesan, kami menggunakan lirik dalam format XML di sini. Memperkenalkan tapak web: perpustakaan lirik bahasa Cina. Ia menyediakan lirik dalam format xml.

Mari kita lihat kesan akhir contoh ini:

Berikut ialah kod khusus berdasarkan 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">专辑：' + $(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>

Salin selepas log masuk

Kandungan di atas ialah penjelasan terperinci tentang cara melaksanakan main balik tatal lirik berdasarkan JavaScript dalam artikel ini.