Audio Player to offline/local and online/streaming audio

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:

Name	Type	Default	Description
activeColor	color	'#FFF'	Main color of the compontent, used as default when buttons are active
inactiveColor	color	'#888'	Secondary color of the compontent, used as default when buttons are inactive/disabled
hasButtonSkipSeconds	boolean	false	Does you player has buttons to skip secods?
timeToSkip	integer	15	How many seconds you want your skip on your buttons
thumbnailSize	image style props	-	Size of the cover thumbnail
titleStyle	text style props	-	Custom style for the audio title
authorStyle	text style props	-	Custom style for the author name
activeButtonColor	color	activeColor	Custom color for the buttons (play, pause, skip...) when they are active
inactiveButtonColor	color	inactiveColor	Custom color for the buttons (play, pause, skip...) when they are inactive/disabled
sliderMinimumTrackTintColor	color	activeColor	Custom color on the left side of the slider
sliderMaximumTrackTintColor	color	activeColor	Custom color on the right side of the slider
sliderThumbTintColor	color	activeColor	Custom color of the slider circle

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.

Function	Params	Descriptions
init	playlist: array, track: integer, onChangeStatus: function, onChangeCurrentTime: function	Initiate the audioController with the given playlist. Has optional initial track and two callback functions, called when the audio status changes and every second when currentTime changes.
load	audio: object, isLoaded: function	Loads an audio file and returns a callback when its loaded.
play	none	Plays the 'currentAudio', defined with load function
pause	none	Pauses the 'currentAudio
seek	seconds: integer	Seeks to the target second.
skip	seconds: integer	Jumps to the position resulting from currentTime + seconds.
hasTrack	index: integer	Checks if the target index exists in playlist.
hasNext	none	Checks if there is an audio on next position of the playlist.
hasPrevious	none	Checks if there is an audio on previous position of the playlist.
playNext	none	Plays the audio on next position of the playlist.
playPrevious	none	Plays the audio on previous position of the playlist.
playAnotherTrack	index: integer	Plays the audio on target position of the playlist.

GitHub