用React做一个音乐播放器

介绍

任何正在学习 React 并想使用 React 构建项目的人。有各种博客和文章可以为开发人员指导此类项目。我确实浏览过这些文章，但其中总是缺少一种项目。缺少的项目是音乐播放器和视频播放器。这两个项目都会让您有机会处理音频和视频。您将学到很多东西，例如处理播放和暂停音频的音频。

今天，我们将在 React 中构建一个音乐播放器。我们将研究以下主题：

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

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

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

先决条件和设置环境

我假设您具备以下技术知识作为先决条件：

• JavaScript
• HTML/CSS
• 基础反应

环境设置很简单。您应该预先安装node.js以便在终端中运行与节点相关的命令。

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

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">npx</span> <span style="color:var(--syntax-declaration-color)">create</span><span style="color:var(--syntax-name-color)">-react-app </span><span style="color:var(--syntax-declaration-color)">react</span><span style="color:var(--syntax-name-color)">-music-player
</span></code></span></span>

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

依赖关系

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

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

使用以下命令安装：

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">npm</span> <span style="color:var(--syntax-declaration-color)">i</span> <span style="color:var(--syntax-declaration-color)">use</span><span style="color:var(--syntax-name-color)">-sound
</span></code></span></span>

• react-icons：用于将播放、暂停、下一个和上一个图标添加到我们的播放器中。

使用以下命令安装它：

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">npm</span> <span style="color:var(--syntax-declaration-color)">i</span> <span style="color:var(--syntax-declaration-color)">react</span><span style="color:var(--syntax-name-color)">-icons
</span></code></span></span>

播放器.js

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

进口

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

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">useEffect</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">useState</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">react</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span> 
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-name-color)">useSound</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">use-sound</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span> <span style="color:var(--syntax-comment-color)">// for handling the sound</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-name-color)">qala</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">../assets/qala.mp3</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span> <span style="color:var(--syntax-comment-color)">// importing the music</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">AiFillPlayCircle</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">AiFillPauseCircle</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">react-icons/ai</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span> <span style="color:var(--syntax-comment-color)">// icons for play and pause</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">BiSkipNext</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">BiSkipPrevious</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">react-icons/bi</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span> <span style="color:var(--syntax-comment-color)">// icons for next and previous track</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">IconContext</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">react-icons</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span> <span style="color:var(--syntax-comment-color)">// for customazing the icons</span>
</code></span></span>

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

播放和暂停音频

让我们实现正在播放和暂停音频的播放器的强制性功能。

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

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">isPlaying</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">setIsPlaying</span><span style="color:var(--syntax-text-color)">]</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">useState</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-declaration-color)">false</span><span style="color:var(--syntax-text-color)">);</span>
</code></span></span>

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

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">play</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">pause</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">duration</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">sound</span> <span style="color:var(--syntax-text-color)">}]</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">useSound</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">qala</span><span style="color:var(--syntax-text-color)">);</span>
</code></span></span>