Hey everybody.
I am working on a audio player where I have prev and next buttons. Like this:
I’am usem redux, so when next is clicked, I get the next artwork from my store and updated the Audio Player props.
Every thing is working fine, except I can’t stop the audio when I click next or I exit the navigator scene.
I tried to use .stopAsync() with Lifecycle componenet methos like ComponentWillUpdate and CompunenetWillUnmount but did’t work it.
Any help?
AudioPlayer.js
constructor(props) {
super(props);
this.state = {
currentLocale: '',
progressPercentageWidth: 0,
muted: false,
playbackInstancePosition: null,
playbackInstanceDuration: null,
shouldPlay: false,
isPlaying: false,
isBuffering: false,
isLoading: true,
volume: 1.0,
rate: 1.0,
player: null
};
}
componentDidMount() {
Audio.setAudioModeAsync({
allowsRecordingIOS: false,
interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX,
playsInSilentModeIOS: true,
shouldDuckAndroid: true,
interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DO_NOT_MIX,
playThroughEarpieceAndroid: false,
});
this._loadNewSound();
}
async _loadNewSound() {
const source = this.props.source;
if (source !== '') {
const { sound } = await Sound.create(
{ uri: source },
{},
this._onPlaybackStatusUpdate
);
this.setState({ player: sound });
}
}
_onPlaybackStatusUpdate = status => {
if (status.isLoaded) {
this.setState({
playbackInstancePosition: status.positionMillis,
playbackInstanceDuration: status.durationMillis,
shouldPlay: status.shouldPlay,
isPlaying: status.isPlaying,
isBuffering: status.isBuffering,
rate: status.rate,
muted: status.isMuted,
volume: status.volume,
});
}
if (status.error) {
console.log(`FATAL PLAYER ERROR: ${status.error}`);
}
};
togglePlayer() {
if (this.state.isPlaying) {
this.pause();
} else {
this.play();
}
}
play() {
if (this.state.playbackInstancePosition === this.state.playbackInstanceDuration) {
this.state.player.setPositionAsync(0);
}
this.state.player.playAsync();
}
stop() {
this.state.player.stopAsync();
}
_getMMSSFromMillis(millis) {
const totalSeconds = millis / 1000;
const seconds = Math.floor(totalSeconds % 60);
const minutes = Math.floor(totalSeconds / 60);
const padWithZero = number => {
const string = number.toString();
if (number < 10) {
return '0' + string;
}
return string;
};
return padWithZero(minutes) + ':' + padWithZero(seconds);
}
pause() {
this.state.player.pauseAsync();
}
measureProgressBar(evt) {
progressBarWidth = evt.nativeEvent.layout.width;
}
goToTime(evt) {
const progress = evt.nativeEvent.locationX / progressBarWidth;
const time = this.state.playbackInstanceDuration * progress;
this.state.player.setPositionAsync(time);
// this.setState({ progressPercentageWidth: progress });
}