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

Question

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

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

欢迎任何帮助！

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

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

Control global audio / audio from multiple sources with one slider. [React]

html5-audio

reactjs