index.js

/**
 * @description: 处理歌词格式
 * @return lrc array
 * @author: gmx
 */
function parseLrc(lrcStr) {
  var lines = lrcStr.split("\n");
  const lrcArr = [];
  for (let i = 0; i < lines.length; i++) {
    let [times, words] = lines[i].split("]");
    lrcArr.push({ time: parseTime(times.substring(1)), text: words });
  }
  return lrcArr;
}

/**
 * @description: 创建li歌词dom
 * @return {*}
 * @author: gmx
 */
function generateLyrics() {
  var frag = document.createDocumentFragment();
  for (let i = 0; i < lyrics.length; i++) {
    var li = document.createElement("li");
    li.textContent = lyrics[i].text;
    frag.appendChild(li);
  }
  ul.appendChild(frag);
}

/**
 * @description: 查找高亮歌词的index
 * @return {*}
 * @author: gmx
 */
function findIndex() {
  var currentTime = audio.currentTime;
  var index = lyrics.findIndex((e) => e.time > currentTime);
  if (index === -1) {
    index = lyrics.length;
  }
  return index - 1;
}

/**
 * @description: 歌词偏移及高亮
 * @return {*}
 * @author: gmx
 */
function setOffset() {
  var index = findIndex();
  var offset = liHeight * index + liHeight / 2 - containerHeight / 2;
  if (offset < 0) {
    offset = 0;
  } else if (offset > maxOffset) {
    offset = maxOffset;
  }
  ul.style.transform = `translateY(-${offset}px)`;
  // 去掉前行歌词高亮
  var li = document.querySelector(".active");
  if (li) {
    li.classList.remove("active");
  }
  ul.children[index]?.classList.add("active");
}

/**
 * @description: 分秒转换为秒
 * @return {*}
 * @author: gmx
 */
function parseTime(timeStr) {
  var [minite, other] = timeStr.split(":");
  var [second, _] = other.split(".");
  var seconds = Number(minite) * 60 + Number(second);
  return seconds;
}

const audio = document.getElementById('audio');
const playPauseBtn = document.getElementById('playPauseBtn');
const nextBtn = document.getElementById('nextBtn');
const progressContainer = document.getElementById('progressContainer');
const progressBar = document.getElementById('progressBar');
const timeDisplay = document.getElementById('timeDisplay');
const lyricsContainer = document.querySelector('.lyrics-container');
const ul = document.querySelector("ul");
const lyrics = parseLrc(lrc);
generateLyrics();
// 容器高度
const containerHeight = lyricsContainer.clientHeight;
const liHeight = ul.children[0].clientHeight;
// 最大偏移量
const maxOffset = ul.clientHeight - containerHeight;


function formatTime(seconds) {
  const minutes = Math.floor(seconds / 60);
  const secs = Math.floor(seconds % 60);
  return `${minutes}:${secs < 10 ? '0' : ''}${secs}`;
}

playPauseBtn.addEventListener('click', () => {
  if (audio.paused) {
    audio.play();
    playPauseBtn.classList.remove('play');
    playPauseBtn.classList.add('pause');
  } else {
    audio.pause();
    playPauseBtn.classList.remove('pause');
    playPauseBtn.classList.add('play');
  }
});

nextBtn.addEventListener('click', () => {
  // 这里可以添加切换到下一首歌曲的逻辑
  audio.currentTime = 0;
  audio.play();
  playPauseBtn.classList.remove('play');
  playPauseBtn.classList.add('pause');
});

audio.addEventListener('timeupdate', () => {
  const progressPercent = (audio.currentTime / audio.duration) * 100;
  progressBar.style.width = `${progressPercent}%`;
  timeDisplay.textContent = `${formatTime(audio.currentTime)} / ${formatTime(audio.duration)}`;
  setOffset();
});

audio.addEventListener('ended', () => {
  playPauseBtn.classList.remove('pause');
  playPauseBtn.classList.add('play');
});

audio.addEventListener('loadedmetadata', () => {
  timeDisplay.textContent = `00:00 / ${formatTime(audio.duration)}`;
});