uroot
@uroot

Как организовать работу со звуков в React?

В большом React проекте проигрывается аудио в разных случаях: при клике на элементы или при загрузке страницы. Это я сделал и всё работает. Но когда уже всё укомплектовалось, когда выработалось схема работы со звуком залетела новая задача:

При клике на кнопку нужно выключить звук у всех аудио, как у играющего на фоне так и при клике, а если обновится компонент и появлятся новые события, при которых поигрывается аудио, то они также должны быть без звука.

И у меня с этим проблема. Я не знаю как мне заново уложить схему работы со звуком, чтобы я мог реализовать данную задачу. Сейчас это работает так:

Есть небольшие функции, которые проигрывают только одно какое-то аудио:
export const musicHouse = () => {
  audioCore(
    `/assets/sounds/music_house.ogg`,
    true,
  );
};

Если нам нужен этот звук, то мы вешаем её на клик, например. Сама функция audioCore - это просто набор if-ок: нужно зациклить - передали true, в таком духе.
Само аудио в ф-ции проигрывается так:
new Audio(sound)
audio.play()
Нужно аудио на фон? Пожалуйста:
componentDidMount() {
        ambBase()
}


Подскажите, как можно организовать работу со звуком так, чтобы аудио играемое при событии или после загрузке страницы я мог спокойно замутить, а новое аудио, которое может появиться при обновлении компонента, уже были без звука. При условии, что функции вызова могут находиться где угодно, в кучи разных компонентах, вызовы некоторых вообще лежат в json, который парится в компоненте.
  • Вопрос задан
  • 56 просмотров
Пригласить эксперта
Ответы на вопрос 1
lazalu68
@lazalu68
Salmon
Сделайте просто флажок isMuted в зависимости от которого инстансы Audio либо будут проигрывать звук, либо нет. Куда конкретно запихнуть этот флажок зависит от особенностей архитектуры и ваших предпочтений. У HTMLMediaElement есть свойство muted, можно этот флажок напрямую туда прокидывать, вроде план хороший
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы