为 React 项目添加声音

为 React 项目添加声音非常简单。在这篇博客中，我将演示如何为你的 React 项目实现声音功能！

先决条件

• 已安装NPM
• 已安装Node.js
• 熟悉 React 和 React Hooks
• 脑海中有一个很棒的 React 项目构想（比如一个你喜欢的乐队的音乐作品网站）

1. 创建你的 React 项目。

首先创建你的 React 项目。

• npx create-react-app sound-demo

2. 进入 src 文件夹中的 App.js 组件，删除 logo 导入语句以及 div 元素内的所有内容。

3. 添加一个名为 react-sound 的 NPM 包。

• npm i react-sound或者yarn add react-sound

为您的网站添加背景音乐

Sound4.从……导入你想播放的歌曲react-sound。

<Sound />5.通过一些属性将其添加到您的应用程序中：

• url - 您导入的音乐的链接
• playStatus- 我们将把它设置为 Sound.status.PLAYING。
• playFromPosition - 您可以调整音乐开始播放的毫秒数，我建议将其设置为 300。
• onLoading - 这是组件的一个属性，当声音加载时会被调用。你可以将属性添加到函数式组件中，也可以解构属性。它会被赋值给 handleSongLoading 方法。
• onPlaying - 此函数在歌曲播放时调用。它应分配给 handleSongPlaying 函数。
• onFinishedPlaying - 此函数将在歌曲播放完毕时调用。它将被赋值给 handleSongFinishedPlaying 函数。
• （可选）循环：您可以将循环设置为 true 或 false。默认值为 false。

6. 现在如果你运行npm start或yarn start，你的声音应该就能正常工作了！

显示一个按钮，允许您播放和暂停音乐

6. 我们应该添加一个状态来检查是否应该播放音乐。

• 首先useState从react
• 然后添加我们的状态，它将是一个布尔值。const [isPlaying, setIsPlaying] = useState(false);

7. 我们来添加一个按钮

• 我们将把该onClick函数设置为一个匿名函数，该函数会将isPlaying状态设置为与当前状态相反的状态。
• 然后，对于文本，我们将添加一个三元运算符，如果状态为假，则文本将显示“播放”，否则将显示“停止”。

8. 设置playStatus组件的<Sound />。

• playStatus仅当设置为 true 时才播放，isPlaying否则playStatus将设置为Sound.status.STOPPED。

好了，这样你就拥有了一个可以正常工作的音频组件！