feat: playing audio source android (#219)

* feat: added libsndfile, rearrange external libs dir and added AudioDecoder

* feat: added expo, expo document picker and expo files

* refactor: refactored AudioFile example

* refactor: added setting audio source from url

* ci: yarn format

* refactor: refactored AudioAPIInstaller and AudioAPiModule

* feat: added expo to fabric app

* ci: yarn format

* fix: fixed AudioDecoder initialization

* feat: added libsamplerate

* refactor: removed unused archs

* refactor: changed decoding lib to miniaudio and refactored AudioDecoder

* refactor: refactored CMakeLists.txt

* ci: yarn format

* refactor: removed playing from url, name convention refactoring

* chore: yarn lock

* chore: test

* ci: yarn format

* ci: fix

* ci: fix

---------

Co-authored-by: Maciej Makowski <maciej.makowski@swmansion.com>

Author: maciejmakowski2003

apps/common-app/package.json

@@ -9,6 +9,9 @@
     "@react-navigation/native-stack": "*",
     "@react-navigation/stack": "*",
     "@shopify/react-native-skia": "*",
+    "expo": "*",
+    "expo-document-picker": "*",
+    "expo-file-system": "*",
     "react": "*",
     "react-dom": "*",
     "react-native": "*",
@@ -26,13 +29,27 @@
     "@react-navigation/native-stack": "^6.11.0",
     "@react-navigation/stack": "^6.4.1",
     "@shopify/react-native-skia": "^1.5.1",
+    "expo": "^52.0.0",
+    "expo-document-picker": "~13.0.1",
+    "expo-file-system": "~18.0.4",
     "react": "18.3.1",
     "react-dom": "18.2.0",
     "react-native": "0.76.0",
     "react-native-audio-api": "workspace:*",
+    "react-native-dotenv": "^3.4.11",
     "react-native-gesture-handler": "^2.20.2",
     "react-native-reanimated": "^3.16.1",
     "react-native-safe-area-context": "^4.12.0",
     "react-native-screens": "^3.35.0"
+  },
+  "expo": {
+    "autolinking": {
+      "exclude": [
+        "expo-keep-awake",
+        "expo-asset",
+        "expo-font",
+        "expo-constants"
+      ]
+    }
   }
 }

apps/common-app/src/components/Select.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { ScrollView } from 'react-native-gesture-handler';
 import { Modal, View, Text, Pressable, StyleSheet } from 'react-native';
 

apps/common-app/src/examples/AudioFile/AudioFile.tsx

