Skip to content

quangduz/react-native-sound

 
 

Repository files navigation

react-native-sound

React Native module for playing sound clips on iOS, Android, and Windows.

Feature matrix

Feature iOS Android Windows
Load sound from the app bundle
Load sound from other directories
Load sound from the network
Play sound
Playback completion callback
Pause
Resume
Stop
Reset
Release resource
Get duration
Get number of channels
Get/set volume
Get/set system volume
Get/set pan
Get/set loops
Get/set current time
Set speed

Installation

First install the npm package from your app directory:

npm install react-native-sound --save

Then link it automatically using:

react-native link react-native-sound

Manual Installation Notes

Please see the Wiki for these details https://github.com/zmxv/react-native-sound/wiki/Installation

Help with React-Native-Sound

  • For react-native-sound developers Gitter chat
  • For help using react-native-sound Gitter chat

Demo project

https://github.com/zmxv/react-native-sound-demo

Basic usage

First you'll need to add audio files to your project.

  • Android: 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.
  • iOS: Open Xcode and add your sound files to the project (Right-click the project and select Add Files to [PROJECTNAME])
// Import the react-native-sound module
var Sound = require('react-native-sound');

// Enable playback in silence mode
Sound.setCategory('Playback');

// Load the sound file 'whoosh.mp3' from the app bundle
// See notes below about preloading sounds within initialization code below.
var whoosh = new Sound('whoosh.mp3', Sound.MAIN_BUNDLE, (error) => {
  if (error) {
    console.log('failed to load the sound', error);
    return;
  }
  // loaded successfully
  console.log('duration in seconds: ' + whoosh.getDuration() + 'number of channels: ' + whoosh.getNumberOfChannels());
});

// Play the sound with an onEnd callback
whoosh.play((success) => {
  if (success) {
    console.log('successfully finished playing');
  } else {
    console.log('playback failed due to audio decoding errors');
    // reset the player to its uninitialized state (android only)
    // this is the only option to recover after an error occured and use the player again
    whoosh.reset();
  }
});

// Reduce the volume by half
whoosh.setVolume(0.5);

// Position the sound to the full right in a stereo field
whoosh.setPan(1);

// Loop indefinitely until stop() is called
whoosh.setNumberOfLoops(-1);

// Get properties of the player instance
console.log('volume: ' + whoosh.getVolume());
console.log('pan: ' + whoosh.getPan());
console.log('loops: ' + whoosh.getNumberOfLoops());

// Seek to a specific point in seconds
whoosh.setCurrentTime(2.5);

// Get the current playback point in seconds
whoosh.getCurrentTime((seconds) => console.log('at ' + seconds));

// Pause the sound
whoosh.pause();

// Stop the sound and rewind to the beginning
whoosh.stop(() => {
  // Note: If you want to play a sound after stopping and rewinding it,
  // it is important to call play() in a callback.
  whoosh.play();
});

// Release the audio player resource
whoosh.release();

Notes

About

React Native module for playing sound clips

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Java 31.0%
  • C# 26.8%
  • Objective-C 26.7%
  • JavaScript 13.6%
  • Ruby 1.9%