How to turn off sound on entire page in React?

Question

JavaScript

Good evening.
Made a sound on the elements that plays on hover or click. Like this:

<li>
  <Link onMouseOver={() => new Audio('/sound/menuhover.wav').play()} onClick={() => new Audio('/sound/openrouter.wav').play()} className={b({ block, elem: "item" })} href="/" target="_blank">
  <span className={b({ block, elem: "support" })}></span>
  <div className={b({ block, elem: "tooltip" })}>
  <Translate>
    {({ translate }) => <lang>{translate("navbar.support")}</lang>}
  </Translate>
  </div>
 </Link>
</li>

And I made a button, on and off the sound, but I can not figure out how to turn off the sound.
If settings.isSound then the sound should be disabled. I only thought of the fact that if the sound is disabled, then through if to render one version of the element, and if it is enabled, then the element is already with sound. But it is necessary to wrap each element in a check, so I don’t want to do it. Example:

<li>
  {settings.isSound ? (
  <Link className={b({ block, elem: "item" })} to="/faq">
    <span className={b({ block, elem: "faq" })}></span>
    <div className={b({ block, elem: "tooltip" })}>
    <Translate>
      {({ translate }) => <lang>{translate("navbar.faq")}</lang>}
    </Translate>
    </div>
  </Link>
) : (
  <Link onMouseOver={() => new Audio('/sound/menuhover.wav').play()} onClick={() => new Audio('/sound/openrouter.wav').play()} className={b({ block, elem: "item" })} to="/faq">
    <span className={b({ block, elem: "faq" })}></span>
    <div className={b({ block, elem: "tooltip" })}>
    <Translate>
      {({ translate }) => <lang>{translate("navbar.faq")}</lang>}
    </Translate>
    </div>
  </Link>
)}
</li>

How to disable sound globally?

Answer 1

new Audio()creates an HTMLAudioElement.
Instead of creating it every time, you can create it once or even insert it into the markup, and pull only play from the event.
To shut up the player, it needs to set the property mutedto true. You don’t even leave a link to it here, so there is nowhere to put the property.
And how to do it globally is up to you to decide, you can use the redux store.
And by the way, it’s not clear what prevented you from doing just

onMouseOver={() => settings.isSound && new Audio('/sound/menuhover.wav').play()}