Thanks!

[wmonecke]

Just saying thank you for this cool package! We will be using it in our project :)

[Stenerson]

😍 Thanks @wmonecke! Good luck with the project!

[wmonecke]

@Stenerson

Hi there! I just wanted to ask one small question. I am trying to play multiple audio files (a kind of mix and match audios that the user can control to create an ambience - beach, forest, city). Is there a way to create multiple Howler instances?

I am trying to map over the sounds and creating a Howler for each of the sounds but getting weird behaviour.

Something like this:

{selectedSection.soundsBeingPlayed.map((el) => (
        <ReactHowler
          key={el.id}
          src={el.url}
          volume={el.volume}
          playFromPosition={0}
          onLoading={() => {}}
          onPlaying={() => {}}
          playing={selectedSection.isPlaying}
          onFinishedPlaying={() => {}}
        />
      ))}

Any ideas on how I could achieve this?

[Stenerson]

🤔 At a quick glance I think that's about how I'd expect things to look... The demo page has multiple ReactHowler instances (not in the same parent element but I wouldn't think that would matter).

What's the strange behavior you're experiencing?

[wmonecke]

@Stenerson Oh ok, I didn't look into that example! I will take a look at them and get back to you. Right now its just playing the same sound super distorted.

[Stenerson]

Yeah, check out the demos... https://khoanguyen.me/react-howler/ I tried to play all of them at the same time and it worked as expected (i.e. no distortion or anything) using Chrome on an Intel Mac.

[wmonecke]

@Stenerson I was applying volume={100} and was mistakenly thinking there were multiple instances overlapping each other. Thanks for your help!