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

I am creating an extension where users will be able to play multiple nature sounds (i.e. beach sounds, birds, leafs) and they will be able to control the volume of each of these sounds. However, I would like to create a global slider so that the user can control all of them at once.

I am using react-howler for playing music but I am stuck on this one aspect. I was thinking about decreasing all audios volumes by the same amount to have a global effect but I am not sure this is the right way to do it.

Any help is welcome!

CodePudding user response：

I imagine you're already controlling the howlers' volume prop.

With that in mind, setting a global volume is just a matter of multiplying the per-channel volume with the main 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" />
    </>
  );
}