@funkydance

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

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

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

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


Как глобальном сделать отключение звука?
  • Вопрос задан
  • 52 просмотра
Решения вопроса 1
Xuxicheta
@Xuxicheta
инженер
new Audio() создает HTMLAudioElement.
Вместо того чтобы создавать его каждый раз, его можно создать один раз или даже вставить в разметку, а из события дергать только play
Чтобы заткнуть проигрыватель, ему нужно выставить свойство muted в true. Вы же тут даже ссылки на него не оставляете, поэтому свойство ставить некуда.

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

И кстати непонятно что вам мешало сделать просто
onMouseOver={() => settings.isSound && new Audio('/sound/menuhover.wav').play()}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Myagi Минск
от 3 000 до 4 000 usd.
от 100 000 руб.
Aline digital agency Санкт-Петербург
от 180 000 до 250 000 руб.
22 нояб. 2019, в 18:27
2000 руб./за проект
22 нояб. 2019, в 17:16
200 руб./за проект
22 нояб. 2019, в 17:09
6000 руб./за проект