什么是滚动歌词
滚动歌词是指歌词文字随着歌曲播放在屏幕上滚动的效果，可以帮助人们更好地理解歌曲内容，拍打节奏等。滚动歌词最初是在卡拉OK等场所使用的，而现在已经广泛应用于音乐播放器、网站和移动应用程序。
HTML如何制作滚动歌词
使用Marquee标签
Marquee标签是HTML中一种用于制作滚动效果的标准标签，该标签可以很容易地实现歌词滚动的效果。
<marquee>这里是滚动的歌词</marquee>如上代码所示，marquee标签将会把歌词“这里是滚动的歌词”显示在一个滚动的区域内，不断地向左滚动。但是，marquee标签已经被W3C标准弃用，因此在使用时需要注意它的兼容性问题。
使用CSS和JavaScript
可以使用CSS来创建一个滚动的歌词区域，然后使用JavaScript来控制歌词的滚动。
首先，需要使用CSS中的position、overflow和animation等属性来创建一个滚动区域，例如：
<div id="lyric">这里是滚动的歌词</div>
<style>
#lyric {
position: relative;
overflow: hidden;
animation: scroll 10s linear infinite;
}
@keyframes scroll {
0% { top: 0; }
100% { top: -100px; }
}
</style>
如上代码所示，div元素的position属性被设置为relative，overflow属性被设置为hidden，使得元素内部的内容不会直接显示出来。同时，使用动画关键帧来控制歌词的滚动，该动画会让lyric元素内部的内容在10秒内循环播放，并向上滚动100px的距离。
然后，使用JavaScript来读取歌词文件，根据歌曲播放时间来动态调整滚动歌词的位置。例如：
<script>
var lyric = document.getElementById("lyric");
var lyricText = "歌词文件内容";
var timeList = [0, 10, 20]; // 此处为示例，实际应为对应歌词的播放时间点
lyric.innerText = lyricText;
lyric.scrollTop = 0;
lyric.addEventListener("animationiteration", function() {
var currentTime = audio.currentTime;
var index = 0;
while (currentTime > timeList[index]) {
index++;
}
lyric.scrollTop = (index - 1) * 30; // 每行歌词高度为30px
});
</script>
该JavaScript代码会在歌曲播放期间监听滚动歌词的animationiteration事件，根据当前的播放时间找到对应的歌词位置，并将滚动区域的scrollTop属性设置为相应的高度。需要注意的是，这里歌词滚动区域中每行歌词的高度被设置为30px。
总结
本文介绍了如何使用Marquee标签和CSS+JavaScript来实现HTML中的滚动歌词。Marquee标签虽然已经被弃用，但是它在一些老式的浏览器中还是可以使用的。而使用CSS和JavaScript可以创建更加兼容的滚动歌词，并且可以实现更加自由、复杂的效果。
需要注意的是，滚动歌词的制作需要较强的JavaScript编程能力，同时还需要考虑到文件读取、歌词格式解析等问题，因此在实际编程中还需要查阅相关的技术文档和工具库。