Блог

Я пытаюсь воспроизвести один файл mp3 для моего приложения react js. Однако, когда я добавляю путь к файлу в свой метод, он не распознает его. mp3 находится внутри приложения.

Я поместил путь в переменную, а затем поместил переменную в аудиоэлемент html.

как мне заставить мой mp3 воспроизводиться в моем файле?

 import React, { useState,useEffect } from "react";


const moby = require('../music/mobyPorcelain.mp3')
const Sound = new Audio(moby)


export default function Header()  {
  
  const [playInLoop, setPlayInLoop] = useState(false);

  useEffect(()=> {
    Sound.load();
  }, [])

  useEffect(() => {
    Sound.loop = playInLoop
  },[playInLoop])

  const playSound = () => {
    Sound.play();
  }

  const pauseSound = () => {
    Sound.pause();
  }

const stopSound = () => {
  Sound.pause();
  Sound.currentTime = 0;
}
 

  
    return (
                  <div>
                    <h3>Moby porcelain</h3>
                    <input
                    type='button'
                    className='btn btn-primary mr-2'
                    value='play'
                    onclick={playSound}/>
                    <input
                    type='button'
                    className='btn btn-warning mr-2'
                    value='pause'
                    onclick={pauseSound}/>
                    <input
                    type='button'
                    className='btn btn-danger mr-3'
                    value='stop'
                    onclick={stopSound}/>
                    <label><input type='checkbox' checked={playInLoop} onChange={e => setPlayInLoop(e.target.checked)}/></label>
                  </div>
                  
    );
  
}
  

Вот как выглядела моя консоль, когда я пытался отладить ваш код:

реорганизуйте onclick в onClick , и это должно сработать