React - Activate sound on render

Question

I manage to activate sound library like

import useSound from 

'use-sound';

import boopSfx from '../../sounds/boop.mp3';

const BoopButton = () => {

const [play] = useSound(boopSfx);

return <button onClick={play}>Boop!</button>;

};

but I would like to make it go off on render part, like to have some if statement and if its satisfied to play it. Any way to do it?

Answer 1

Playing sound on render of button can be achieved using useEffect hook in react. You can see the code here .

const BoopButton = () => {
  const url = "https://www.soundjay.com/button/sounds/beep-01a.mp3";

  const [play] = useSound(url);
  React.useEffect(() => {
    setTimeout(() => {
      play();
    }, 5);
  }, [play]);

  return <button onClick={play}>Boop!</button>;
};

The reason I have added the setTimeOut is to let the URL load so that sound would play, in your case with link to file, it is not needed.

Answer 2

You can use 'useEffect' hook to play the sound just before the component is rendered.

import useSound from 

'use-sound';

import {useEffect} from 'react'

import boopSfx from '../../sounds/boop.mp3';

const BoopButton = () => {

const [play] = useSound(boopSfx);

//keep an empty array to make sure it only executes once
useEffect(()=>play(),[])

return <button onClick={play}>Boop!</button>;

};

Answer 3

It works this way

const [play] = useSound(yourSFX);

useEffect(() => play(), [play])

But make sure that your window is in focus. If it's not, click somewhere inside the window and it will start with the play