如何在html中实现滚动歌词
时间: 2024-05-13 19:17:16 浏览: 7
要在 HTML 中实现滚动歌词,你需要使用 JavaScript 和 CSS。下面是一些基本的步骤:
1. 在 HTML 中创建一个 `<div>` 元素,用于显示歌词。
2. 使用 CSS 样式来设置 `<div>` 元素的位置、宽度和高度,并将其设置为滚动。
3. 在 JavaScript 中,将歌词存储在数组中,然后使用 setInterval() 函数来定时更新歌词。
4. 在每个时间间隔中,更新歌词的显示,并将 `<div>` 元素的 scrollTop 属性设置为当前歌词的位置,以实现滚动效果。
以下是一个简单的示例代码:
HTML:
```
<div id="lyrics"></div>
```
CSS:
```
#lyrics {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 100px;
overflow: hidden;
white-space: nowrap;
}
```
JavaScript:
```
var lyrics = [
{ time: 0, text: "Verse 1" },
{ time: 5, text: "Line 1" },
{ time: 10, text: "Line 2" },
{ time: 15, text: "Line 3" },
{ time: 20, text: "Chorus" },
{ time: 25, text: "Line 1" },
{ time: 30, text: "Line 2" },
{ time: 35, text: "Line 3" },
{ time: 40, text: "Verse 2" },
{ time: 45, text: "Line 1" },
{ time: 50, text: "Line 2" },
{ time: 55, text: "Line 3" },
];
var currentIndex = 0;
var lyricDiv = document.getElementById("lyrics");
setInterval(function() {
var currentTime = Math.floor(audioElement.currentTime);
for (var i = currentIndex; i < lyrics.length; i++) {
if (lyrics[i].time <= currentTime) {
currentIndex = i;
lyricDiv.innerHTML = lyrics[i].text;
break;
}
}
lyricDiv.scrollTop = currentIndex * 20;
}, 100);
```
在这个示例中,歌词存储在数组 lyrics 中,每个对象包含歌词的时间和文本。定时器每 100 毫秒更新一次,检查当前播放时间并找到应该显示的歌词。然后,将当前歌词显示在 `<div>` 元素中,并将 scrollTop 属性设置为当前歌词的位置。