@kingfang007/react-native-get-music-files

react-native-get-music-files

React Native package to get music files from local and sd for iOS and Android

What does this package?

This package get all the sound files in your local and sd card for Androi and iOS, and retrive metadata from each file, also generate an blurred image from cover file.

• SongID
• Title
• Author
• Album
• Duration
• url
• Cover
• Duration
• Genre

Getting started

$ npm install react-native-get-music-files --save or $ npm install https://github.com/cinder92/react-native-get-music-files.git --save

Mostly automatic installation

$ react-native link react-native-get-music-files

Manual installation

iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ react-native-reat-native-get-music-files and add RNReatNativeGetMusicFiles.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNReatNativeGetMusicFiles.a to your project's Build Phases ➜ Link Binary With Libraries
4. Run your project (Cmd+R)<

Android

1. Open up android/app/src/main/java/[...]/MainApplication.java

• Add com.cinder92.musicfiles.RNReatNativeGetMusicFilesPackage; to the imports at the top of the file
• Add new RNReatNativeGetMusicFilesPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

   include ':react-native-get-music-files'
   project(':react-native-get-music-files').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-get-music-files/android')
   

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

     compile project(':react-native-get-music-files')
   

4. Add the following READ_EXTERNAL_STORAGE permission to AndroidManifest.xml

   <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

   Also starting from Android M, users need to be prompted for permission dynamically. Follow this link for more details on how to do that.

Usage

import MusicFiles from 'react-native-get-music-files';

MusicFiles.getAll({
    blured : true, // works only when 'cover' is set to true
    artist : true,
    duration : true, //default : true
    cover : false, //default : true,
    genre : true,
    title : true,
    cover : true,
    minimumSongDuration : 10000, // get songs bigger than 10000 miliseconds duration,
    fields : ['title','albumTitle','genre','lyrics','artwork','duration'] // for iOs Version
}).then(tracks => {
    // do your stuff...
}).catch(error => {
    // catch the error
})

//In order to get blocks of songs, for fix performance issues at least in Android, use next

componentWillMount() {
    DeviceEventEmitter.addListener(
        'onBatchReceived',
        (params) => {
            this.setState({songs : [
                ...this.state.songs,
                ...params.batch
            ]});
        }
    )
}

componentDidMount(){
        MusicFiles.getAll({
            id : true,
            blured : false,
            artist : true,
            duration : true, //default : true
            cover : true, //default : true,
            title : true,
            cover : true,
            batchNumber : 5, //get 5 songs per batch
            minimumSongDuration : 10000, //in miliseconds,
            fields : ['title','artwork','duration','artist','genre','lyrics','albumTitle']
        });
}

MusicFiles returns an array of objects where you can loop, something like this.

[
  {
    id : 1,
    title : "La danza del fuego",
    author : "Mago de Oz",
    album : "Finisterra",
    genre : "Folk",
    duration : 132132312321, // miliseconds
    cover : "file:///sdcard/0/123.png",
    blur : "file:///sdcard/0/123-blur.png", //Will come null if createBLur is set to false
    url : "/sdcard/0/la-danza-del-fuego.mp3"
  }
]

RNAndroidAudioStore

This class is essentially an extended version of getMusicFiles but only works on android > 5.0.

Manual installation

1. Open up android/app/src/main/java/[...]/MainApplication.java

• Add import com.drazail.rnandroidstore.RNAndroidStorePackage; to the imports at the top of the file
• Add new RNAndroidStorePackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

   include ':react-native-get-music-files'
   project(':react-native-get-music-files').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-get-music-files/android')
   

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

     compile project(':react-native-get-music-files')
   

Import

import { RNAndroidAudioStore } from "react-native-get-music-files";

Return Types

• Album

  Type: Object

  property	type	description
  id	string	album id
  album	string	album name
  author	string	author
  cover	string	path to album cover
  numberOfSongs	string	number of songs in this album

• Artist

  Type: Object

  property	type	description
  key	string	album key
  artist	string	album name
  numberOfAlbums	string	number of albums
  numberOfSongs	string	number of songs
  id	string	album id

• Track

  Type: Object

  property	type	description
  id	string	song id
  title	string	title
  artist	string	artist
  album	string	album name
  duration	string	duration in ms
  url	string	path of the song

Methods

