как просто проигрывать mp3 один раз

Question

У меня есть, что я хочу проигрывать очень маленький mp3, который находится в моей общедоступной папке в моем приложении реакции, есть так много разных решений для воспроизведения звука, но ни одно из них не является простым для реакции, я пробовал реагировать на 360, но возникла проблема с одним из модулей.

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

class App extends Component {
  render() {

    var audio = new Audio("../public/sound.mp3")

    return (
      <Container>
            <img src={dwight} onClick={ audio.play() }/>
      </Container>
    );
  }
}

(звук для воспроизведения при нажатии на изображение)

Answer 1

<Container>
    <img src={dwight} onClick={audio.play}/>
</Container>

Передав audio.play в качестве обработчика onClick вместо audio.play(), вы передаете саму функцию play. audio.play() вместо этого вызовет функцию - если она также по какой-то причине вернула функцию, то эта функция будет вызываться при нажатии.

Answer 2

, поэтому я переместил файлы звука и изображения ВНУТРИ папки src в ресурсы, затем изменил функцию onClick на комбо, которое, наконец, сработало, похоже, двойной вызов сделал свое дело

class App extends Component {
  render() {
    return (
      <Container>
        <img src={dwight} alt="ds" onClick={() => audio.play()} />
        <h1> PRESS ME</h1>
      </Container>
    );
  }
}

export default App;

Answer 3

Вам нужно передать функцию, которая запускает воспроизведение:

<Container>
    <img src={dwight} onClick={ () => audio.play() }/>
 </Container>