基于JavaScript怎么实现让歌词滚动播放
作者：CYNICZZZ
字体：[ ] 类型：转载 时间：
各种音乐播放器上都有一个自动滚动播放歌词的功能，当前滚动到的歌词会高亮居中显示，即使歌词被换行也能正常居中，那么这个功能基于JavaScript怎么实现让歌词滚动播放呢？感兴趣的朋友一起看看吧
各种音乐播放器上都有一个自动滚动播放歌词的功能，当前滚动到的歌词会高亮居中显示，即使歌词被换行也能正常居中，那么这个功能基于JavaScript怎么实现让歌词滚动播放呢？请看下文详解。
一般音乐播放器使用的歌词格式都是lrc，为了方便处理，我们这里使用XML格式的歌词。介绍一个网站：中文歌词库。它提供xml格式的歌词。
我们先来看一下这个例子的最终效果：
下面是基于jQuery的具体代码：
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Player&/title&
&style type="text/css"&
#audio-wrapper{
text-align:
.activated{
color:#33b;
font-weight:
background:#
text-align:
height:400
border:2px solid #
box-shadow:2px 2px 2
.lyrics-container{
width:99%;
height:80%;
.lyrics-container2{
text-indent:0;
.music-title,.album,.artist{
text-indent:0;
text-align:
&script type="text/javascript" src="js/jquery-2.1.4.min.js"&&/script&
&div id="#audio-wrapper"&
&p&&audio src="data/aimei.mp3" controls&&/audio&&/p&
&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() == ''){
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 -
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);
以上内容是本文给大家详解的基于JavaScript怎么实现让歌词滚动播放的全部内容，希望大家喜欢。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具?您当前的位置： >
[html5]在html5下做音频Audio标签实现歌词同步效果的音乐播放器
时间: 09:38来源:酷播　 极酷网页播放器
本文介绍在html5下做现歌词同步效果的音乐播放器，附详细的步骤与代码参考，很方便理解。原文作者：刘哇勇，来自文章。
HTML5草案里面其实有原生的字幕标签(&track& Tag)的，但使用的是vtt格式的文件，非常规的字幕（.sub, .srt）或歌词文件（.lrc）。
用法如下（代码来自W3School）：
&width=&320&&height=&240&&controls&&&&src=&forrest_gump.mp4&&type=&video/mp4&&&&&src=&forrest_gump.ogg&&type=&video/ogg&&&&&src=&subtitles_en.vtt&&kind=&subtitles&&srclang=&en&&label=&English&&&&&src=&subtitles_no.vtt&&kind=&subtitles&&srclang=&no&&label=&Norwegian&&&
但遗憾的是，使用起来还有不便之处。一是浏览器支持情况不太理想，连强大的FireFox（目前28.0）都还没支持，这你敢信!?。二是格式不兼容现有字幕或歌词文件，至少得需要个转换工具吧。
所以在它流行起来之前，考虑另外的实现还是有必要的。
效果预览页面：
如果你网速流畅的话，尽情欣赏我精选的这些歌曲吧（不时更新），只是别忘了，也可以fork后添加自己喜欢的歌曲。
项目GitHub地址：
具体实现可以前往项目的GitHub页面下载代码进行查看，下面介绍思路和简单的实现。
歌词文件的格式
实现之前，当然得了解一下歌词文件的格式了。常规歌词文件的格式基本是一句一行，每行由两部分组成，前面是中括号括起来的时间轴，后面紧跟歌词，像下面这样：
[ar:文筱芮]&[by:airplay]&[00:00.00]那个&[00:03.00]作词:文筱芮&作曲:文筱芮&[00:06.00]编曲:于韵非&[00:09.00]制作人:胡海泉&秦天&[00:12.00]演唱:文筱芮&
这样挺有规律的，用正则可以很方便地将时间与歌词提取分离。
但凡事得多个心眼啊。事后发生的事情证明这句话有多正确。我在整理歌词时还发现了另外一种形式，像下面这样：
[ar:庭竹]&[al:爱的九宫格]&[by:airplay]&[00:00.17]庭竹&-&公主的天堂&[00:05.40]作曲:陈嘉唯、Skot&Suyama&陶山、庭竹&[00:07.33]作词:庭竹&[00:15.59]风铃的音谱&在耳边打转&[00:18.62]城堡里&公主也摆脱了黑暗的囚禁&[00:22.82]她一点点地&无声悄悄地慢慢长大&[00:26.36]期待着&深锁木门后的世界&[01:38.72][00:29.76]&[01:51.48][00:30.32]树上&小鸟的轻响&在身边打转&[01:55.35][00:34.09]公主已&忘记木制衣橱背后的惆怅&[01:59.65][00:38.35]她跳舞唱歌天真无邪地寻找属于自己的光亮和快乐&[02:06.98][00:45.76]&[02:07.41][00:46.06]树叶一层层拨开了伪装&[02:11.29][00:50.25]彩虹一步步露出美丽脸庞&无限的光亮&
这种形式的歌词把歌词内容相同但时间不同的部分合并，节省了篇幅。
所以，现在知道的歌词其实有两种写法了，不过都还算规律，用正则可以搞定，只是对于第二种，处理时得将时间再次分割。
首先将LRC文件读取为文本
用String.prototype.split('\n');将整个文本以换行符为单位分隔成一行一行的文本，保存到一个数组中
然后将开头部分不属于歌词的文本去掉，得到只有时间与歌词的干净文件
对于每一行，匹配出时间与文字，分别存入数组[time,text]，然后将每行得到的这样的数组存入一个大的数组[[time,text],[time,text]&]
利用Audio标签的ontimeupdate事件，不断比较当然播放时间audio.currentTime与数组中每个元素中时间，如果当前时间大于某个歌词中的时间，则显示该歌词
在具体处理歌词前，需要解决一个问题就是如何把歌词文件读取到代码中。对于文件读取，JavaScript中可以用，但它需要手动选择文件，也就是你得在页面放一个file类型的input或者实现文件拖拽操作，显示不可能让用户听歌的时候自己去找歌词然后上传，多麻烦。但JavaScript是没有办法操作本地文件的能力的，那就只能通过（Ajax）发起一个到服务器的请求来获得文件了，这样一来，我们的程序就必需得运程在服务器上面。所以当你从GitHub下载了本文的源码后是无法直接运行的，请挂到本地服务器上观看效果。
下面展示了如何发起一个Ajax请求来获得歌词文件。
function&getLyric(url)&{&&&&&//提示建立一个XMLHttpRequest请求&&&&&var&request&=&new&XMLHttpRequest();&&&&&//配置,&url为歌词地址，比如：'./content/songs/foo.lrc'&&&&&request.open('GET',&url,&true);&&&&&//因为我们需要的歌词是纯文本形式的，所以设置返回类型为文本&&&&&request.responseType&=&'text';&&&&&//一旦请求成功，但得到了想要的歌词了&&&&&request.onload&=&function()&{&&&&&&&&&//这里获得歌词文件&&&&&&&&&var&lyric&=&request.&&&&&};&&&&&//向服务器发送请求&&&&&request.send();&}&
交流QQ群：下载到手机:
热门搜索：
(window.slotbydup=window.slotbydup || []).push({
id: '2861991',
container: s,
size: '636,164',
display: 'inlay-fix'