react js播放本地MP3文件

Question

Developing a reactJS-with-Electron app here. I am trying to play a local MP3 music file from a redux reducer (because the music needs to play cross multiple pages).

The code is like

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

But when running, the app is looking from the base path as the app's absolute path (/home/user/..) instead of the relative path. I end up with a file not found.

I then tried using

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

I got error as

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)

How can I got either of this work, in order to play this local file?

Answer 1

you can do like this. paste your path in sound variable. this is running example you can try this.

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>
  );
}