基于javaｓｃｒｉｐｔ的歌词滚动播放

各种音乐播放器都有自动滚动和播放歌词的功能。当前歌词将在中间突出显示，即使歌词改变，功能也可以正常居中。这个函数是如何实现基于Javaｓｃｒｉｐｔ的歌词滚动播放的请看下面的细节。

一般的音乐播放器歌词都是LRC。为了处理这个问题，我们使用了XML格式的歌词。引入了一个网站：中文歌词库。它提供了XML格式的歌词。

让我们来看看这个例子的最终效果。
下面是基于jQuery的具体代码：

球员

#音频包装{
border: 1px solid；
文本对齐：中心；
}
激活{。
颜色：# 33b；
字体粗细：粗体；
背景：# DDF；
}
# LRC {
文本对齐：中心；
宽度：360px；
身高：400px；
溢出：隐藏；
边境：2px固体# DDD；
影子：2px 2px 2px银盒；
}
歌词容器{
职位：相对；
宽度：99%；
身高：80%；
border: 1px solid红；
溢出：隐藏；
}
lyrics-container2 {。
位置：绝对；
宽度：355px；
}
# LRC p {
文本缩进：0；
保证金：0；
填料：6px；
}
音乐标题，专辑，艺术家{
保证金：0；
填料：4px；
文本缩进：0；
文本对齐：左对齐；
}

$（文档）Ready（函数（）{）
VaR（# LRC =美元美元的LRC）；
html =；
$（'audio '），（扮演的功能（））{
var开始=新日期（）；
如果（$ LRC。HTML）= = {（' '）
$ ajax（{
网址：数据/ XML的爱美，
类型：' '，
DataType：'xml，
成功：函数（数据）{
html；
如果（$（数据）。找到（标题）。长> 0）{
HTML + = +歌曲：$（数据）。找到（标题）（文本）+；
}
如果（$（数据），发现（'album）。长> 0）{
HTML + = +专辑：$（数据），发现（'album '）（文本）+；
}
如果（$（数据），发现（'artist）。长> 0）{
HTML + =唱歌：+ $（数据），发现（'artist '）（文本）+；
}
html；
html
html
$（数据），发现（'lrc）。每个（函数（）{（）{）
HTML + + $（这个）（文本）+；
}）；
html；
lrc.html美元（HTML）；
/ /警报（$（数据），发现（'lrc）。长度）；
}
}）；
}
VaR定时器= setInterval（）函数（）{
var现在=新日期（）；
var =现在-开始；
如果（lrc.find美元（的歌词）。长度）{
lrc.find美元（的歌词）。每个（function（））{
VAR都经过$（this）= Attr（'tag）；
如果（即可0）{
lrc.find美元（的歌词）。RemoveClass（激活的）；
$（这）AddClass（激活的）；
如果（$（this）。PrevAll（的歌词）。长> 3）{
$（'。lyrics-container2动画（{）。
'顶'：' = 30px
}）；
/ / console.log（$（this）。PrevAll（的歌词）。长度）；
}
}
}）；
}
}，10）；
}）；
}）；
以上内容是基于这篇文章的细节，基于javaｓｃｒｉｐｔ如何实现歌词的全部内容滚动播放，希望大家喜欢。