如何使用useSound Hook播放数组中的音频文件？

问题描述 #

我希望使用useSound Hook处理一组音频文件，目前已能按照官方文档的典型示例播放音频，也能在独立函数中播放单个音频，但最终需求是在独立函数中播放数组内的指定音频。尝试直接给useSound传入音频数组的方式无法正常工作，请问如何正确实现？

原代码示例：

import "./styles.css";
import sound0 from "./audio/sound0.mp3";
import sound1 from "./audio/sound1.mp3";
import sound2 from "./audio/sound2.mp3";
import useSound from "use-sound";

export default function App() {
  // 1. 符合示例的音频声明（可正常工作）
  const [soundEffect0] = useSound(sound0);
  const [soundEffect1] = useSound(sound1);
  const [soundEffect2] = useSound(sound2);

  // 2. 播放音频的函数（可正常工作）
  function playSound() {
    soundEffect0();
  }

  // 3. 期望的从数组播放音频的方式（无法正常工作）
  const [soundEffects] = useSound([sound0, sound1, sound2]);

  function playSoundFromArray(idx) {
    soundEffects[idx]();
  }

  return (
    <div className="App">
      <h2>1. 示例方式（可正常工作）</h2>
      <button onClick={soundEffect0}>soundEffect0</button>
      <button onClick={soundEffect1}>soundEffect1</button>
      <button onClick={soundEffect2}>soundEffect2</button>

      <h2>2. 在函数中播放音频（可正常工作）</h2>
      <button onClick={playSound}>playSound function</button>

      {/* <h2>3. 期望的从数组播放音频的方式（无法正常工作）</h2>
      <button onClick={playSoundFromArray(0)}>soundEffect0</button> */}
    </div>
  );
}

问题分析 #

• useSound Hook仅支持传入单个音频资源，每次调用返回对应音频的播放函数，无法直接接收音频数组。
• 按钮的onClick属性若直接写playSoundFromArray(0)，会在组件渲染时立即执行函数，而非点击时触发，这是常见的事件绑定错误。

正确实现方式 #

我们可以通过遍历音频数组，逐个调用useSound生成对应的播放函数并存入数组，之后即可通过索引调用指定音频的播放函数。

修改后的完整代码：

import "./styles.css";
import sound0 from "./audio/sound0.mp3";
import sound1 from "./audio/sound1.mp3";
import sound2 from "./audio/sound2.mp3";
import useSound from "use-sound";

export default function App() {
  // 1. 符合示例的音频声明（可正常工作）
  const [soundEffect0] = useSound(sound0);
  const [soundEffect1] = useSound(sound1);
  const [soundEffect2] = useSound(sound2);

  // 2. 播放音频的函数（可正常工作）
  function playSound() {
    soundEffect0();
  }

  // 3. 正确的数组式音频播放实现
  // 遍历音频资源数组，生成对应播放函数的数组
  const soundEffects = [sound0, sound1, sound2].map(sound => {
    const [play] = useSound(sound);
    return play;
  });

  function playSoundFromArray(idx) {
    // 增加索引有效性判断，避免无效索引报错
    if (idx >= 0 && idx < soundEffects.length) {
      soundEffects[idx]();
    }
  }

  return (
    <div className="App">
      <h2>1. 示例方式（可正常工作）</h2>
      <button onClick={soundEffect0}>soundEffect0</button>
      <button onClick={soundEffect1}>soundEffect1</button>
      <button onClick={soundEffect2}>soundEffect2</button>

      <h2>2. 在函数中播放音频（可正常工作）</h2>
      <button onClick={playSound}>playSound function</button>

      <h2>3. 从数组播放音频（已修复）</h2>
      {/* 用箭头函数包裹，确保点击时才执行播放逻辑 */}
      <button onClick={() => playSoundFromArray(0)}>soundEffect0</button>
      <button onClick={() => playSoundFromArray(1)}>soundEffect1</button>
      <button onClick={() => playSoundFromArray(2)}>soundEffect2</button>
    </div>
  );
}

关键说明 #

• 通过map遍历音频资源数组，为每个音频调用useSound获取播放函数，最终得到可通过索引访问的播放函数数组。
• 按钮点击事件使用() => playSoundFromArray(idx)的形式，确保只有用户点击按钮时才触发播放逻辑。
• 添加索引有效性判断，避免因传入超出数组范围的索引导致运行时错误。

内容的提问来源于stack exchange，提问作者ragmats