How to add audio to button in React

Question

I'm making a game-ish webapp with ReactJS.

I have main menu: Play, Score, etc...

If the user clicks play, there will be a list of levels, some of them will be open, some closed.

I want to play audio/sound when a button is clicked. If the level is locked, output a different sound.

Now, I need to be able to have different clicks, and the HTML not interfer with the button.

So for example:

I want to add a onclick toa button such as 'launchApple', and play sound at the same time. The sound should have this code:

  if (audio.paused) {
            audio.play();
        } else {
            audio.currentTime = 0
        }

At all times.

The button styles also need to be shared, if we were to create another audioButton component.

AudioButton

 <React.Fragment onClick={playAudio}>
            {children}
        </React.Fragment>

And for button:

function Button({ children, onClick }) {


    return (
        <button onClick={onClick} className="Button">
            {children}
        </button>
    );
}

But of course we can't put click on a fragment. I also want to have reusable audio, and preferably so we can just declare new Audio once.

This is my code: https://github.com/AurelianSpodarec/touchtype-game/tree/master/src This is what am building: https://touch-type.netlify.com/

How can I basically add audio to buttons and stuff, without actually wrapping it in another 'div' but also make it reusable with the styling?

LearningEveryday LearningEveryday · Accepted Answer · 2020-04-08T22:46:15

Worked on something similar. We used audio-player-es6.
Declared it as a dependency and we have some audio files in the project saved which we can use to play using the above npm package.
Give it a try and let me know how it goes.

Reference : https://www.npmjs.com/package/audio-player-es6

How to add audio to button in React

1 Answers