在 react.js 中导入和使用音频答案

【问题标题】：Importing and using audio in react.js在 react.js 中导入和使用音频
【发布时间】：2022-07-07 19:35:13
【问题描述】：

我正在尝试创建一个 useAudio 自定义挂钩，供我的应用中的音效按钮使用。

我是这样写的：

import { useMemo, useEffect, useState } from 'react';
// import rain from 'assets/audio/rain.mp3'; --> hardcoded import I've tried

const useAudio = (url) => {
  const audio = useMemo(() => new Audio(url), [url]);
  const [playing, setPlaying] = useState(false);

  const toggle = () => setPlaying(!playing);

  useEffect(() => {
    audio.loop = true;
    playing ? audio.play() : audio.pause();
  }, [playing, audio]);

  useEffect(() => {
    audio.addEventListener('ended', () => setPlaying(false));
    return () => {
      audio.removeEventListener('ended', () => setPlaying(false));
    };
  }, [audio]);

  return [playing, toggle];
};

export default useAudio;

然后我像这样使用它来尝试使其可以从外部重复使用：

const [playing, toggle] = useAudio(
    require(`assets/audio/${props.audio}.mp3`)
  );

不幸的是，它不起作用。我尝试在钩子内使用硬编码文件导入，它可以工作。知道如何以可重用的方式编写它吗？我想不出一种使导入动态化的方法。

也很想了解路径引用、require() 和 import 之间的区别，以及为什么 react 以这种方式工作。谢谢

【问题讨论】：

标签： reactjs import react-hooks requirejs html5-audio

【解决方案1】：

您可以在 javascript 中将相对路径传递给 Audio api。试试这样

const [playing, toggle] = useAudio(
    `assets/audio/${props.audio}.mp3`
  );

【讨论】：