집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript_javascript 기술을 기반으로 가사 스크롤 재생을 구현하는 방법

JavaScript_javascript 기술을 기반으로 가사 스크롤 재생을 구현하는 방법

WBOY원래의: 2016-05-16 15:33:553335검색

다양한 음악 플레이어에는 자동으로 가사를 스크롤하여 재생하는 기능이 있습니다. 현재 스크롤된 가사가 강조 표시되고 중앙에 정렬됩니다. 그러면 이 기능을 JavaScript 기반으로 어떻게 구현할 수 있습니까? 가사를 스크롤 하시겠습니까? 자세한 내용은 아래를 참조하세요.

일반적으로 음악 플레이어에서 사용하는 가사 형식은 lrc입니다. 여기서는 처리를 용이하게 하기 위해 가사를 XML 형식으로 사용합니다. 웹사이트 소개: 중국어 가사 라이브러리. XML 형식으로 가사를 제공합니다.

이 예시의 최종 효과를 살펴보겠습니다.

다음은 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>

위 내용은 본 글에서 JavaScript를 기반으로 가사 스크롤 재생을 구현하는 방법에 대한 자세한 설명입니다.

성명：

이전 기사：javascript에서 자주 사용되는 함수 (1)_javascript 스킬다음 기사：javascript에서 자주 사용되는 함수 (1)_javascript 스킬

JavaScript_javascript 기술을 기반으로 가사 스크롤 재생을 구현하는 방법

관련 기사