Skip to main content
Version: Next

Getting started

Installation​

It takes only a few steps to add Audio API to your project:

Step 1: Install the package​

Install the react-native-audio-api package from npm:

npx expo install react-native-audio-api

Step 2: Add Audio API expo plugin (optional)​

Add react-native-audio-api expo plugin to your app.json or app.config.js. Read more about the plugin here!

app.json

{
  "plugins": [
    [
      "react-native-audio-api",
      {
        "iosBackgroundMode": true,
        "iosMicrophonePermission": "This app requires access to the microphone to record audio.",
        "androidPermissions" : [
          "android.permission.MODIFY_AUDIO_SETTINGS",
          "android.permission.FOREGROUND_SERVICE",
          "android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK"
        ],
        "androidForegroundService": true,
        "androidFSTypes": [
          "mediaPlayback"
        ]
      }
    ]
  ]
}

app.config.js

export default {
  ...
  "plugins": [
    [
      "react-native-audio-api",
      {
        "iosBackgroundMode": true,
        "iosMicrophonePermission": "This app requires access to the microphone to record audio.",
        "androidPermissions" : [
          "android.permission.MODIFY_AUDIO_SETTINGS",
          "android.permission.FOREGROUND_SERVICE",
          "android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK"
        ],
        "androidForegroundService": true,
        "androidFSTypes": [
          "mediaPlayback"
        ]
      }
    ]
  ]
};

Special permissions​

If you plan to use AudioRecorder entry iosMicrophonePermission and android.permission.RECORD_AUDIO in androidPermissions section is MANDATORY.

info

If your app is not managed by expo, see non-expo-permissions page how to handle permissions.

Step 3: Install system-wide bash (only Windows OS)​

There are many ways to do that, for example, using git bash. To make sure just test if any unix command works.

bash -c 'echo Hello World!'

Step 4: Additional dependencies (optional)​

If you plan to use any of WorkletNode, WorkletSourceNode, or WorkletProcessingNode, install react-native-audio-worklets and react-native-worklets >= 0.10.0. Follow the react-native-worklets setup guide for Babel and native configuration, then see the Worklets section for usage.

info

If you are not planning to use worklet nodes, react-native-worklets and react-native-audio-worklets are optional — the main library builds successfully without them.

Usage with expo​

react-native-audio-api contains native custom code and isn't part of the Expo Go application. In order to be available in expo managed builds, you have to use Expo development build. Simplest way on starting local expo dev builds, is to use:

npx expo run:ios

To learn more about expo development builds, please check out Development Builds Documentation.

Android​

No further steps are necessary.

iOS​

While developing for iOS, make sure to install pods first before running the app:

cd ios && pod install && cd ..

Web​

No further steps are necessary.

caution

react-native-audio-api on the web exposes the browser's built-in Web Audio API, but for compatibility between platforms, it limits the available interfaces to APIs that are implemented on iOS and Android.

Clear Metro bundler cache (recommended)​

npx expo start -c

What's next?​

In the next section, we will learn how the audio graph works and build a simple piano keyboard.

We are Software Mansion.

Hire us