如何从头开始构建 React 音乐播放器简介先决条件和设置环境依赖项 Player.js 输出附加功能结论

2025-05-24

如何从头开始构建 React 音乐播放器

介绍

先决条件和环境设置

依赖项

Player.js

输出

附加功能

结论

介绍

任何正在学习 React 并希望用 React 构建项目的人。市面上有很多博客和文章为开发者提供此类项目的指导。我的确会浏览这些文章，但其中总少了一种项目。那就是音乐播放器和视频播放器。这两个项目都能让你有机会处理音频和视频。你将学到很多东西，例如如何处理音频以播放和暂停音频。

今天，我们将用 React 构建一个音乐播放器。我们将讨论以下主题：

  • 设置环境
  • 播放/暂停音频
  • 音频处理时间（以当前时间和音频完整时长计算）
  • 为音频时间线添加范围滑块

完成项目后，我们的音乐播放器将如下所示。

React 音乐播放器

如果这让您感到兴奋，那么我们就开始吧。

先决条件和环境设置

我假设您已了解以下技术：

  • JavaScript
  • HTML/CSS
  • 基本反应

环境设置很简单。你需要预先安装node.js，以便在终端中运行 node 相关命令。

导航到要创建项目的目录。现在，运行终端并输入以下命令来安装 React 项目。

npx create-react-app react-music-player
Enter fullscreen mode Exit fullscreen mode

删除所有样板代码和不必要的代码。现在我们可以开始了。

依赖项

我们需要在我们的项目中安装以下库：

  • use-sound：这将处理音频文件。它将加载、播放和暂停音频以及其他功能。

使用以下命令安装：

npm i use-sound
Enter fullscreen mode Exit fullscreen mode
  • react-icons：用于在我们的播放器中添加播放、暂停、下一个和上一个图标。

使用以下命令安装它：

npm i react-icons
Enter fullscreen mode Exit fullscreen mode

Player.js

在该文件夹中创建一个component目录src。在其中创建一个名为 的组件Player.js。该组件将成为我们的音乐播放器。

导入

根据文件中要导入的库。你可以在这里查看：

import { useEffect, useState } from "react"; 
import useSound from "use-sound"; // for handling the sound
import qala from "../assets/qala.mp3"; // importing the music
import { AiFillPlayCircle, AiFillPauseCircle } from "react-icons/ai"; // icons for play and pause
import { BiSkipNext, BiSkipPrevious } from "react-icons/bi"; // icons for next and previous track
import { IconContext } from "react-icons"; // for customazing the icons
Enter fullscreen mode Exit fullscreen mode

您可以查看评论以了解导入的解释。

播放和暂停音频

让我们实现播放器的强制功能，即播放和暂停音频。

在顶部，我们有一个isPlaying状态用于存储播放器的当前状态。这将有助于根据播放器的状态有条件地渲染播放/暂停图标。

const [isPlaying, setIsPlaying] = useState(false);
Enter fullscreen mode Exit fullscreen mode

我们需要用音频初始化useSound。它将返回播放、暂停、时长和声音方法。

const [play, { pause, duration, sound }] = useSound(qala);
Enter fullscreen mode Exit fullscreen mode

play用于pause播放和暂停音频。duration是音轨的长度（以毫秒为单位）。sound将为我们提供声音的howler.js方法。

创建一个函数来处理播放和暂停按钮。代码如下。

  const playingButton = () => {
    if (isPlaying) {
      pause(); // this will pause the audio
      setIsPlaying(false);
    } else {
      play(); // this will play the audio
      setIsPlaying(true);
    }
  };
Enter fullscreen mode Exit fullscreen mode

现在，是时候将播放器的UI组件添加到 中了return。代码如下。

  return (
    <div className="component">
      <h2>Playing Now</h2>
      <img
        className="musicCover"
        src="https://picsum.photos/200/200"
      />
      <div>
        <h3 className="title">Rubaiyyan</h3>
        <p className="subTitle">Qala</p>
      </div>
      <div>
        <button className="playButton">
          <IconContext.Provider value={{ size: "3em", color: "#27AE60" }}>
            <BiSkipPrevious />
          </IconContext.Provider>
        </button>
        {!isPlaying ? (
          <button className="playButton" onClick={playingButton}>
            <IconContext.Provider value={{ size: "3em", color: "#27AE60" }}>
              <AiFillPlayCircle />
            </IconContext.Provider>
          </button>
        ) : (
          <button className="playButton" onClick={playingButton}>
            <IconContext.Provider value={{ size: "3em", color: "#27AE60" }}>
              <AiFillPauseCircle />
            </IconContext.Provider>
          </button>
        )}
        <button className="playButton">
          <IconContext.Provider value={{ size: "3em", color: "#27AE60" }}>
            <BiSkipNext />
          </IconContext.Provider>
        </button>
      </div>
    </div>
  );
