React Native (1) React-native-videos to realize the functions of music player and progress bar

Functions:

1. Sliding cards to cut songs

2. Display progress bar

Design sketch:

Third-party components:

1.react-native-video

Github address: https://github.com/react-native-community/react-native-video

2.react-native-animated-tabs

Github address: https://github.com/philipshurpik/react-native-animated-tabs

Download mode:

Using npm:

npm install --save react-native-video
npm install --save react-native-animated-tabs

or using yarn:

yarn add react-native-video
yarn add react-native-animated-tabs

If RN version >= 0.60, it is automatic link, and if it is below 0.60, manual link is required.

Run `react-native link react-native-video` to connect the react-native-video Library

react-native-animated-tabs, ibid.

Card Sliding Function

1. Import the required components

import AnimatedTabs from "react-native-animated-tabs";

2. Using components

 <AnimatedTabs
          panelWidth={getPanelWidth()}
          activePanel={this.state.activePanel}
          onAnimateFinish={activePanel => this.setState({ activePanel })}
        >
        /**
        Put your card here.
        <View><Image source={...}/></View>
        ...
        */
  </AnimatedTabs>

3. Button Switch Card

 <View style={styles.buttons}>
          <TouchableOpacity
            style={styles.text}
            onPress={() => this.goToPanel(-1)}
          >
            <Text>Last song</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.text}
            onPress={() => this.goToPanel(1)}
          >
            <Text>Next song</Text>
          </TouchableOpacity>

4.goToPanel() function

goToPanel(direction) {
    const nextPanel = this.state.activePanel + direction;

    if (nextPanel >= 0 && nextPanel < panelsCount) {
      this.setState({ activePanel: nextPanel });
    }
  }
}

At this time, we can realize the function of sliding cards.

Example diagram:

Use react-native-video music insertion

1. Import the required components and music

import Video from "react-native-video";
import url1 from "../static/video/Hsu Hsiao-ming-Fishing Song.mp3";

2. Using components

<Video
     source={require('./background.mp4')} // Video URL address, or local address
     //source={require('./music.mp3')}// Can play audio
    //source={{uri:'http://......'}}
     ref='player'
     rate={this.state.isPlay?1:0}                   // Control pause/playback, 0 stands for paused, 1 stands for normal playback.
     volume={1.0}               
    // The amplification factor of sound is large, 0 is silent, 1 is normal, and larger numbers are multiples of amplification.
     muted={false}                  // true stands for silence and defaults to false.
     paused={false}                 // true stands for pause and defaults to false
     resizeMode="contain"           // Video adaptive scaling behavior, include, stretch, cover
     repeat={false}                 // Whether to Play Repeatedly
     playInBackground={false}       // Whether the playback pauses when the app goes back to the background
     playWhenInactive={false}       // [iOS] Video continues to play when control or notification center is shown. Applicable only to IOS
     onLoadStart={this.loadStart}   // Callback function when video starts loading
     onLoad={this.setDuration}      // Callback function when the video is loaded
     onProgress={this.setTime}      //  Schedule control, called every 250ms to get the progress of video playback
     onEnd={this.onEnd}             // Callback function when the video is played
     onError={this.videoError}      // Callback function when video cannot be loaded or error occurs
     style={styles.backgroundVideo}
                  />

3. I set some properties of the component

 <Video
            ref={video => (this.player = video)}
            source={SONGS[this.state.activePanel].url}
            ref="video"
            paused={this.state.paused}                          
            onLoad={data => this.setDuration(data)}         
            volume={1.0}
            paused={false}
            onEnd={() => this.goToPanel(1)}
            playInBackground={true}
            onProgress={e => this.setTime(e)}
            playWhenInactive={true}
          />

4. Functions used

 constructor() {
    super();

    this.state = {
      activePanel: 0,                   //The current active panel
      activeSong: SONGS[0],             //The song being played
      currentTime: 0.0,                 //Current playback time
      paused: 1.0,                      //play
      sliderValue: 0,                   //Progress bar
      duration: 0.0                     //Total length of time
    };
  }
  //The time of playing formatted music is 0:00.
  formatMediaTime(duration) {
    let min = Math.floor(duration / 60);
    let second = duration - min * 60;
    min = min >= 10 ? min : "0" + min;
    second = second >= 10 ? second : "0" + second;
    return min + ":" + second;
  }
  
  //Setting progress bar and changing playback time
  setTime(data) {
    let sliderValue = parseInt(this.state.currentTime);
    this.setState({
      slideValue: sliderValue,
      currentTime: data.currentTime
    });
  }

    //Set the total time
  setDuration(duration) {
    this.setState({ duration: duration.duration });
  }

Configuration of progress bar

 <Slider
            style={styles.slider}
            value={this.state.slideValue}
            maximumValue={this.state.duration}
            step={1}
            onValueChange={value => this.setState({ currentTime: value })}
          />