如何解决切换播放和暂停音乐 React Native
我尝试只使用一个按钮来播放和暂停音乐。当按下按钮时音乐开始播放,但是当尝试暂停音乐时出现问题。我做错了什么?
我收到以下错误:
可能未处理的 Promise Rejection (id:0): 类型错误:Sound.pauseAsync 不是函数。
这是我的音频功能
const { sound } = await Audio.sound.createAsync(
{ uri: props.songURL }
);
await Audio.setIsEnabledAsync(true);
setSound(songs);
setSongs(userSongPosts)
if (isPlaying === true) {
try {
await sound.pauseAsync();
setIsPlaying(false);
} catch (error) {
console.error(error);
}
} else {
try {
await sound.playAsync();
setIsPlaying(true);
} catch (error) {
console.error(error);
}
}
}
这是我的按钮
<TouchableOpacity
style={styles.profilContainer}
onPress={() => playSound() }>
<Text>{isPlaying ? 'Pause' : 'Play'}</Text>
<View style={styles.buttonView}>
<Text style={styles.textButton}>{props.submitText}</Text>
<MatetrialCommunityIcons
style={styles.iconStyles}
name={props.icon}
/>
解决方法
我建议您创建一个 ref 并将声音变量存储在其中
像这样
const sound = React.useRef(new Audio.Sound());
const [Status,SetStatus] = React.useState(false);
React.useEffect(() => {
LoadAudio();
return () => sound.current.unloadAsync();
},[]);
const LoadAudio = async () => {
const checkLoading = await sound.current.getStatusAsync();
try {
const result = await sound.current.loadAsync({ uri: Song },{},true);
// Here Song is the uri of the Audio file
if (result.isLoaded === false) {
console.log('Error in Loading Audio');
} else {
PlayAudio();
}
} catch (error) {
console.log('Error in Loading Audio');
}
};
const LoadAudio = async () => {
const checkLoading = await sound.current.getStatusAsync();
try {
const result = await sound.current.loadAsync({ uri: Song },true);
if (result.isLoaded === false) {
console.log('Error in Loading Audio');
} else {
PlayAudio();
}
} catch (error) {
console.log('Error in Loading Audio');
}
};
const PlayAudio = async () => {
try {
const result = await sound.current.getStatusAsync();
if (result.isLoaded) {
if (result.isPlaying === false) {
sound.current.playAsync();
SetStatus(true);
}
} else {
LoadAudio();
}
} catch (error) {
SetStatus(false);
}
};
const PauseAudio = async () => {
try {
const result = await sound.current.getStatusAsync();
if (result.isLoaded) {
if (result.isPlaying === true) {
sound.current.pauseAsync();
SetStatus(false);
}
}
} catch (error) {
SetStatus(false);
}
};
return (
<View style={styles.container}>
<Text>{Status === false ? 'Stopped' : 'Playing now'}</Text>
<View style={{ width: '100%' }}>
<Button title="Play Sound" onPress={() => PlayAudio()} />
<Button title="Pause Sound" onPress={() => PauseAudio()} />
</View>
</View>
);
在此实现中,Pause
和 Play
有两个单独的按钮。因此,如果您想要一个 single
按钮 toggle pause and play
,那么 return
语句应如下所示
return (
<View style={styles.container}>
<Text>{Status === false ? 'Stopped' : 'Playing now'}</Text>
<View style={{ width: '100%' }}>
<Button
title={Status === false ? 'Play' : 'Pause'}
onPress={Status === false ? () => PlayAudio() : () => PauseAudio()}
/>
</View>
</View>
);
不要忘记像这样顶部的导入
import * as React from "react";
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。