react-native-hue-player v2.0.2

react-native-hue-player

HUE Player is intended to projects that need to deal with both offline/local and online/streaming audio. Now you can play, pause, skip and seek audios from diferent sources on the same playlist.

This project is based on 'ract-native-audio-streamer', 'react-native-sound' and uses 'react-native-music-control'.

Getting Started

In order to use this component you have to set up a playlist of audio files. Those audio files must have some attributes, as shown on the schema bellow:

const playlistSample = [
  {key: 'audio01', title:'Irineu', url: 'http://vocenaosabe.nem/eu.mp3'}, 
  {key: 'audio02', title:'SerjaoBerranteiro', url: 'http://aquitem.corage', path: 'matadorDeOnca.mp3'}
];

Note that the audio objects may have other fields, but "key", "title" and "url" are required. By default the first track to be played is the first one on playlist array.

Installing

Install on your project root using:

yarn add react-native-hue-player

or

npm install react-native-hue-player

This component is based on three other projects, so make sure you run the commands to link Android and iOS.

react-native link react-native-audio-streamer
react-native link react-native-sound
react-native link react-native-music-control

Usage

You have to list your audio files on your playlist array, as showed before. The 'url' field is meant for streaming audio files, while the 'path' field is for the local files.

To handle local files you need to follow some rules defined on the React Native Sound documentation:

Save your sound clip files under the directory android/app/src/main/res/raw. Note that files in this directory must be lowercase and underscored (e.g. my_file_name.mp3) and that subdirectories are not supported by Android.

Now, all you need to control your audio files is provided by the AudioController class, but if you want to use or customize our ready-to-go interface you can import the AudioControls component.

AudioControls

Basic usage:

import { AudioControls } from 'react-native-hue-player';

...
<AudioControls
  initialTrack={1} // starts on second audio file
  playlist={playlistSample}
/>

Props:

AudioController

If you don't want to use our component you are free to implement one of your own. The AudioController is a singleton class that provides data from the current audio, including its status, and functions to manipulate the playlist and to control the player.

To use the AudioController class just import it on your component (if you do it in more than one component it will be the same instance).

import { AudioController } from 'react-native-hue-player';

...
function wheneverYouNeed(){
  AudioController.init(playlistSample, initialTrack, this.onChangeStatus, this.updateCurrentTime);
}

Possible status: PLAYING, LOADING, LOADED, PAUSED, STOPPED, SEEKING, ERROR.

Example

The project is linked already.