6

I am using Expo Audio to play some short sounds from a list. 

async playAudio(file) {

    try {
        await Audio.setIsEnabledAsync(true);
        const sound = new Audio.Sound();
        await sound.loadAsync(file);
        await sound.playAsync(); 
    } catch(error) {
      console.error(error);
    }
}

Which I'm calling from a list rendered with list.map()

renderTheList = (item, i) => {
    return (
        <View key={i}> 
            <TouchableOpacity onPress={ () => { this.onAudioSelected(item.audio) }}>
            </TouchableOpacity>
        </View>
    )
}

onAudioSelected(audio) {
    // Audio.clearSounds() <-- something like this
    playAudio(audio)

    ...
    }

The sounds play fine, but when I select the next item in the list, the previous sound does not stop. So if I touch a bunch in a row, a bunch of sounds play at once.

How can I stop all currently playing sounds?

Evelyn
  • 2,588
  • 3
  • 22
  • 47

1 Answers1

7

I figured out that I should create the playback object in the constructor and use unloadAsync()

constructor(props)
    {
      super(props);

      this.audioPlayer = new Audio.Sound();

    }

    playSound = async () => {
        try {
          await this.audioPlayer.unloadAsync()
          await this.audioPlayer.loadAsync(require("../soundfile.mp3"));
          await this.audioPlayer.playAsync();
        } catch (err) {
          console.warn("Couldn't Play audio", err)
        }
    }

The full documentation is found at AV - Expo Documentation

Evelyn
  • 2,588
  • 3
  • 22
  • 47
  • How would I do that if I want to stop any other audio player instances? for example multiple component if one is playing, I want to stop it while starting the other? – Rami Salim Sep 03 '21 at 05:54