Intermittent Crashes With Audio In React-native

Crashing when audio is played: I am creating an app with several different screens of audio clips. We are testing out the app on iPhone/iPad using Testflight and are getting interm

Solution 1:

Check if sound is already is an object :

if(!this.sound){
   this.sound = new Sound('audio/' + file, Sound.MAIN_BUNDLE, (error) => {
            if (error) {
                console.log('error', error);
                this.sound = null;
            } else {
                this.sound.play(() => {
                    try {
                        if (this.sound) {
                            this.sound.release()
                        }
                    } catch (error) {
                        console.log("A sound release error has occured 222")
                    } finally {
                        this.sound = null
                    }
                })
            }
        });
}

Solution 2:

Could it be a race condition where this.sound.release() is called twice? So for the second time it is called upon null and it chrashes. I mean it is called synchronously after the sound is played and at the "blur" thing listener. Should maybe get caught then by the exception blocks but I'm not experienced enougt with js to know that..

Solution 3:

I think crashes may happen when audio files are loading and blur event happens. And you didn't check for this state. So when you are using

this.sound = newSound('audio/' + file, Sound.MAIN_BUNDLE, (error) => ...)

this.sound becomes valid and the audio file starts to load. But immediately blur event happens and you release this.sound. In the meanwhile, loading is completed and tries to play! nothing is there and you get a crash!

Answer : you must check both this.sound and this.sound.isLoaded()(ref) on bluring event.

Solution 4:

Just a quick guess here, but are you sure that setting null to the object of sound deltes it from memory? might just have another "pointer" to it.

have you tried the same code with delete just to try and if this might be the issue? this.sound = null instead try delete this.sound or somthing of this sorts?

I know delete counts as bad optimization practice but might just help you here.

Solution 5:

This might help, please look into it

importReact, { Component } from"react";    
varSound = require("react-native-sound");

Sound.setCategory("PlayAndRecord", true);
Sound.setActive(true); // add thisexportdefaultclassAudioListextendsComponent {
  playAudio = (file) => {
    if (this.sound) {
      try {
        this.sound.release();
      } catch (error) {
        console.log("A sound release error has occured 111");
      } finally {
        this.sound = null;
      }
    }

    const pathType =
      Platform.OS === "ios"
        ? encodeURIComponent(Sound.MAIN_BUNDLE)
        : Sound.MAIN_BUNDLE;

    this.sound = newSound("audio/" + file, pathType, (error) => {
      /* .... */
    });
  };

  componentWillUnmount() {
    try {
      if (this.sound) {
        this.sound.release();
      }
    } catch (error) {
      console.log("A sound release error has occured 333");
    } finally {
      this.sound = null;
    }
  }

  render() {
    /* .... */
  }
}