• getAll

  (async, static) getAll(options) → {Promise.<Array.<AObject>>}

  • options

    Type: Object

    property	type	description
    blured	boolean	if true returns path to blured cover, works only when 'cover' is set to true , this is will add a performance hit
    artist	boolean	if true returns artist's name
    duration	boolean	if true returns duration
    title	boolean	if true returns title
    id	boolean	if true returns id
    cover	boolean	if true returns path to cover , this is will add a performance hit
    coverFolder	string	path at which the cover images will be saved, defaults to "covers"
    coverResizeRatio	number	if set resizes the cover image, defaults to 1
    coverSize	number	in pixels, if set resizes the cover image, overrides the coverResizeRatio
    icon	boolean	if true returns the path to song's thumbnail
    iconSize	number	in pixels, if set resizes the icon
    genre	boolean	if true returns genre
    album	boolean	if true returns album
    batchNumber	number	number of songs returned per batch, please refer to notes bellow
    delay	number	in ms, defaults to 100, delay between each batch, only owrks if batchNumber is set, please refer to notes bellow
    minimumSongDuration	number	minimum duration of the songs returned

  • returns

    Type: Object

    property	type	description
    icon	string	path to icon
    title	string	title
    author	string	author
    album	string	album name
    duration	string	duration in ms
    url	string	path of the song
    fileName	string	fileName
    cover	string	path to cover

  • note :

    • If batchNumber is set, this method will not return any value and instead will fire the following events:

      Type	payload.batch	description
      onBatchReceived	array of songs	number of songs per batch is equal to batchNumber
      onLastBatchReceived	null	fires when the last batch has been sent

    • delay paramater determines how many ms should the native side wait before sending the next batch. This should help with UI thread performance on older devices.

    • event listeners should be used to catch these events ie:

         componentDidMount() {
           DeviceEventEmitter.addListener(
            'onBatchReceived',
            (p) => {
                this.setState({ ...this.state, tracks: [...this.state.tracks, p.batch] })
              }
            )
         }

• getSongByPath

  (async, static) getSongByPath(options) → {Promise.<Track>>}

  This method retrieves metadata directly from the file path.

  • options

    Type: Object

    property	type	description
    songUri	string	path to the song, this is not optional
    blured	boolean	if true returns path to blured cover, works only when 'cover' is set to true , this is will add a performance hit
    cover	boolean	if true returns path to cover , this is will add a performance hit
    coverFolder	string	path at which the cover images will be saved, defaults to "covers"
    coverResizeRatio	number	if set resizes the cover image, defaults to 1
    coverSize	number	in pixels, if set resizes the cover image, overrides the coverResizeRatio
    icon	boolean	if true returns the path to song's thumbnail
    iconSize	number	in pixels, if set resizes the icon

  • returns

    Type: Track

• getAlbums

  (async, static) getAlbums(options) → {Promise.<Array.<Album>>}

  • options

    Type: Object

    property	type	description
    artist	string	if provided, returns artist's albums, else return all the albums

  • returns

    Type: Album

• getArtists

  (async, static) getArtists() → {Promise.<Array.<Artist>>}

  • returns

    Type: Artist

• getSongs

  (async, static) getSongs(options) → {Promise.<Array.<Track>>}

  • options

    Type: Object

    property	type	description
    artist	string	optional
    album	string	optional

  • returns

    Type: Track

• search

  (async, static) search(options) → {Promise.<Array.<Track>>}

  • options

    Type: Object

    property	type	description
    searchParam	string	optional

  • returns Type: Track

Usage:

example app

Notes

• [] For android 5 and above, you may request permissions before to use this plugin check https://github.com/yonahforst/react-native-permissions

Version Changes

2.1

• [x] Removed FFMPEG library, was causing unexpected errors with differents metatags
• [x] Comments, Lyrics and Date tags are not available anymore
• [x] Improvements for Android API <= 19
• [x] Removed unnecesary comments
• [x] Cleanup code
• [x] Fixed javascript side
• [x] Fixed crash in Android KitKat and lower
• [x] MinimumSongDuration parameter is now working
• [x] Renamed library from com.reactlibrary to com.cinder92.musicfiles
• [x] Upgraded gradle to 4.4
• [x] Removed unnecesary logs
• [x] Usable for API <= 19 Android

PR are welcome!