audio player

playlist_control.js

import React, {Component} from 'react';

import {StyleSheet, TouchableOpacity, View, ScrollView, Alert} from 'react-native';
import {
    Button,
    Header,
    ListItem,
    Text,
    Left,
    List,
    Title,
    Row,
    Content,
    Right,
    Icon,
    Container,
    Body,
    Grid,
    Col
} from 'native-base';
import Sound from 'react-native-sound';


const Button = ({title, onPress}) => (
    <Button onPress={onPress}>
        <Text>{title}</Text>
    </Button>
);



const audioTests = [
    {
        title: '1.mp3',
        url: '1.mp3',
    },
    {
        title: '2.mp3',
        url: '2.mp3',
    },
    {
        title: '3.mp3',
        url: '3.mp3',
    },
    {
        title: '4.mp3',
        url: '4.mp3',
    },
    {
        title: '5.mp3',
        url: '5.mp3',
    },
];



function playSound(testInfo, component) {

    that = component;
    song = new Sound('audio_'+testInfo.url, Sound.MAIN_BUNDLE, (error) => {
        that.setState({duration: song.getDuration(), isLoaded:true });
        if (error){
        //
        }
        else {
            song.play((success) => {
                song.release();
            });
        }
    });
}

function playAll(component) {
    that = component;
    Object.keys(audioTests).forEach(function(key) {
        setTimeout(function(key) {
            playSound2(audioTests[key], that)
        }, key * that.state.duration, key);
    });
}


class MainView extends Component {
    constructor(props) {
        super(props);

        // Sound.setCategory('Playback', true); // true = mixWithOthers

        this.state = {
            tests: {},
            duration: 0,
            isLoaded: false
        };
    }

    render() {
        return (
            <Container>
                <Header/>

                <Content>
                    <Button onPress={() => { return playAll(this)}}>
                        <Icon name="play"/>
                    </Button>
                </Content>
            </Container>
        );
    }
}

export default MainView;