Question

我正在React Native中创建一个应用程序，该应用程序旨在播放留给用户的音频消息列表。我目前正在尝试使用Expo AV。我正在返回一个音频消息数组（实际上是CDN上的mp3文件路径），并且通过硬编码使其读取数组中的第一项，它已经能够播放单个远程音频文件（请参见下面的代码））：

const HomeComponent = ({ user }) => {

    const soundObject = new Audio.Sound();

    const loadAudio = async () => {

        try {
          await soundObject.loadAsync({ uri: user.messages[0].path /* url for your audio file */ });
        } catch (e) {
          console.log('ERROR Loading Audio', e);
        }
    }

    if (user)
        loadAudio();

    const play = async () => {
        if(user.messages) {
            console.log("Playing Messages!")
            const status = await soundObject.playAsync();
            console.log(status)
        } else {
            console.log("No Messages!")
        }
    }

    const stop = () => {
        console.log("Messages stopped!")
        soundObject.pauseAsync();
    }

    return (
        <View style={{
            flex: 1,
            backgroundColor: 'blue',
            justifyContent: 'center',
            alignItems: 'center'
        }}>
            <Background style={styles.background} width={width} />
            <FacePlate style={styles.face} width={width} />
            {user ? <Text style={styles.messageCount}>{user.messages.length}</Text> : null}
            <View style={styles.buttons}>
                <TouchableOpacity onPress={() => {
                    play();
                }}>
                    <PlayButton />
                </TouchableOpacity>
                <TouchableOpacity onPress={() => {
                    stop();
                }}>
                    <StopButton />
                </TouchableOpacity>
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    background: {
        position: 'absolute',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0
    },
    face: {
        position: 'absolute',
        bottom: 0,
        left: 0
    },
    messageCount: {
        fontSize: 100,
        position: 'absolute',
        color: 'red',
        bottom: 350
    },
    buttons: {
        position: 'absolute',
        bottom: 20,
        flexDirection: 'row',
        flex: 1
    }
});

export default HomeComponent;

我真正想做的是通过映射user.messages的结果创建一个soundObjects数组，然后遍历该数组并依次播放每个消息。任何帮助或指示将不胜感激。

谢谢

埃文

在React Native中使用Expo AV播放一系列远程音频文件

0 个答案: