feat: add example

Author: exzos28

README.md

@@ -34,44 +34,57 @@ With this library, unleash creativity by generating captivating audio waveforms
 ## Usage 🎶
 
 ```js
-import React, { useState } from 'react';
-
-import { Alert, ScrollView, StyleSheet, View } from 'react-native';
-import { analyzeAudio, scale, sample, AmplitudeData } from 'react-native-audio-analyzer';
+import { analyzeAudio, scale, sample } from 'react-native-audio-analyzer';
+import ReactNativeBlobUtil from 'react-native-blob-util';
 
 export default function App() {
-  const [result, setResult] = useState<AmplitudeData[]>([]);
-
-  useEffect(() => {
-    // Local location on disk. !Important!: You must take care of downloading the file and give the application reading permissions
-    analyzeAudio('<uri to audio file>')
-      .then(res => setResult(res))
-      .catch(err => {
-        // handle error
-      });
+  const [result, setResult] = useState([]);
+
+  const start = useCallback(async () => {
+    try {
+      const response = await ReactNativeBlobUtil.config({
+        fileCache: true,
+      }).fetch(
+        'GET',
+        'https://file-examples.com/storage/fe61380d0265a2c7a970ef9/2017/11/file_example_WAV_10MG.wav',
+        {}
+      );
+      const path = response.path();
+      const data = await analyzeAudio(path);
+      setResult(data);
+    } catch (error) {
+      console.log(error);
+    }
   }, []);
 
   return (
     <View style={styles.container}>
+      <Button title="Start" onPress={start} />
       <ScrollView horizontal style={styles.scroll}>
         <View style={styles.row}>
-          {result.length > 0 && scale(result.map(_ => _.amplitude)).map((value, index) => (
-            <View
-              key={index}
-              style={[styles.item, { height: value * 100 }]}
-            />
-          ))}
+          {result.length > 0 &&
+            scale(result.map((_) => _.amplitude)).map((value, index) => (
+              <View
+                key={index}
+                style={[styles.item, { height: value * 100 }]}
+              />
+            ))}
         </View>
       </ScrollView>
       <ScrollView horizontal style={styles.scroll}>
         <View style={styles.row}>
-          {result.length > 0 && scale(
-            sample(result.map(_ => _.amplitude), 20)).map((value, index) => (
-            <View
-              key={index}
-              style={[styles.item, { height: value * 100 }]}
-            />
-          ))}
+          {result.length > 0 &&
+            scale(
+              sample(
+                result.map((_) => _.amplitude),
+                20
+              )
+            ).map((value, index) => (
+              <View
+                key={index}
+                style={[styles.item, { height: value * 100 }]}
+              />
+            ))}
         </View>
       </ScrollView>
     </View>
@@ -100,6 +113,7 @@ const styles = StyleSheet.create({
   },
 });
 
+
 ```
 
 ## Contributing 🤝

example/ios/Podfile.lock

@@ -376,10 +376,12 @@ PODS:
   - React-jsinspector (0.72.6)
   - React-logger (0.72.6):
     - glog
-  - react-native-audio-analyzer (0.1.4):
+  - react-native-audio-analyzer (1.0.1):
     - ffmpeg-kit-ios-audio (= 5.1)
     - RCT-Folly (= 2021.07.22.00)
     - React-Core
+  - react-native-blob-util (0.19.6):
+    - React-Core
   - React-NativeModulesApple (0.72.6):
     - hermes-engine
     - React-callinvoker
@@ -542,6 +544,7 @@ DEPENDENCIES:
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
   - react-native-audio-analyzer (from `../..`)
+  - react-native-blob-util (from `../node_modules/react-native-blob-util`)
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
@@ -625,6 +628,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/logger"
   react-native-audio-analyzer:
     :path: "../.."
+  react-native-blob-util:
+    :path: "../node_modules/react-native-blob-util"
   React-NativeModulesApple:
     :path: "../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios"
   React-perflogger:
@@ -697,7 +702,8 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 3bf18ff7cb03cd8dfdce08fbbc0d15058c1d71ae
   React-jsinspector: 194e32c6aab382d88713ad3dd0025c5f5c4ee072
   React-logger: cebf22b6cf43434e471dc561e5911b40ac01d289
-  react-native-audio-analyzer: ece0398aa8d33fb066efdb7ad73debf034a846f7
+  react-native-audio-analyzer: 8e3b3b3dfcdca007481dd0684b52ff0a94596494
+  react-native-blob-util: d8fa1a7f726867907a8e43163fdd8b441d4489ea
   React-NativeModulesApple: 02e35e9a51e10c6422f04f5e4076a7c02243fff2
   React-perflogger: e3596db7e753f51766bceadc061936ef1472edc3
   React-RCTActionSheet: 17ab132c748b4471012abbcdcf5befe860660485
@@ -721,4 +727,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: d421679a07c4e143f071814d8f18bd9663a61516
 
-COCOAPODS: 1.14.2
+COCOAPODS: 1.11.2

example/package.json

@@ -20,7 +20,8 @@
     "@react-native/metro-config": "^0.72.11",
     "babel-plugin-module-resolver": "^5.0.0",
     "metro-react-native-babel-preset": "0.76.8",
-    "pod-install": "^0.1.0"
+    "pod-install": "^0.1.0",
+    "react-native-blob-util": "^0.19.6"
   },
   "engines": {
     "node": ">=16"

example/src/App.tsx

@@ -1,27 +1,33 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 
-import { Alert, ScrollView, StyleSheet, View } from 'react-native';
+import { Button, ScrollView, StyleSheet, View } from 'react-native';
 import { analyzeAudio, scale, sample } from 'react-native-audio-analyzer';
 import type { AmplitudeData } from 'react-native-audio-analyzer';
+import ReactNativeBlobUtil from 'react-native-blob-util';
 
 export default function App() {
   const [result, setResult] = useState<AmplitudeData[]>([]);
 
-  useEffect(() => {
-    analyzeAudio('<file uri>')
-      .then((res) => {
-        setResult(res);
-      })
-      .catch((err) => {
-        if (err instanceof Error) {
-          console.log(err);
-          Alert.alert('Error', err.message);
-        }
-      });
+  const start = useCallback(async () => {
+    try {
+      const response = await ReactNativeBlobUtil.config({
+        fileCache: true,
+      }).fetch(
+        'GET',
+        'https://file-examples.com/storage/fe61380d0265a2c7a970ef9/2017/11/file_example_WAV_10MG.wav',
+        {}
+      );
+      const path = response.path();
+      const data = await analyzeAudio(path);
+      setResult(data);
+    } catch (error) {
+      console.log(error);
+    }
   }, []);
 
   return (
     <View style={styles.container}>
+      <Button title="Start" onPress={start} />
       <ScrollView horizontal style={styles.scroll}>
         <View style={styles.row}>
           {result.length > 0 &&

yarn.lock

@@ -4029,6 +4029,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"base-64@npm:0.1.0":
+  version: 0.1.0
+  resolution: "base-64@npm:0.1.0"
+  checksum: 5a42938f82372ab5392cbacc85a5a78115cbbd9dbef9f7540fa47d78763a3a8bd7d598475f0d92341f66285afd377509851a9bb5c67bbecb89686e9255d5b3eb
+  languageName: node
+  linkType: hard
+
 "base64-js@npm:^1.1.2, base64-js@npm:^1.3.1":
   version: 1.5.1
   resolution: "base64-js@npm:1.5.1"
@@ -10774,6 +10781,7 @@ __metadata:
     pod-install: ^0.1.0
     react: 18.2.0
     react-native: 0.72.6
+    react-native-blob-util: ^0.19.6
   languageName: unknown
   linkType: soft
 
@@ -10808,6 +10816,19 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"react-native-blob-util@npm:^0.19.6":
+  version: 0.19.6
+  resolution: "react-native-blob-util@npm:0.19.6"
+  dependencies:
+    base-64: 0.1.0
+    glob: ^10.3.10
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 53403b7af91e3e5b0094ed858d35abc76093ac70c84e3101b56c6780747ef9649ffff959975a630aa739a7896e7978775b62ae3120171030aeffba6cc851ed42
+  languageName: node
+  linkType: hard
+
 "react-native-builder-bob@npm:^0.23.1":
   version: 0.23.1
   resolution: "react-native-builder-bob@npm:0.23.1"