react-native sound not working after a while

Question

I'm using 50 different sound files. it works normally but on my 14th or 15th try it no longer plays the audio files. (I am using android device)

  const animalSound = new Sound( selectedAnimals.soundUrl ||"snake.mp3", null, error => {
    if (error) console.log("Can't play sound. ", error);
  })

const handlePlaySound = () => {
    animalSound.setVolume(1);
    animalSound.play(() => {
        animalSound.release();
    });
  };

const handleStopSound = id => {
    animalSound.stop()
}

Answer 1

I used expo-av for sound, which can also be used in a bare react-native project. (https://github.com/expo/expo/tree/main/packages/expo-av)

I made this hook which allows you to play the sound and aslo clears up the resources for you so you don't have to worry about it.

/* 
    This hooks abstracts away all the logic of 
    loading up and unloading songs. All the hook 
    takes in is the require path of the audio
*/
import React,{useState,useEffect} from 'react'
import { Audio } from 'expo-av';

const useSound = (path) => {
  /* 
    Sound state
  */
  const [sound, setSound] = useState();

  /* 
    Logic to unload sound when screen changes
  */
  useEffect(() => {
    return sound
        ? () => {
            sound.unloadAsync();
        }
        : undefined;
  }, [sound]);
 
  /*
    Memoize the function so that it does not get 
    recomputed every time that the screen load
  */
  const playSound = React.useCallback(async ()=>{
      const { sound } = await Audio.Sound.createAsync(path);
      setSound(sound);
      await sound.playAsync();
  },[sound])

   
  /* 
     Stop sound 
  */
  const stopSound = React.useCallback(async ()=>{
      await sound.stopAsync();
  },[sound])

  return [playSound,stopSound]
}

All you have to do to use the sound is this

/* 
    The hooks returns a function to be called when to play 
    a sound, and it abstracts away having to deal with unloading'
    the sound
 */
const [playSound,stopSound] = useSound(require("snake.mp3"));