Воспроизведите последовательность удаленных аудиофайлов с помощью Expo AV в React Native. - PullRequest
Новая
       8

Воспроизведите последовательность удаленных аудиофайлов с помощью Expo AV в React Native.

0 голосов
/ 30 сентября 2019

Я создаю приложение в React Native, которое просматривает список аудиосообщений, оставленных для пользователя. Я пытаюсь сделать это в настоящее время, используя Expo AV. Я возвращаю массив аудиосообщений (которые на самом деле являются путями к mp3-файлам на cdn), и у меня получается, что он воспроизводит один удаленный аудиофайл, жестко кодируя его для чтения первого элемента в массиве (см. Код ниже): 

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;

Что я действительно хотел бы сделать, так это создать массив soundObjects, отобразив результаты user.messages, а затем выполнить итерацию по этому массиву и воспроизвести каждое из сообщений в последовательности. Любая помощь или направление будут очень благодарны.

Спасибо,

Эван

...