js歌词滚动怎么做 react

JS歌词滚动怎么做 React

要实现JS歌词滚动在React应用中，核心步骤包括获取歌词数据、解析歌词、设置时间同步、实现滚动效果。 在这篇文章中，我们将详细探讨如何在React中实现歌词滚动效果，并提供具体的代码示例和实现思路。

一、获取歌词数据

歌词数据通常以LRC格式存储，这是一种简单的文本格式，每行包含时间标签和对应的歌词文本。首先，我们需要获取歌词数据，可以通过API请求或本地文件读取的方式获取。

// 示例获取歌词数据
const fetchLyrics = async () => {
  const response = await fetch('path/to/lyrics.lrc');
  const text = await response.text();
  return text;
};

二、解析歌词

解析歌词是将LRC格式的文本转换为可以处理的JavaScript对象。我们可以使用正则表达式来匹配时间标签和歌词文本。

const parseLyrics = (lrc) => {
  const lines = lrc.split('n');
  const lyrics = lines.map(line => {
    const match = line.match(/[(d{2}):(d{2}).(d{2})](.*)/);
    if (match) {
      const minutes = parseInt(match[1], 10);
      const seconds = parseInt(match[2], 10);
      const milliseconds = parseInt(match[3], 10);
      const time = minutes * 60 * 1000 + seconds * 1000 + milliseconds;
      const text = match[4].trim();
      return { time, text };
    }
    return null;
  }).filter(Boolean);
  return lyrics;
};

三、设置时间同步

为了实现歌词的滚动，我们需要根据播放的时间来同步显示当前的歌词。可以使用HTML5 Audio API获取当前播放时间，并根据时间匹配对应的歌词。

const synchronizeLyrics = (audioRef, lyrics) => {
  audioRef.current.addEventListener('timeupdate', () => {
    const currentTime = audioRef.current.currentTime * 1000; // 转换为毫秒
    const currentLyric = lyrics.find((lyric) => currentTime >= lyric.time);
    if (currentLyric) {
      // 更新显示的歌词
      setCurrentLyric(currentLyric.text);
    }
  });
};

四、实现滚动效果

为了实现滚动效果，我们需要在React组件中动态更新歌词的显示位置。可以使用CSS和React的state来实现滚动效果。

import React, { useEffect, useRef, useState } from 'react';
const LyricsScroller = ({ lyrics }) => {
  const [currentLyric, setCurrentLyric] = useState('');
  const lyricsRef = useRef(null);
  useEffect(() => {
    const audioRef = document.getElementById('audio');
    synchronizeLyrics(audioRef, lyrics);
  }, [lyrics]);
  return (
    <div className="lyrics-container" ref={lyricsRef}>
      {lyrics.map((lyric, index) => (
        <div
          key={index}
          className={`lyric-line ${currentLyric === lyric.text ? 'active' : ''}`}
        >
          {lyric.text}
        </div>
      ))}
    </div>
  );
};

五、样式和优化

在CSS中设置滚动效果和样式，例如高亮当前歌词行，平滑滚动等。

.lyrics-container {
  height: 300px;
  overflow-y: auto;
  position: relative;
}
.lyric-line {
  padding: 10px;
  transition: color 0.3s;
}
.lyric-line.active {
  color: #ff0000;
}

六、综合示例

结合以上步骤，我们可以实现一个完整的React组件来展示歌词滚动效果。

import React, { useEffect, useRef, useState } from 'react';
const LyricsScroller = ({ lyricsUrl }) => {
  const [lyrics, setLyrics] = useState([]);
  const [currentLyric, setCurrentLyric] = useState('');
  const lyricsRef = useRef(null);
  const audioRef = useRef(null);
  useEffect(() => {
    const fetchLyrics = async () => {
      const response = await fetch(lyricsUrl);
      const text = await response.text();
      const parsedLyrics = parseLyrics(text);
      setLyrics(parsedLyrics);
    };
    fetchLyrics();
    const audioElement = document.getElementById('audio');
    audioRef.current = audioElement;
    synchronizeLyrics(audioElement, parsedLyrics);
  }, [lyricsUrl]);
  const parseLyrics = (lrc) => {
    const lines = lrc.split('n');
    return lines.map(line => {
      const match = line.match(/[(d{2}):(d{2}).(d{2})](.*)/);
      if (match) {
        const minutes = parseInt(match[1], 10);
        const seconds = parseInt(match[2], 10);
        const milliseconds = parseInt(match[3], 10);
        const time = minutes * 60 * 1000 + seconds * 1000 + milliseconds;
        const text = match[4].trim();
        return { time, text };
      }
      return null;
    }).filter(Boolean);
  };
  const synchronizeLyrics = (audioElement, lyrics) => {
    audioElement.addEventListener('timeupdate', () => {
      const currentTime = audioElement.currentTime * 1000;
      const currentLyric = lyrics.find((lyric) => currentTime >= lyric.time);
      if (currentLyric) {
        setCurrentLyric(currentLyric.text);
      }
    });
  };
  return (
    <div className="lyrics-container" ref={lyricsRef}>
      {lyrics.map((lyric, index) => (
        <div
          key={index}
          className={`lyric-line ${currentLyric === lyric.text ? 'active' : ''}`}
        >
          {lyric.text}
        </div>
      ))}
      <audio id="audio" controls>
        <source src="path/to/audio/file.mp3" type="audio/mpeg" />
      </audio>
    </div>
  );
};
export default LyricsScroller;

七、进一步优化和扩展

在实际应用中，可能需要进一步优化和扩展，例如：

缓存歌词数据：避免重复请求歌词数据，可以将歌词数据缓存在本地。
支持多种格式：除了LRC格式，还可以支持其他格式的歌词文件。
响应式设计：确保歌词滚动效果在不同设备上的显示效果良好。
与项目管理系统集成：如果在项目团队中使用，可以推荐使用研发项目管理系统PingCode，和通用项目协作软件Worktile来协作和跟踪任务。

通过以上步骤和示例代码，我们可以在React应用中实现一个功能完善的JS歌词滚动效果，为用户提供更好的音乐体验。