基于JavaScript怎么实现让歌词滚动播放

时间：2021-05-25

各种音乐播放器上都有一个自动滚动播放歌词的功能，当前滚动到的歌词会高亮居中显示，即使歌词被换行也能正常居中，那么这个功能基于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怎么实现让歌词滚动播放的全部内容，希望大家喜欢。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章