使用一个滑块控制来自多个源的全局音频/音频。 [反应]

【问题标题】：Control global audio / audio from multiple sources with one slider. [React]使用一个滑块控制来自多个源的全局音频/音频。 [反应]
【发布时间】：2021-12-14 11:46:26
【问题描述】：

我正在创建一个扩展程序，用户可以在其中播放多种自然声音（即海滩声音、鸟类、树叶），并且他们将能够控制每种声音的音量。但是，我想创建一个全局滑块，以便用户可以一次控制所有滑块。

我正在使用react-howler 播放音乐，但我被困在这一方面。我正在考虑将所有音频音量降低相同的量以产生全局效果，但我不确定这是正确的方法。

欢迎任何帮助！

【问题讨论】：

标签： reactjs html5-audio

【解决方案1】：

我想你已经控制了咆哮者的volume 道具。

考虑到这一点，设置全局音量只需将每个通道的音量乘以主音量，á la

function App() {
  const [birdVolume, setBirdVolume] = React.useState(0.9);
  const [leafVolume, setLeafVolume] = React.useState(0.8);
  const [mainVolume, setMainVolume] = React.useState(1.0);
  return (
    <>
      <Howler volume={birdVolume * mainVolume} src="chirp" />
      <Howler volume={leafVolume * mainVolume} src="rustle" />
    </>
  );
}

【讨论】：

非常感谢！我想今天我的大脑工作不正常。