当前onClick,音乐将播放/暂停。我想将图标从暂停更改为播放音乐完全播放时,但除非我单击暂停图标,否则它不会改变。我正在考虑根据音频的毫秒数设置 setTimeout,但它超出了我的想象。请帮我在音乐完成后更改 state.isPlaying 的值。请帮忙!新手在这里
state = {
isPlaying: false,
playbackInstance: null,
currentIndex: 0,
volume: 4.0,
isBuffering: false,
};
componentDidMount = async () => {
try {
await Audio.setAudioModeAsync({
allowsRecordingIOS: false,
interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX,
playsInSilentModeIOS: true,
interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DUCK_OTHERS,
shouldDuckAndroid: true,
staysActiveInBackground: true,
playThroughEarpieceAndroid: true,
});
this.loadAudio();
} catch (e) {
console.log(e);
}
};
loadAudio = async () => {
console.log("@@@@", audios[0]["uri"]);
const { currentIndex, isPlaying, volume } = this.state;
try {
const playbackInstance = new Audio.Sound();
const source = {
uri: audios[currentIndex]["uri"],
};
const status = {
shouldPlay: isPlaying,
volume,
};
playbackInstance.setOnPlaybackStatusUpdate(this.onPlaybackStatusUpdate);
await playbackInstance.loadAsync(source, status, false);
this.setState({ playbackInstance });
} catch (e) {
console.log(e);
}
};
onPlaybackStatusUpdate = (status) => {
this.setState({
isBuffering: status.isBuffering,
});
};
handlePlayPause = async () => {
const { isPlaying, playbackInstance } = this.state;
isPlaying
? await playbackInstance.pauseAsync()
: await playbackInstance.playAsync();
this.setState({
isPlaying: !isPlaying,
});
};
render() {
return (
<View>
<View style={styles.controls}>
<TouchableOpacity
onPress={this.handlePlayPause}
>
{this.state.isPlaying ? (
<Ionicons name="ios-pause" size={48} color="#444" />
) : (
<Ionicons name="ios-play-circle" size={48} color="#444" />
)}
</TouchableOpacity>
</View>
);
}
提前致谢!