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

Question

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

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

欢迎任何帮助！

标签： reactjshtml5-audio

Answer 1

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

考虑到这一点，设置全局音量只是将每个通道的音量乘以主音量的问题，ala

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" />
    </>
  );
}