Question

我想在一个类中播放音频，但是该音频来自在react-native中放置在另一个类中的数组。

我有一个用于研究音频，阵列和列表的应用程序。我已经可以在列表和班级中显示主题和名称来播放音频。但是我不知道如何播放arraylist中的不同音频。我希望它像一个播放列表，但我从未找到可以做到这一点的教程。您能帮我吗？

这是在放置音乐数组的array.js中

export default [

    {
        user:'song1',
        subject:'euphoria',
        name:'euphoria',
        audio: require('../src/musics/euphoria.mp3')
    },

    {
        subject:'tempo',
        user:'song2',
        name:'tempo',
        audio: require('../src/musics/tempo.mp3')

    },

    {
        user:'song4',
        subject:'thanks',
        name:'thanks',

        audio: require('../src/musics/thanks.mp3')

    }
]

这是我要播放音乐的ehe.js

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
import  SoundPlayer from 'react-native-sound-player';
import array from './array'

// create a component

class Ehe extends Component {
    constructor(props){
        super(props);
        this.state={
            pencet:()=>SoundPlayer.playSoundFile({audio}),
        }
    }
    klik=()=>{
        SoundPlayer.pause()
        this.setState({
            pencet:()=>SoundPlayer.resume()
        })
    }
    kliik=()=>{
         SoundPlayer.stop()
         this.setState({
             pencet:()=>SoundPlayer.playSoundFile({audio})
     })
    }
    render() {
        const {params} = this.props.navigation.state;
        const subject = params ? params.subject : null;
        const audio = params ? params.audio : null;

        return (
            <View style={styles.container}>
                <Text style={styles.judul}>{subject}</Text>

                <View style={styles.audio}>
                <TouchableOpacity onPress={this.klik}>
                    <Image source={require('../src/image/pausee.png')} style={{width:60, height: 60, marginRight:5, justifyContent:'center', alignItems:'center'}}/>
                </TouchableOpacity>
                <TouchableOpacity onPress={this.state.pencet}>
                    <Image source={require('../src/image/playy.png')} style={{width:60, height: 60, marginRight:5, justifyContent:'center', alignItems:'center'}}/>
                </TouchableOpacity>
                </View>
            </View>
        );
    }
}

我应该怎么做才能播放/停止/暂停/恢复array.js中的音频？

Answer 1

是的，您可以创建一个类并执行所需的任何功能，然后将其导出假设您要按如下所示进行简单的课程：

import  SoundPlayer from 'react-native-sound-player';
class PlayMySound {}
PlayMySound.soundsArray = [

    {
        user:'song1',
        subject:'euphoria',
        name:'euphoria',
        audio: require('../src/musics/euphoria.mp3')
    },

    {
        subject:'tempo',
        user:'song2',
        name:'tempo',
        audio: require('../src/musics/tempo.mp3')

    },

    {
        user:'song4',
        subject:'thanks',
        name:'thanks',

        audio: require('../src/musics/thanks.mp3')

    }
]
PlayMySound.play = (soundID) => {
 ... Your code to search for the audio file in the previous array..
 SoundPlayer.playSoundFile({audio})
}

PlayMySound.stop = (soundID) => {
 ... Your code to search for the audio file int the previous array..
}
.....
export default PlayMySound;

然后在主文件ehe.js中，您可以导入该类并使用静态函数

import PlayMySound from './playMySound.js';
//You can use the functions you create in the class
PlayMySound.play(audio_ID)

您也可以按照此答案获取更多信息 https://stackoverflow.com/a/48727463/1627358

希望这可以解决您的问题。

如何在react-native中播放另一个类中的数组音频

1 个答案: