React实现歌词滚动效果(跟随音乐播放时间滚动)

这篇文章将为大家详细讲解有关React实现歌词滚动效果(跟随音乐播放时间滚动)，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

React实现歌词滚动效果（跟随音乐播放时间滚动）

引言

在音乐播放器中，动态歌词滚动效果是用户体验的关键部分。本教程将引导你使用React实现这种效果，让歌词随着音乐播放时间同步滚动。

创建歌曲播放器组件

首先，创建一个名为 MusicPlayer 的React组件来管理音乐播放和歌词显示。

import React, { useState, useEffect } from "react";
import { useRef } from "react";
import "./styles.css";

const MusicPlayer = () => {
  const [isPlaying, setIsPlaying] = useState(false);
  const [currentTime, setCurrentTime] = useState(0);
  // ... Rest of the component
};

添加歌词文本

将歌词文本存储在一个数组中，每个元素代表一行歌词。

const lyrics = ["Line 1", "Line 2", "Line 3", "..."];

监听播放时间更新

使用 useEffect 钩子监听音乐播放器的当前时间更新。

useEffect(() => {
  const interval = setInterval(() => {
    if (isPlaying) {
      setCurrentTime(prevTime => prevTime + 1);
    }
  }, 1000);
  return () => clearInterval(interval);
}, [isPlaying]);

滚动歌词

使用 currentTime 来确定应显示的歌词行。

const currentLyricIndex = Math.floor(currentTime / 1000);

然后使用CSS动画为当前歌词行添加滚动效果。

.lyrics-container {
  animation: lyrics-scroll ${lyrics.length}s linear infinite;
  animation-play-state: paused;
}

@keyframes lyrics-scroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, -${currentLyricIndex * 20}px, 0);
  }
}

控制播放和暂停

添加播放和暂停按钮来控制音乐播放。

<button onClick={() => setIsPlaying(true)}>播放</button>
<button onClick={() => setIsPlaying(false)}>暂停</button>

同步歌词和音乐

当音乐播放时，启动歌词滚动动画。

useEffect(() => {
  if (isPlaying) {
    document.querySelector(".lyrics-container").style.animationPlayState = "running";
  } else {
    document.querySelector(".lyrics-container").style.animationPlayState = "paused";
  }
}, [isPlaying]);

最终代码

以下提供了完整的React组件代码：

import React, { useState, useEffect } from "react";
import { useRef } from "react";
import "./styles.css";

const MusicPlayer = () => {
  const [isPlaying, setIsPlaying] = useState(false);
  const [currentTime, setCurrentTime] = useState(0);
  const lyrics = ["Line 1", "Line 2", "Line 3", "..."];

  useEffect(() => {
    const interval = setInterval(() => {
      if (isPlaying) {
        setCurrentTime(prevTime => prevTime + 1);
      }
    }, 1000);
    return () => clearInterval(interval);
  }, [isPlaying]);

  const currentLyricIndex = Math.floor(currentTime / 1000);

  useEffect(() => {
    if (isPlaying) {
      document.querySelector(".lyrics-container").style.animationPlayState = "running";
    } else {
      document.querySelector(".lyrics-container").style.animationPlayState = "paused";
    }
  }, [isPlaying]);

  return (
    <div className="music-player-container">
      <div className="lyrics-container">
        {lyrics.map((lyric, idx) => (
          <p key={idx} className={`lyric-line ${idx === currentLyricIndex ? "current-lyric" : ""}`}>
            {lyric}
          </p>
        ))}
      </div>
      <div className="controls">
        <button onClick={() => setIsPlaying(true)}>播放</button>
        <button onClick={() => setIsPlaying(false)}>暂停</button>
      </div>
    </div>
  );
};

export default MusicPlayer;

总结

通过使用React的 useState、useEffect 和 CSS 动画，可以轻松地实现歌词滚动效果。该效果可以增强音乐播放器的用户体验，让用户更容易跟随歌词，提升整体音乐聆听体验。

以上就是React实现歌词滚动效果(跟随音乐播放时间滚动)的详细内容，更多请关注编程学习网其它相关文章！