@@ -1,6 +1,6 @@
-import React, { useCallback } from 'react';
-import { useState, useRef, useEffect, FC } from 'react';
-import { Container, Button } from '../../components';
+import React, { useCallback, useEffect, useRef, useState, FC } from 'react';
+import { Container, Button, Spacer } from '../../components';
+import * as DocumentPicker from 'expo-document-picker';
 
 import {
   AudioBuffer,
@@ -9,9 +9,6 @@ import {
 } from 'react-native-audio-api';
 import { ActivityIndicator } from 'react-native';
 
-const assetUrl =
-  'https://audio-ssl.itunes.apple.com/apple-assets-us-std-000001/AudioPreview18/v4/9c/db/54/9cdb54b3-5c52-3063-b1ad-abe42955edb5/mzaf_520282131402737225.plus.aac.p.m4a';
-
 const AudioFile: FC = () => {
   const [isPlaying, setIsPlaying] = useState(false);
 
@@ -32,13 +29,31 @@ const AudioFile: FC = () => {
     );
   };
 
-  const fetchAudioBuffer = useCallback(async () => {
+  const handleSetAudioSourceFromFile = async () => {
+    try {
+      const result = await DocumentPicker.getDocumentAsync({
+        type: 'audio/*',
+        multiple: false,
+      });
+      if (result.canceled === false) {
+        audioBufferSourceNodeRef.current?.stop();
+        setIsPlaying(false);
+        setAudioBuffer(null);
+
+        await fetchAudioBuffer(result.assets[0].uri.replace('file://', ''));
+      }
+    } catch (error) {
+      console.error('Error picking file:', error);
+    }
+  };
+
+  const fetchAudioBuffer = useCallback(async (assetUri: string) => {
     if (!audioContextRef.current) {
       audioContextRef.current = new AudioContext();
     }
 
     const buffer =
-      await audioContextRef.current.decodeAudioDataSource(assetUrl);
+      await audioContextRef.current.decodeAudioDataSource(assetUri);
 
     setAudioBuffer(buffer);
   }, []);
@@ -64,8 +79,6 @@ const AudioFile: FC = () => {
       audioContextRef.current = new AudioContext();
     }
 
-    fetchAudioBuffer();
-
     return () => {
       audioContextRef.current?.close();
     };
@@ -75,6 +88,11 @@ const AudioFile: FC = () => {
     <Container centered>
       <Button title={isPlaying ? 'Stop' : 'Play'} onPress={handlePress} />
       {!audioBuffer && <ActivityIndicator color="#FFFFFF" />}
+      <Spacer.Vertical size={20} />
+      <Button
+        title="Set audio source from file"
+        onPress={handleSetAudioSourceFromFile}
+      />
     </Container>
   );
 };

apps/common-app/src/examples/AudioFile/runaway_kanye_west.mp3

@@ -110,6 +110,7 @@ android {
 dependencies {
     // The version of react-native is set by the React Native Gradle Plugin
     implementation("com.facebook.react:react-android")
+    implementation project(':expo')
 
     if (hermesEnabled.toBoolean()) {
         implementation("com.facebook.react:hermes-android")

apps/fabric-example/android/app/build.gradle

@@ -1,6 +1,7 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
 
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.READ_MEDIA_AUDIO"/>
 
     <application
       android:name=".MainApplication"

apps/fabric-example/android/app/src/main/AndroidManifest.xml

@@ -1,5 +1,6 @@
 package com.fabricexample
 
+import expo.modules.ReactActivityDelegateWrapper
 import com.facebook.react.ReactActivity
 import com.facebook.react.ReactActivityDelegate
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
@@ -18,5 +19,5 @@ class MainActivity : ReactActivity() {
    * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
    */
   override fun createReactActivityDelegate(): ReactActivityDelegate =
-      DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
+      ReactActivityDelegateWrapper(this, BuildConfig.IS_NEW_ARCHITECTURE_ENABLED, DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled))
 }

apps/fabric-example/android/app/src/main/java/com/fabricexample/MainActivity.kt

@@ -1,44 +1,52 @@
 package com.fabricexample
 
+import android.content.res.Configuration
+import expo.modules.ApplicationLifecycleDispatcher
+import expo.modules.ReactNativeHostWrapper
 import android.app.Application
 import com.facebook.react.PackageList
 import com.facebook.react.ReactApplication
 import com.facebook.react.ReactHost
 import com.facebook.react.ReactNativeHost
 import com.facebook.react.ReactPackage
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
-import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
 import com.facebook.react.defaults.DefaultReactNativeHost
 import com.facebook.react.soloader.OpenSourceMergedSoMapping
 import com.facebook.soloader.SoLoader
 
 class MainApplication : Application(), ReactApplication {
 
   override val reactNativeHost: ReactNativeHost =
-      object : DefaultReactNativeHost(this) {
-        override fun getPackages(): List<ReactPackage> =
-            PackageList(this).packages.apply {
-              // Packages that cannot be autolinked yet can be added manually here, for example:
-              // add(MyReactNativePackage())
-            }
-
-        override fun getJSMainModuleName(): String = "index"
-
-        override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
+    ReactNativeHostWrapper(this, object : DefaultReactNativeHost(this) {
+      override fun getPackages(): List<ReactPackage> {
+        val packages = PackageList(this).packages
+        // Packages that cannot be autolinked yet can be added manually here, for example:
+        // packages.add(new MyReactNativePackage());
+        return packages
+      }
 
-        override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
-        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
+      override fun getUseDeveloperSupport(): Boolean {
+        return BuildConfig.DEBUG;
       }
 
+      override fun getJSMainModuleName(): String = "index"
+      override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
+      override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
+    })
+
   override val reactHost: ReactHost
-    get() = getDefaultReactHost(applicationContext, reactNativeHost)
+    get() = ReactNativeHostWrapper.createReactHost(applicationContext, reactNativeHost)
 
   override fun onCreate() {
     super.onCreate()
     SoLoader.init(this, OpenSourceMergedSoMapping)
-    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
-      // If you opted-in for the New Architecture, we load the native entry point for this app.
-      load()
-    }
+    load()
+
+    ApplicationLifecycleDispatcher.onApplicationCreate(this)
+  }
+
+  override fun onConfigurationChanged(newConfig: Configuration) {
+    super.onConfigurationChanged(newConfig)
+    ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig)
   }
 }

apps/fabric-example/android/app/src/main/java/com/fabricexample/MainApplication.kt

@@ -25,7 +25,7 @@ android.useAndroidX=true
 # Use this property to specify which architecture you want to build.
 # You can also override it from the CLI using
 # ./gradlew <task> -PreactNativeArchitectures=x86_64
-reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
+reactNativeArchitectures=armeabi-v7a,arm64-v8a
 
 # Use this property to enable support to the new architecture.
 # This will allow you to use TurboModules and the Fabric render in

apps/fabric-example/android/gradle.properties

@@ -4,3 +4,6 @@ extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autoli
 rootProject.name = 'FabricExample'
 include ':app'
 includeBuild('../node_modules/@react-native/gradle-plugin')
+
+apply from: new File(["node", "--print", "require.resolve('expo/package.json')"].execute(null, rootDir).text.trim(), "../scripts/autolinking.gradle")
+useExpoModules()