在现代 Web 应用中，用户体验 (UX) 是一个至关重要的部分。
张洪 @zhHeo 曾在一篇文章中提到：“如果你期望提升用户浏览时长，可以在交互上拖延时间，但不要在性能上打折扣。”——查看原文。
在界面设计中，我们经常会通过视觉效果来吸引用户的注意力。但是时间久了，当人们面对眼花缭乱的效果难免会出现 审美疲劳，那如果这时候来点音效可能是个不错的选择。音效不仅可以为应用增加趣味性，还能提供用户多感官交互的即时反馈。
例如，当你点击此网站的一些按钮、打开某个菜单或完成某个任务时，耳边传来一声清脆的提示音，这种反馈我觉得让用户的操作更有存在感和仪式感，从而让应用变得更加令人愉悦和难忘。
而 use-sound 是一个简单且功能强大的 React Hook，用于在 React 应用中快速添加音效。它基于浏览器的 Audio API，提供了高度抽象的接口，使得开发者可以轻松地为按钮、导航、通知等元素添加声音。
安装 use-sound
在使用 use-sound 之前，首先需要将其安装到你的项目中。打开终端，并在你的 React 项目目录下运行以下命令：
npm install use-sound
# 或者使用 yarn
yarn add use-sound
快速上手
use-sound 的使用非常简单。假设我们有一个按钮，点击时希望播放一个音效。我们可以按照以下步骤来实现：
1. 准备音效文件
确保你有一段短促的 .mp3 或 .wav 文件，比如 click.mp3。将它放在你的项目文件夹下，例如 public/sounds/click.mp3。
2. 使用 use-sound
创建一个简单的按钮组件，当用户点击时播放音效：
import useSound from "use-sound";
import clickSound from "/sounds/click.mp3";
function BoopButton() {
const [play] = useSound(clickSound);
return <button onClick={play}>点击我</button>;
}
export default BoopButton;
3. 运行你的 React 应用
现在，当用户点击按钮时，会播放 click.mp3 的音效。是不是很简单？
高级用法
use-sound 不仅仅可以简单地播放声音，它还提供了丰富的配置选项，让你可以更灵活地控制音效行为。
1. 控制音量
如果你想调整音量，可以通过 volume 参数进行设置。音量值的范围是 0 到 1。
const [play] = useSound(clickSound, { volume: 0.5 });
2. 循环播放
如果你希望声音可以循环播放，比如背景音乐，可以使用 loop 参数：
const [play, { stop }] = useSound("/sounds/background.mp3", { loop: true });
// 开始播放
play();
// 需要时可以手动停止
stop();
3. 播放不同的声音
你还可以使用多个声音源，例如在打开和关闭菜单时播放不同的声音：
import useSound from "use-sound";
import openSound from "/sounds/open.mp3";
import closeSound from "/sounds/close.mp3";
function ToggleMenu() {
const [playOpen] = useSound(openSound);
const [playClose] = useSound(closeSound);
const [isOpen, setIsOpen] = useState(false);
const toggleMenu = () => {
if (isOpen) {
playClose();
} else {
playOpen();
}
setIsOpen(!isOpen);
};
return (
<button onClick={toggleMenu}>{isOpen ? "关闭菜单" : "打开菜单"}</button>
);
}