js实现SHUT DOWN整首歌的歌词固定长度显示在屏幕并实现滚动效果，单句歌词的提亮效果的完整代码

下面是一个实现SHUT DOWN整首歌的歌词固定长度显示在屏幕并实现滚动效果，单句歌词的提亮效果的完整代码：

HTML 代码：

<div class="lyrics-container">
  <div class="lyrics"></div>
</div>
<audio src="song.mp3"></audio>

CSS 代码：

.lyrics-container {
  width: 400px;
  height: 400px;
  overflow: hidden;
}

.lyrics {
  height: auto;
  padding: 5px;
  font-size: 16px;
  line-height: 1.5em;
  text-align: center;
  transition: all 0.5s ease-in-out;
}

JavaScript 代码：

// 歌词数据
var lyrics = [
  { time: 0, text: "Shut down, shut it down" },
  { time: 5, text: "Shut it down, shut it down" },
  { time: 10, text: "We're gonna shut it down" },
  { time: 15, text: "Shut it down, shut it down" },
  { time: 20, text: "Shut it down, shut it down" },
  { time: 25, text: "We're gonna shut it down" },
  { time: 30, text: "Shut it down, shut it down" },
  { time: 35, text: "Shut it down, shut it down" },
  { time: 40, text: "We're gonna shut it down" },
  { time: 45, text: "Shut it down, shut it down" },
  { time: 50, text: "Shut it down, shut it down" },
  { time: 55, text: "We're gonna shut it down" },
  { time: 60, text: "Shut it down, shut it down" },
  { time: 65, text: "Shut it down, shut it down" },
  { time: 70, text: "We're gonna shut it down" },
  { time: 75, text: "Shut it down, shut it down" },
  { time: 80, text: "Shut it down, shut it down" },
  { time: 85, text: "We're gonna shut it down" },
  { time: 90, text: "Shut it down, shut it down" },
  { time: 95, text: "Shut it down, shut it down" },
  { time: 100, text: "We're gonna shut it down" }
];

// 获取歌词区域元素
var lyricsContainer = document.querySelector('.lyrics-container');
var lyricsDiv = document.querySelector('.lyrics');

// 获取音频元素
var audio = document.querySelector('audio');

// 当前播放的歌词索引
var currentLyric = 0;

// 每隔一段时间检查当前播放的时间是否与某个歌词的时间匹配
setInterval(function() {
  // 获取当前播放的时间
  var currentTime = audio.currentTime;

  // 如果当前播放的时间大于等于下一句歌词的时间，就显示下一句歌词
  if (currentTime >= lyrics[currentLyric].time) {
    // 更新当前播放的歌词索引
    currentLyric++;

    // 更新歌词区域的内容
    lyricsDiv.innerHTML = lyrics[currentLyric].text;

    // 将歌词区域滚动到该歌词的位置
    lyricsDiv.scrollTop = lyricsDiv.scrollHeight;

    // 如果当前歌词不是第一句，就将上一句歌词变暗
    if (currentLyric > 1) {
      var prevLyric = lyrics[currentLyric - 2];
      var prevLyricElement = document.querySelector('[data-time="' + prevLyric.time + '"]');
      prevLyricElement.style.opacity = 0.5;
    }

    // 将当前歌词变亮
    var currentLyricElement = document.querySelector('[data-time="' + lyrics[currentLyric - 1].time + '"]');
    currentLyricElement.style.opacity = 1;

    // 如果当前歌词已经到达歌词区域底部，就将歌词区域向上移动一行
    if (lyricsDiv.scrollHeight - lyricsDiv.scrollTop <= lyricsContainer.clientHeight) {
      lyricsDiv.style.transform = 'translateY(-' + (lyricsDiv.clientHeight + 10) + 'px)';
    }
  }
}, 100);

// 初始化歌词区域的内容
lyricsDiv.innerHTML = lyrics[0].text;

// 将歌词数据添加到歌词区域
lyrics.forEach(function(lyric) {
  var lyricElement = document.createElement('div');
  lyricElement.textContent = lyric.text;
  lyricElement.setAttribute('data-time', lyric.time);
  lyricsDiv.appendChild(lyricElement);
});

在这个示例中，我们将歌词数据存储在数组中，并将每句歌词作为一个 div 元素添加到歌词区域中。每隔一段时间检查当前播放的时间是否与某个歌词的时间匹配，如果匹配，则将该歌词显示在歌词区域中，并将歌词区域滚动到该歌词的位置。同时，将当前歌词变亮，上一句歌词变暗，并且如果当前歌词已经到达歌词区域底部，就将歌词区域向上移动一行。

这样就可以实现SHUT DOWN整首歌的歌词固定长度显示在屏幕并实现滚动效果，单句歌词的提亮效果了。