/react-native-audio-streaming

iOS & Android react native module to play an audio stream, with background support and media controls

Primary LanguageObjective-CMIT LicenseMIT

react-native-audio-streaming

Features

  • Background audio streaming of remote stream
  • Control via sticky notification on android and media center on iOS
  • Shoutcast/Icy meta data support
  • Simple UI player component (if needed, an api to control the sound is available)

Demo iOS Demo android

Getting started

$ npm install react-native-audio-streaming --save

Mostly automatic installation

$ react-native link react-native-audio-streaming

Go to node_modules ➜ react-native-audio-streaming => ios and add Pods.xcodeproj

In XCode, in the project navigator, select your project. Add libReactNativeAudioStreaming.a and libStreamingKit.a to your project's Build Phases ➜ Link Binary With Libraries

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-audio-streaming => ios
    • run pod install to download StreamingKit dependency
    • add ReactNativeAudioStreaming.xcodeproj
    • add Pods/Pods.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libReactNativeAudioStreaming.a and libStreamingKit.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/[...]/MainActivity.java
  • Add import com.reactlibrary.ReactNativeAudioStreamingPackage; to the imports at the top of the file
  • Add new ReactNativeAudioStreamingPackage(MainActivity.class) to the list returned by the getPackages() method
  1. Append the following lines to android/settings.gradle: 
    include ':react-native-audio-streaming'
project(':react-native-audio-streaming').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-audio-streaming/android')
  2. Insert the following lines inside the dependencies block in android/app/build.gradle: 
      compile project(':react-native-audio-streaming')

Usage

Playing sound (similar code used by the player UI)

import { ReactNativeAudioStreaming } from 'react-native-audio-streaming';

const url = "http://lacavewebradio.chickenkiller.com:8000/stream.mp3";
ReactNativeAudioStreaming.pause();
ReactNativeAudioStreaming.resume();
ReactNativeAudioStreaming.play(url);
ReactNativeAudioStreaming.stop();

For more information see the Example app.

Player UI

import { Player } from 'react-native-audio-streaming';

class PlayerUI extends Component {
  render() {
    return (
        <Player url={"http://lacavewebradio.chickenkiller.com:8000/stream.mp3"} />
    );
  }
}

TODO

  • Allow to specify custom style for the android notification (maybe a custom view ?)
  • Allow to specify custom styles for the player
  • Handle artwork of artist
  • Add tests

Credits