Как отключить звук на всей странице в React?

Question

[funkydance]

Добрый вечер.

Сделал звук на элементах, который проигрывается при наведение или клике. Вот так:

<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>

И сделал кнопку, вкл и отключить звук, но не могу понять как отключить звук.

Если settings.isSound то звук должен быть отключен. Додумался только до того, чтоб если звук отключен, то через if выдавать в рендеринг один вариант элемента, а если включен, то элемент уже со звуком. Но это нужно каждый элемент оборачивать в проверку, так не хочется делать. Пример:

<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>

Как глобальном сделать отключение звука?

Answer 1

[Антон Швец]

new Audio() создает HTMLAudioElement.
Вместо того чтобы создавать его каждый раз, его можно создать один раз или даже вставить в разметку, а из события дергать только play
Чтобы заткнуть проигрыватель, ему нужно выставить свойство muted в true. Вы же тут даже ссылки на него не оставляете, поэтому свойство ставить некуда.

А уж как это сделать глобально вам решать, можно через стор типа redux.

И кстати непонятно что вам мешало сделать просто

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

Comments

[funkydance]

Спасибо, понял как сделать благодаря вам.

И по поводу, что мешало сделать проще....ничего) просто чтот не сообразил и пошёл по более сложному пути)