使用React-Native-Video在音乐播放器中反应Native Shuffling歌曲

时间:2018-10-24 03:26:33

标签: react-native

因此,我正在制作音乐播放器并使用react-native-video。对于我的输出,我可以播放将其添加到数据为App.js的{​​{1}}中的所有歌曲。但是当我按下前进按钮时,我可以更改歌曲,但不能随机播放音乐播放器。即使我打开它。我不是我的错,我不能让他们洗牌。

这是我的Track组件

Player

这是我的import Controls from './Controls'; import Video from 'react-native-video'; export default class Player extends Component { constructor(props) { super(props); this.state = { paused: true, totalLength: 1, currentPosition: 0, selectedTrack: 0, repeatOn: false, shuffleOn: true, }; } setDuration(data) { // console.log(totalLength); this.setState({totalLength: Math.floor(data.duration)}); } setTime(data) { //console.log(data); this.setState({currentPosition: Math.floor(data.currentTime)}); } seek(time) { time = Math.round(time); this.refs.audioElement && this.refs.audioElement.seek(time); this.setState({ currentPosition: time, paused: false, }); } onBack() { if (this.state.currentPosition < 10 && this.state.selectedTrack > 0) { this.refs.audioElement && this.refs.audioElement.seek(0); this.setState({ isChanging: true }); setTimeout(() => this.setState({ currentPosition: 0, paused: false, totalLength: 1, isChanging: false, selectedTrack: this.state.selectedTrack - 1, }), 0); } else { this.refs.audioElement.seek(0); this.setState({ currentPosition: 0, }); } } onForward() { if (this.state.selectedTrack < this.props.tracks.length - 1) { this.refs.audioElement && this.refs.audioElement.seek(0); this.setState({ isChanging: true }); setTimeout(() => this.setState({ currentPosition: 0, totalLength: 1, paused: false, isChanging: false, selectedTrack: this.state.selectedTrack + 1, }), 0); } } render() { const track = this.props.tracks[this.state.selectedTrack]; const video = this.state.isChanging ? null : ( <Video source={{uri: track.url}} // Can be a URL or a local file. ref="audioElement" paused={this.state.paused} // Pauses playback entirely. resizeMode="cover" // Fill the whole screen at aspect ratio. repeat={false} // Repeat forever. onLoadStart={this.loadStart} // Callback when video starts to load onLoad={this.setDuration.bind(this)} // Callback when video loads onProgress={this.setTime.bind(this)} // Callback every ~250ms with currentTime onEnd={this.onEnd} // Callback when playback finishes onError={this.videoError} // Callback when video cannot be loaded style={styles.audioElement} /> ); return ( <View style={styles.container}> <Controls onPressRepeat={() => this.setState({repeatOn : !this.state.repeatOn})} repeatOn={this.state.repeatOn} shuffleOn={this.state.shuffleOn} forwardDisabled={this.state.selectedTrack === this.props.tracks.length - 1} onPressShuffle={() => this.setState({shuffleOn: !this.state.shuffleOn})} onPressPlay={() => this.setState({paused: false})} onPressPause={() => this.setState({paused: true})} onBack={this.onBack.bind(this)} onForward={this.onForward.bind(this)} paused={this.state.paused}/> {video} </View> ); } }

CSS

这是我的const styles = { container: { flex: 1, backgroundColor: 'rgb(4,4,4)', }, audioElement: { height: 0, width: 0, } }; 组件

App.js

1 个答案:

答案 0 :(得分:0)

如果您有autoPlay变量(我在redux中有该变量),则只需检查以下条件即可进行自动播放。

 if(this.props.autoPlay){
       if( this.state.currentPosition >= this.state.totalLength ){
          this.onForward();
       }
    }