react js播放本地MP3文件答案

【问题标题】：react js playing local MP3 filereact js播放本地MP3文件
【发布时间】：2020-07-13 19:22:12
【问题描述】：

在这里开发一个 reactJS-with-Electron 应用程序。我正在尝试从 redux reducer 播放本地 MP3 音乐文件（因为音乐需要跨多个页面播放）。

代码是这样的

 const filePath = '../../resources/sound.mp3';
 const newMusicRef = new Audio();
 newMusicRef.loop = true;
 newMusicRef.play().then(()=>{});

但在运行时，应用会从基本路径中查找应用的绝对路径 (/home/user/..)，而不是相对路径。我最终找到了一个文件。

然后我尝试使用

import sound from '../../resources/sound.mp3';

我得到了错误

client:159 ./app/resources/sounds/sound.mp3 1:3
Module parse failed: Unexpected character '' (1:3)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

为了播放这个本地文件，我怎样才能得到这些工作？

【问题讨论】：

标签： javascript reactjs audio react-redux electron

【解决方案1】：

你可以这样做。将您的路径粘贴到声音变量中。这是正在运行的示例，您可以尝试一下。

const sound = 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3';

function About() {
  const [audio] = useState(new Audio(sound));

  /*
   * STOP AUDIO
   */
  const stopAudio = () => {
    audio.pause();
  };

  /*
   * PLAY AUDIO ON HOVER
   */
  const playAudio = () => {
    audio.play();
  };

  return (
    <span onMouseEnter={() => playAudio()} onMouseLeave={() => stopAudio()}>
      audio
    </span>
  );
}

【讨论】：