How do I play a sound from a URL in React Native Sound?

Load the sound by passing the URL as the first parameter and an empty string as the second, e.g., `new Sound('https://example.com/sound.mp3', '', callback)`. Ensure your app has network permissions and handle errors in the callback, as loading from URLs is supported but may have latency.

React Native Sound or react-native-video for audio playback?

Use React Native Sound for short clips and sound effects, as it's optimized for that with minimal latency. For streaming audio or video, choose react-native-video, since React Native Sound explicitly states it doesn't support streaming.

How to set up audio files for React Native Sound on Android and iOS?

On Android, place files in `android/app/src/main/res/raw/` with lowercase, underscored names. On iOS, add files to the Xcode project bundle via the interface. Follow the README's detailed steps to avoid common loading issues.

Does React Native Sound work with background audio playback?

Yes, but it requires configuration. Use `Sound.setCategory('Playback')` to set the audio session, especially on iOS, and ensure app permissions are set for background audio. However, complex background scenarios might need additional native setup.

How to loop a sound indefinitely in React Native Sound?

Call `sound.setNumberOfLoops(-1)` to loop forever. Note that on Android, exact loop counts aren't supported, so use -1 for infinite loops, while iOS supports precise counts.

Why is my sound not playing in React Native Sound after installation?

Common causes include linking failures or files not loaded. Clear build caches (e.g., with `./gradlew cleanBuildCache` on Android), ensure audio files are correctly placed, and check the loading callback for errors as per the troubleshooting guide.

Open-Awesome

react-native-sound

MITTypeScriptv0.13.0

A React Native module for cross-platform audio clip playback with TypeScript support and modern architecture compatibility.

GitHub

2.9k stars783 forks0 contributors

What is react-native-sound?

React Native Sound is a library that provides audio playback capabilities for React Native applications on iOS and Android. It solves the problem of playing sound clips—such as sound effects, notifications, or background music—from various sources like app bundles, local files, or network URLs. The library offers a consistent API across platforms with features like volume control, panning, looping, and support for modern React Native architectures.

Target Audience

React Native developers building mobile apps that require audio playback, such as games, meditation apps, or applications needing sound feedback for user interactions. It's particularly useful for those using TypeScript or the New Architecture (TurboModules).

Value Proposition

Developers choose React Native Sound for its cross-platform reliability, full TypeScript support, and compatibility with React Native's modern architecture. It provides a straightforward API for common audio tasks without the overhead of more complex streaming solutions, making it ideal for playing short audio clips efficiently.

Overview

React Native module for playing sound clips

Use Cases

Best For

Adding sound effects to React Native games or interactive apps
Playing background music or ambient sounds in meditation or focus applications
Implementing audio feedback for user interactions like button clicks
Building apps that require cross-platform audio playback with TypeScript
Creating applications that need to play multiple audio clips simultaneously
Developing React Native apps using the New Architecture (TurboModules)

Not Ideal For

Applications requiring real-time audio streaming or long-form playback (e.g., podcasts, music streaming apps)
Projects needing audio recording, advanced processing, or sound effects mixing
Teams demanding 100% feature parity between iOS and Android, due to gaps like pan control on iOS only
Expo Go users, as it requires custom development builds and isn't compatible with the managed workflow

Pros & Cons

Pros

Cross-Platform Consistency

Provides a unified API using AVAudioPlayer on iOS and MediaPlayer on Android, ensuring reliable playback across platforms without platform-specific code.

Modern Architecture Ready

Fully supports React Native's New Architecture with TurboModules, offering better performance and future-proofing for apps adopting the latest React Native features.

TypeScript Integration

Includes complete TypeScript definitions out of the box, enabling type-safe development and reducing runtime errors in TypeScript projects.

Rich Playback Controls

Offers extensive controls like play, pause, seek, volume, pan, and looping, with support for multiple simultaneous sounds, as detailed in the platform compatibility table.

Cons

Platform Feature Gaps

Some features are platform-specific, such as pan control only on iOS and reset to beginning only on Android, leading to inconsistent behavior and potential workarounds.

Setup and Linking Complexity

Requires manual file placement in specific directories (e.g., Android's raw folder) and often faces linking issues, as highlighted in troubleshooting with common build errors and cache resets.

Playback-Only Limitation

Focuses solely on audio playback without support for recording, streaming, or advanced audio processing, forcing developers to use additional libraries for those needs.

Frequently Asked Questions

Related Projects

react-native-camera

A Camera component for React Native. Also supports barcode scanning!

Stars9,641

Forks3,533

Last commit2 years ago

react-native-video

A <Video /> component for react-native

Stars7,671

Forks3,027

Last commit9 days ago

react-native-track-player

The best audio player ever built for React Native. Built on the New Architecture — Android Auto, caching, preloading, background playback, and more.

Stars3,693

Forks1,179

Last commit2 days ago

react-native-camera-kit

A high performance, easy to use, rock solid camera library for React Native apps.

Stars2,683

Forks622

Last commit15 days ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub