How to play an mp3 once onClick in react?

Question

i have a that i want to play a very small mp3 once that is in my public folder in my react app, there are so many different solutions to playing audio but none that are simple for react, i tried react-360 but there was a problem with one of the modules.

i've tried some react audio libraries, but they seem to be for audio players, i dont need a play button and a pause and a volume and all that. just want a simple sound effect

class App extends Component {
  render() {

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

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

(sound to play when click the image)

Answer 1

Hooks version (React 16.8+):

Minimal version.

Place your music file (mp3) in the public folder.

import React from 'react';

function App() {
  let audio = new Audio("/christmas.mp3")

  const start = () => {
    audio.play()
  }

  return (
    < div >
      <button onClick={start}>Play</button>
    </div >
  );
}

export default App;

Answer 2

You can import the audio using import statement and create a Audio object and call the play() method using the instantiated object.

import React from "react";
import audio from './../assets/audios/success.mp3';

class AudioTest extends React.Component{

  playAudio = () => {
    new Audio(audio).play();
  }

  render() {
    return (
        <div>
          <button onClick={this.playAudio}>PLAY AUDIO</button>
        </div>
    );
  }
}

export default AudioTest;

Answer 3

1. Add to your render method<audio id="audio"><source src="slow-spring-board.mp3" type="audio/mp3"></source></audio>
2. And inside the script document.getElementById('audio').play()

Answer 4

You need to pass a function thats trigger play:

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

Answer 5

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

By passing audio.play as the onClick handler, rather than audio.play(), you're passing the play function itself. audio.play() will instead invoke the function - if it also returned a function for some reason, then that function would be invoked on click.

Answer 6

so i moved the sound and picture files INSIDE of the src folder, into assets, THEN changed the onClick function to a combo that finally worked, it looks like a double invocation did the trick

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

export default App;

Answer 7

import { Fragment } from 'react';
export default function PlaySound(props) {
    var savingCurrencySound = props.soundFile ?? 'https://example.com/audio/sound.mp3';
    var playCurrencySound = () => {     
        var audio = new Audio(savingCurrencySound);
        audio.play();
    }
    return (
        <Fragment>
            <img src={dwight} onClick={ () => playCurrencySound() }/>
        </Fragment>
    );
}

Answer 8

According to this answer

here's the following worked code :

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

const useAudio = url => {
  const [audio] = useState(new Audio(url));
  const [playing, setPlaying] = useState(false);

  const toggle = () => setPlaying(!playing);

  useEffect(() => {
      playing ? audio.play() : audio.pause();
    },
    [playing]
  );

  useEffect(() => {
    audio.addEventListener('ended', () => setPlaying(false));
    return () => {
      audio.removeEventListener('ended', () => setPlaying(false));
    };
  }, []);

  return [playing, toggle];
};

const Player = ({ url = 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3' }) => {
  const [playing, toggle] = useAudio(url);

  return (
    <div>
      <button onClick={toggle}>{playing ? "Pause" : "Play"}</button>
    </div>
  );
};

export default Player;

or you can use this playground here