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 intermittent crashes when audio clips are played. There seems to be nothing wrong with the audio clips themselves as most of the time they work and it is not always the same audio clip that has the problem.
I am guessing it might be a memory leak to do with new Sound but I am not sure how to test for this. I also thought that I covered this by making sure that I released the sound component after it played and when the screen unmounts.
Is there something that I am missing in making sure that I correctly clean up the this.sound component?
My code:
import React, { Component } from 'react';
var Sound = require('react-native-sound');
Sound.setCategory("Playback"); //Needed for audio to play on IOS devices
import {
Image,
ImageBackground,
SafeAreaView,
ScrollView,
View,
Text,
TouchableOpacity
} from 'react-native';
export default class AudioList extends Component {
constructor(props) {
super(props)
}
playAudio = (file) => {
console.log(file)
if (this.sound) {
console.log("SOUND")
try {
this.sound.release()
} catch (error) {
console.log("A sound release error has occured 111")
} finally {
this.sound = null
}
}
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
}
})
}
})
this.willBlurSubscription = this.props.navigation.addListener(
'blur',
() => {
try {
if (this.sound) {
this.sound.release()
}
} catch (error) {
console.log("A sound release error has occured 333")
} finally {
this.sound = null
}
}
)
}
componentWillUnmount() {
try {
this.willBlurSubscription &&
this.willBlurSubscription.remove &&
this.willBlurSubscription.remove()
} catch (error) {} finally {
this.willBlurSubscription = null
}
}
render() {
/* list and new_list removed for brevity */
/* styles removed for brevity */
let audio_clips = new_list.map((item, index) => {
return <View key={index}>
{item.audio ?
<TouchableOpacity onPress={()=>this.playAudio(item.audio)}>
<Image source={require('../assets/images/audio-icon.png')} />
</TouchableOpacity>
:
<View></View>
}
<Text>{item.text}</Text>
</View>
})
return (
<SafeAreaView>
<Text>{list.category_name}</Text>
<ImageBackground source={require('../assets/images/background.jpg')}>
<ScrollView>
<View>
{audio_clips}
</View>
</ScrollView>
</ImageBackground>
</SafeAreaView>
)
}
}
from Intermittent crashes with audio in react-native
No comments:
Post a Comment