react js播放本地MP3文件

Question

在此處開發 reactJS-with-Electron 應用程序。 我正在嘗試從 redux 減速器播放本地 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)

為了播放這個本地文件，我怎樣才能得到這兩項工作？

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