Enter fullscreen mode Exit fullscreen mode

对于封面图片，我使用了Loren Picsum来生成随机图像。

您可以在这里查看该文件的 CSS：

body {
  background-color: #e5e5e5;
}

.App {
  font-family: sans-serif;
  text-align: center;
}

.component {
  background-color: white;
  width: 25%;
  max-width: 600px;
  margin: 1em auto;
  padding-bottom: 2em;
  border: 0.1px solid black;
  border-radius: 10px;
}

.musicCover {
  border-radius: 10%;
}

.playButton {
  background: none;
  border: none;
  align-items: center;
  justify-content: center;
}

.subTitle {
  margin-top: -1em;
  color: #4f4f4f;
}

.time {
  margin: 0 auto;
  width: 80%;
  display: flex;
  justify-content: space-between;
  color: #828282;
  font-size: smaller;
}

.timeline {
  width: 80%;
  background-color: #27ae60;
}

input[type="range"] {
  background-color: #27ae60;
}

@media (max-width: 900px) {
  .component {
    width: 50%;
  }
}
Enter fullscreen mode Exit fullscreen mode

运行 React 服务器。如果一切顺利，你将看到以下屏幕。

屏幕截图 - React 音乐播放器

单击播放按钮播放音频。

添加音频时间线，显示音频的当前时间和时长

现在，让我们将时间线添加到播放器中。时间线将由用户控制。对时间线的任何更改都会改变音频的当前位置。

让我们看看我们正在使用的状态。您可以查看注释来了解每个状态的解释。

  const [currTime, setCurrTime] = useState({
    min: "",
    sec: "",
  }); // current position of the audio in minutes and seconds

  const [seconds, setSeconds] = useState(); // current position of the audio in seconds
Enter fullscreen mode Exit fullscreen mode

我们从中获取持续时间道具useSound。由于持续时间以毫秒为单位，我们将其转换为分钟和秒。

useEffect(() => {
  const sec = duration / 1000;
  const min = Math.floor(sec / 60);
  const secRemain = Math.floor(sec % 60);
  const time = {
    min: min,
    sec: secRemain
  };
Enter fullscreen mode Exit fullscreen mode

现在，对于音频的当前位置，我们有了相应sound.seek([])的方法。我们每秒运行一次此函数来更改音频的当前位置。获取音频的位置（以秒为单位）后，我们将其转换为分钟和秒。转换后，我们将使用当前值设置状态。以下是代码。

useEffect(() => {
    const interval = setInterval(() => {
      if (sound) {
        setSeconds(sound.seek([])); // setting the seconds state with the current state
        const min = Math.floor(sound.seek([]) / 60);
        const sec = Math.floor(sound.seek([]) % 60);
        setCurrTime({
          min,
          sec,
        });
      }
    }, 1000);
    return () => clearInterval(interval);
  }, [sound]);
Enter fullscreen mode Exit fullscreen mode

现在返回。这是代码。

      <div>
        <div className="time">
          <p>
            {currTime.min}:{currTime.sec}
          </p>
          <p>
            {time.min}:{time.sec}
          </p>
        </div>
        <input
          type="range"
          min="0"
          max={duration / 1000}
          default="0"
          value={seconds}
          className="timeline"
          onChange={(e) => {
            sound.seek([e.target.value]);
          }}
        />
      </div>
Enter fullscreen mode Exit fullscreen mode

范围输入的值是second状态。它将为我们提供音频的当前位置。当用户更改范围时，我们将调用该soud.seek()方法来更改音频的当前位置。

输出

成功完成项目后，您将能够看到以下输出。

图片描述

注意：音乐正从我的扬声器中传出。

我创建了一个 codesandbox。你可以查看它，其中包含完整的项目代码和输出。

注：我用的是Qala 的《Rubaaiyaan 》 。所有荣誉均归创作者所有。

附加功能

您可以在音乐播放器上添加更多功能，例如：

  • 它目前播放一首歌曲，并加载多首歌曲。使用“下一首”和“上一首”图标来切换音频。
  • 根据歌曲更改音频的名称和专辑。
  • 添加您希望音乐播放器具备的更多功能。

结论

我们创建了自己的音乐播放器。该项目将帮助您在 React 中处理音频文件。我们添加了播放和暂停功能。此外，还添加了带有范围输入的音频时间轴。用户可以使用时间轴更改音频的当前位置。欢迎随时为项目添加更多功能。

我希望这个项目能帮助你理解在 React 中处理音乐的方法。如果你也想要一个视频播放器的教程，请在评论区留言。感谢阅读这篇博文。

文章来源：https://dev.to/documatic/building-a-music-player-in-react-2aa4
Devto 翻译
PREV
结对编程：最佳实践和工具
NEXT
在 WSL 上安装支持 GPU 的 PrivateGPT