react-native-audiosprites 0.2.0-alpha.0 → 0.2.0

package/README.md

@@ -1,6 +1,9 @@
+![react-native-audiosprites_poster](react-native-audiosprites_poster.jpg)
+
 # react-native-audiosprites
 
 A universal player for audio sprites generated by the 'audiosprite' tool.
+Supports playing multiple sounds at same time!
 
 ## Installation
 
@@ -8,11 +11,15 @@ A universal player for audio sprites generated by the 'audiosprite' tool.
 npm install react-native-audiosprites
 ```
 
+```sh
+yarn add react-native-audiosprites
+```
+
 ## Usage
 
 First, you need to generate an audio sprite and a JSON manifest file using the `audiosprite` tool.
 
-Assuming you have `audiosprite` installed globally:
+Assuming you have [`audiosprite`](https://www.npmjs.com/package/audiosprite) installed globally:
 
 ```sh
 audiosprite --output audiosprite --format howler --path ./src/__tests__/ Sound_1.m4a Sound_2.m4a Sound_3.m4a Sound_4.m4a
@@ -27,13 +34,8 @@ Then, you can use the `AudioSpritePlayer` to play the sounds from the sprite.
 ```typescript
 import { AudioSpritePlayer } from 'react-native-audiosprites';
 
-// Ensure AudioContext is available
-const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
-
-// Use the native fetch API
 const player = new AudioSpritePlayer({
-  audioContext,
-  fetch: window.fetch.bind(window),
+  platform: 'web',
 });
 
 async function playSound(soundName: string) {
@@ -58,52 +60,117 @@ playSound('Sound_1');
 
 ### React Native Environment
 
-For React Native, you'll typically need a polyfill or a library that provides `AudioContext` and `fetch` functionality, as these are Web APIs. `react-native-audio-api` is a good option for `AudioContext`. For `fetch`, React Native provides its own global `fetch` implementation.
+For React Native, you'll need `react-native-audio-api` and `expo-asset` to handle audio playback and asset loading.
 
-First, install `react-native-audio-api`:
+First, install the dependencies:
 
 ```sh
-npm install react-native-audio-api
+npm install react-native-audio-api expo-asset expo-file-system
 # or
-yarn add react-native-audio-api
+yarn add react-native-audio-api expo-asset expo-file-system
 ```
 
-Then, you can use it like this:
+Change `metro.config.js` as per `react-native-audio-api` documentation: https://docs.swmansion.com/react-native-audio-api/docs/fundamentals/getting-started
 
-```typescript
-import { AudioSpritePlayer } from 'react-native-audiosprites';
-import { AudioContext } from 'react-native-audio-api'; // Import from the library
-
-// Create an instance of AudioContext
-const audioContext = new AudioContext();
-
-// Use the global fetch provided by React Native
-const player = new AudioSpritePlayer({
-  audioContext,
-  fetch: fetch, // React Native provides a global fetch
-});
+```js
+module.exports = wrapWithAudioAPIMetroConfig(config);
+```
 
-async function playRNSound(soundName: string) {
-  try {
-    // Load the audio sprite manifest and audio files
-    // Adjust the path to your audiosprite.json file.
-    // In React Native, you might need to bundle your audio files
-    // and refer to them using a local asset path or a remote URL.
-    // For this example, we assume it's accessible via a URL.
-    await player.load('http://localhost:8081/src/__tests__/audiosprite.json');
-    console.log('React Native Audio sprite loaded successfully.');
+Then, you can use it in your component:
 
-    // Play a sound from the spritemap
-    player.play(soundName);
-    console.log(`Playing React Native sound: ${soundName}`);
-  } catch (error) {
-    console.error('Error playing React Native sound:', error);
-  }
+```typescript
+import { StyleSheet, View, Text, Button, Platform } from 'react-native';
+import { AudioSpritePlayer } from 'react-native-audiosprites';
+import { AudioManager, AudioContext } from 'react-native-audio-api';
+import { useEffect, useState, useRef } from 'react';
+import { Asset } from 'expo-asset';
+import { fetch } from 'expo/fetch';
+import manifest from '../assets/audiosprite.json';
+
+// Import the audio asset
+const audioAsset = require('../assets/audiosprite.mp3');
+
+export default function App() {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const playerRef = useRef<AudioSpritePlayer | null>(null);
+
+  useEffect(() => {
+    const loadPlayer = async () => {
+      const asset = Asset.fromModule(audioAsset);
+      await asset.downloadAsync();
+      const audioUri = asset.localUri || asset.uri;
+
+      if (!audioUri) {
+        console.error('Failed to get audio URI.');
+        return;
+      }
+
+      if (Platform.OS === 'ios') {
+        try {
+          await AudioManager.setAudioSessionOptions({
+            iosCategory: 'playback',
+            iosOptions: ['mixWithOthers'],
+          });
+          await AudioManager.setAudioSessionActivity(true);
+        } catch (e) {
+          console.error('Failed to configure AudioSession options:', e);
+        }
+      }
+
+      const audioContext = new AudioContext();
+      const audioPlayer = new AudioSpritePlayer({
+        audioContext,
+        fetch: fetch.bind(globalThis),
+        platform: Platform.OS,
+      });
+
+      try {
+        await audioPlayer.load(manifest, audioUri);
+        playerRef.current = audioPlayer;
+        setIsLoaded(true);
+        console.log('Audio sprite loaded successfully.');
+      } catch (error) {
+        console.error('Failed to load audio sprite:', error);
+      }
+    };
+
+    loadPlayer();
+  }, []);
+
+  const playSound = (soundName: string) => {
+    const player = playerRef.current;
+    if (player && isLoaded) {
+      player.play(soundName);
+      console.log(`Playing sound: ${soundName}`);
+    } else {
+      console.warn('Player not loaded yet.');
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text>AudioSprite Player Example</Text>
+      <Button
+        title="Play Sound 1"
+        onPress={() => playSound('Sound_1')}
+        disabled={!isLoaded}
+      />
+      <Button
+        title="Play Sound 2"
+        onPress={() => playSound('Sound_2')}
+        disabled={!isLoaded}
+      />
+    </View>
+  );
 }
 
-// Example usage:
-playRNSound('Sound_1');
-// playRNSound('Sound_2');
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
 ```
 
 ## Contributing

package/lib/module/index.js

@@ -2,15 +2,27 @@
 
 /**
  * Universal player for audio sprites generated by the 'audiosprite' tool.
- * It requires an AudioContext and fetch to be injected.
+ * Requires an AudioContext and fetch to be injected.
+ * Uses AudioBufferQueueSourceNode and buffer splitting for mobile stability.
  */
 export class AudioSpritePlayer {
+  // The full audio buffer
+
+  // Cache for the small, pre-split AudioBuffers used by mobile's QueueSourceNode
+  spriteBufferCache = {};
   constructor({
     audioContext,
-    fetch
+    fetch,
+    platform
   }) {
     if (!audioContext) {
-      throw new Error('An AudioContext instance must be provided.');
+      if (platform === 'web') {
+        // Web doesnt need to provide AudioContext
+        // @ts-ignore
+        this.audioContext = new AudioContext();
+      } else {
+        throw new Error('An AudioContext instance must be provided from react-native-audio-api.');
+      }
     }
     if (!fetch) {
       throw new Error('A fetch implementation must be provided.');
@@ -19,29 +31,101 @@ export class AudioSpritePlayer {
     this.fetch = fetch;
     this.audioBuffer = null;
     this.manifest = null;
+    this.platform = platform; // 'web', 'ios', 'android', etc.
+    if (this.audioContext?.createBufferSource?.constructor?.name === 'AsyncFunction') {
+      console.log('createBufferSource is async! going with web default AudioContext');
+      // Can be removed after this PR gets merged
+      //https://github.com/software-mansion/react-native-audio-api/issues/574
+      // @ts-ignore
+      this.audioContext = new AudioContext();
+    }
   }
-  async load(jsonPath) {
-    try {
-      const response = await this.fetch(jsonPath);
-      if (!response.ok) {
-        throw new Error(`Failed to fetch manifest: ${response.statusText}`);
+
+  /**
+   * Caches pre-split AudioBuffers for each sprite, which is necessary
+   * for stable playback on mobile using the BufferQueueSourceNode.
+   */
+  _cacheSpriteBuffers() {
+    if (!this.audioBuffer || !this.manifest || this.platform === 'web') {
+      return; // Only necessary for mobile platforms
+    }
+    const sampleRate = this.audioBuffer.sampleRate;
+    const numChannels = this.audioBuffer.numberOfChannels;
+    this.spriteBufferCache = {};
+    for (const soundName in this.manifest.spritemap) {
+      const sound = this.manifest.spritemap[soundName];
+
+      // Calculate frame indices
+      const startFrame = Math.floor(sound.start * sampleRate);
+      const endFrame = Math.ceil(sound.end * sampleRate);
+      const durationFrames = endFrame - startFrame;
+      if (durationFrames <= 0) {
+        console.warn(`Sprite "${soundName}" has zero or negative duration. Skipping.`);
+        continue;
       }
-      this.manifest = await response.json();
-      if (!this.manifest.resources || !this.manifest.spritemap) {
-        throw new Error('Invalid audiosprite manifest format. Missing "resources" or "spritemap".');
+
+      // 1. Create a new empty buffer for the sprite
+      const spriteBuffer = this.audioContext.createBuffer(numChannels, durationFrames, sampleRate);
+
+      // 2. Copy data from the full buffer to the new sprite buffer
+      for (let i = 0; i < numChannels; i++) {
+        const sourceData = this.audioBuffer.getChannelData(i);
+        const destinationData = spriteBuffer.getChannelData(i);
+
+        // Extract the segment data (efficient array copy)
+        const segment = sourceData.subarray(startFrame, endFrame);
+        destinationData.set(segment);
       }
+      this.spriteBufferCache[soundName] = spriteBuffer;
+      // console.log(`Cached sprite buffer for ${soundName}, frames: ${durationFrames}`);
+    }
+  }
+  async load(json, audio) {
+    try {
+      let decodedBuffer;
 
-      // Find the first supported audio file (e.g., .mp3 or .ogg)
-      // For simplicity, we just take the first one.
-      const audioFileName = this.manifest.resources[0];
-      const audioUrl = new URL(audioFileName, response.url).href;
-      const audioResponse = await this.fetch(audioUrl);
-      if (!audioResponse.ok) {
-        throw new Error(`Failed to fetch audio file: ${audioResponse.statusText}`);
+      // --- Fetching and Decoding Logic (Uses existing logic) ---
+      if (typeof json === 'string') {
+        const response = await this.fetch(json);
+        if (!response.ok) {
+          throw new Error(`Failed to fetch manifest: ${response.statusText}`);
+        }
+        this.manifest = await response.json();
+        if (!this.manifest.resources || !this.manifest.spritemap) {
+          throw new Error('Invalid audiosprite manifest format. Missing "resources" or "spritemap".');
+        }
+        const audioFileName = this.manifest.resources[0];
+        const audioUrl = new URL(audioFileName, response.url).href;
+        const audioResponse = await this.fetch(audioUrl);
+        if (!audioResponse.ok) {
+          throw new Error(`Failed to fetch audio file: ${audioResponse.statusText}`);
+        }
+        const arrayBuffer = await audioResponse.arrayBuffer();
+        decodedBuffer = await this.audioContext.decodeAudioData(arrayBuffer);
+      } else {
+        this.manifest = json;
+        if (!this.manifest.resources || !this.manifest.spritemap) {
+          throw new Error('Invalid audiosprite manifest format. Missing "resources" or "spritemap".');
+        }
+        let arrayBuffer;
+        if (typeof audio === 'string') {
+          const audioResponse = await this.fetch(audio);
+          if (!audioResponse.ok) {
+            throw new Error(`Failed to fetch audio file: ${audioResponse.statusText}`);
+          }
+          arrayBuffer = await audioResponse.arrayBuffer();
+        } else {
+          arrayBuffer = audio;
+        }
+        decodedBuffer = await this.audioContext.decodeAudioData(arrayBuffer);
       }
-      const arrayBuffer = await audioResponse.arrayBuffer();
-      this.audioBuffer = await this.audioContext.decodeAudioData(arrayBuffer);
-      console.log('Audio sprite loaded successfully.');
+      // --- End Fetching and Decoding Logic ---
+
+      this.audioBuffer = decodedBuffer;
+
+      // 🚨 CRITICAL: Split and cache buffers for mobile stability/correctness
+      this._cacheSpriteBuffers();
+      console.log('RNAS: Audio sprite loaded successfully.');
     } catch (error) {
       console.error('Failed to load audio sprite:', error);
       throw error; // Re-throw for user to catch
@@ -53,38 +137,62 @@ export class AudioSpritePlayer {
       return;
     }
 
-    // Resume context if it was suspended (e.g., by browser policy)
+    // Resume context if it was suspended (must be non-blocking here)
     if (this.audioContext.state === 'suspended') {
-      this.audioContext.resume();
+      this.audioContext.resume().catch(e => {
+        console.error('Failed to resume AudioContext:', e);
+      });
     }
-
-    // Get the sound from the 'spritemap'
     const sound = this.manifest.spritemap[soundName];
     if (!sound) {
       console.warn(`Sound "${soundName}" not found in spritemap.`);
       return;
     }
-
-    // Calculate duration from start/end times
     const duration = sound.end - sound.start;
     if (duration <= 0) {
       console.warn(`Sound "${soundName}" has invalid duration.`);
       return;
     }
-    const source = this.audioContext.createBufferSource();
-    source.buffer = this.audioBuffer;
-    const gain = this.audioContext.createGain();
-    gain.gain.setValueAtTime(1.0, this.audioContext.currentTime);
-    source.connect(gain);
-    gain.connect(this.audioContext.destination);
+    let source;
+
+    // 🚨 MOBILE LOGIC: Use AudioBufferQueueSourceNode with cached split buffer
+    if (this.platform !== 'web') {
+      const spriteBuffer = this.spriteBufferCache[soundName];
+      if (!spriteBuffer) {
+        console.error(`RNAS Error: Split buffer for "${soundName}" not found in cache.`);
+        return;
+      }
+      if (!this.audioContext.createBufferQueueSource) {
+        console.error('RNAS Error: createBufferQueueSource is not available on this native platform.');
+        return;
+      }
+      source = this.audioContext.createBufferQueueSource();
+
+      // Mobile Implementation: Enqueue the specific, short sprite buffer
+      source.enqueueBuffer(spriteBuffer);
+      source.connect(this.audioContext.destination);
 
-    // Use the 'audiosprite' format: start(when, offset, duration)
-    source.start(0,
-    // Start playing now
-    sound.start,
-    // The offset
-    duration // The calculated duration
-    );
+      // This will play the short buffer from its start to its end.
+      source.start(1);
+    } else {
+      // 🌐 WEB LOGIC (Standard Web Audio API)
+      source = this.audioContext.createBufferSource();
+      if (!source || typeof source.connect !== 'function') {
+        console.error('RNAS Error: createBufferSource() returned an invalid object on web. Aborting playback.');
+        return;
+      }
+      source.buffer = this.audioBuffer;
+      source.connect(this.audioContext.destination);
+
+      // Use the 'audiosprite' format: start(when, offset, duration)
+      source.start(0,
+      // Start playing now
+      sound.start,
+      // The offset
+      duration // The calculated duration
+      );
+    }
+    console.log(`RNAS: played ${soundName} on ${this.platform}`);
   }
   getManifest() {
     return this.manifest;

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["AudioSpritePlayer","constructor","audioContext","fetch","Error","audioBuffer","manifest","load","jsonPath","response","ok","statusText","json","resources","spritemap","audioFileName","audioUrl","URL","url","href","audioResponse","arrayBuffer","decodeAudioData","console","log","error","play","soundName","warn","state","resume","sound","duration","end","start","source","createBufferSource","buffer","gain","createGain","setValueAtTime","currentTime","connect","destination","getManifest","getAudioBuffer"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA;AACA;AACA;AACA;AACA,OAAO,MAAMA,iBAAiB,CAAC;EAM7BC,WAAWA,CAAC;IAAEC,YAAY;IAAEC;EAAyC,CAAC,EAAE;IACtE,IAAI,CAACD,YAAY,EAAE;MACjB,MAAM,IAAIE,KAAK,CAAC,4CAA4C,CAAC;IAC/D;IACA,IAAI,CAACD,KAAK,EAAE;MACV,MAAM,IAAIC,KAAK,CAAC,0CAA0C,CAAC;IAC7D;IACA,IAAI,CAACF,YAAY,GAAGA,YAAY;IAChC,IAAI,CAACC,KAAK,GAAGA,KAAK;IAClB,IAAI,CAACE,WAAW,GAAG,IAAI;IACvB,IAAI,CAACC,QAAQ,GAAG,IAAI;EACtB;EAEA,MAAMC,IAAIA,CAACC,QAAgB,EAAE;IAC3B,IAAI;MACF,MAAMC,QAAQ,GAAG,MAAM,IAAI,CAACN,KAAK,CAACK,QAAQ,CAAC;MAC3C,IAAI,CAACC,QAAQ,CAACC,EAAE,EAAE;QAChB,MAAM,IAAIN,KAAK,CAAC,6BAA6BK,QAAQ,CAACE,UAAU,EAAE,CAAC;MACrE;MACA,IAAI,CAACL,QAAQ,GAAG,MAAMG,QAAQ,CAACG,IAAI,CAAC,CAAC;MAErC,IAAI,CAAC,IAAI,CAACN,QAAQ,CAACO,SAAS,IAAI,CAAC,IAAI,CAACP,QAAQ,CAACQ,SAAS,EAAE;QACxD,MAAM,IAAIV,KAAK,CACb,0EACF,CAAC;MACH;;MAEA;MACA;MACA,MAAMW,aAAa,GAAG,IAAI,CAACT,QAAQ,CAACO,SAAS,CAAC,CAAC,CAAC;MAChD,MAAMG,QAAQ,GAAG,IAAIC,GAAG,CAACF,aAAa,EAAEN,QAAQ,CAACS,GAAG,CAAC,CAACC,IAAI;MAE1D,MAAMC,aAAa,GAAG,MAAM,IAAI,CAACjB,KAAK,CAACa,QAAQ,CAAC;MAChD,IAAI,CAACI,aAAa,CAACV,EAAE,EAAE;QACrB,MAAM,IAAIN,KAAK,CACb,+BAA+BgB,aAAa,CAACT,UAAU,EACzD,CAAC;MACH;MAEA,MAAMU,WAAW,GAAG,MAAMD,aAAa,CAACC,WAAW,CAAC,CAAC;MAErD,IAAI,CAAChB,WAAW,GAAG,MAAM,IAAI,CAACH,YAAY,CAACoB,eAAe,CAACD,WAAW,CAAC;MACvEE,OAAO,CAACC,GAAG,CAAC,mCAAmC,CAAC;IAClD,CAAC,CAAC,OAAOC,KAAK,EAAE;MACdF,OAAO,CAACE,KAAK,CAAC,8BAA8B,EAAEA,KAAK,CAAC;MACpD,MAAMA,KAAK,CAAC,CAAC;IACf;EACF;EAEAC,IAAIA,CAACC,SAAiB,EAAE;IACtB,IAAI,CAAC,IAAI,CAACtB,WAAW,IAAI,CAAC,IAAI,CAACC,QAAQ,EAAE;MACvCiB,OAAO,CAACK,IAAI,CAAC,6CAA6C,CAAC;MAC3D;IACF;;IAEA;IACA,IAAI,IAAI,CAAC1B,YAAY,CAAC2B,KAAK,KAAK,WAAW,EAAE;MAC3C,IAAI,CAAC3B,YAAY,CAAC4B,MAAM,CAAC,CAAC;IAC5B;;IAEA;IACA,MAAMC,KAAK,GAAG,IAAI,CAACzB,QAAQ,CAACQ,SAAS,CAACa,SAAS,CAAC;IAChD,IAAI,CAACI,KAAK,EAAE;MACVR,OAAO,CAACK,IAAI,CAAC,UAAUD,SAAS,2BAA2B,CAAC;MAC5D;IACF;;IAEA;IACA,MAAMK,QAAQ,GAAGD,KAAK,CAACE,GAAG,GAAGF,KAAK,CAACG,KAAK;IAExC,IAAIF,QAAQ,IAAI,CAAC,EAAE;MACjBT,OAAO,CAACK,IAAI,CAAC,UAAUD,SAAS,yBAAyB,CAAC;MAC1D;IACF;IAEA,MAAMQ,MAAM,GAAG,IAAI,CAACjC,YAAY,CAACkC,kBAAkB,CAAC,CAAC;IACrDD,MAAM,CAACE,MAAM,GAAG,IAAI,CAAChC,WAAW;IAEhC,MAAMiC,IAAI,GAAG,IAAI,CAACpC,YAAY,CAACqC,UAAU,CAAC,CAAC;IAC3CD,IAAI,CAACA,IAAI,CAACE,cAAc,CAAC,GAAG,EAAE,IAAI,CAACtC,YAAY,CAACuC,WAAW,CAAC;IAE5DN,MAAM,CAACO,OAAO,CAACJ,IAAI,CAAC;IACpBA,IAAI,CAACI,OAAO,CAAC,IAAI,CAACxC,YAAY,CAACyC,WAAW,CAAC;;IAE3C;IACAR,MAAM,CAACD,KAAK,CACV,CAAC;IAAE;IACHH,KAAK,CAACG,KAAK;IAAE;IACbF,QAAQ,CAAC;IACX,CAAC;EACH;EAEAY,WAAWA,CAAA,EAAG;IACZ,OAAO,IAAI,CAACtC,QAAQ;EACtB;EAEAuC,cAAcA,CAAA,EAAG;IACf,OAAO,IAAI,CAACxC,WAAW;EACzB;AACF","ignoreList":[]}
+{"version":3,"names":["AudioSpritePlayer","spriteBufferCache","constructor","audioContext","fetch","platform","AudioContext","Error","audioBuffer","manifest","createBufferSource","name","console","log","_cacheSpriteBuffers","sampleRate","numChannels","numberOfChannels","soundName","spritemap","sound","startFrame","Math","floor","start","endFrame","ceil","end","durationFrames","warn","spriteBuffer","createBuffer","i","sourceData","getChannelData","destinationData","segment","subarray","set","load","json","audio","decodedBuffer","response","ok","statusText","resources","audioFileName","audioUrl","URL","url","href","audioResponse","arrayBuffer","decodeAudioData","error","play","state","resume","catch","e","duration","source","createBufferQueueSource","enqueueBuffer","connect","destination","buffer","getManifest","getAudioBuffer"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMA,iBAAiB,CAAC;EAGJ;;EAGzB;EACQC,iBAAiB,GAAwB,CAAC,CAAC;EAEnDC,WAAWA,CAAC;IACVC,YAAY;IACZC,KAAK;IACLC;EAKF,CAAC,EAAE;IACD,IAAI,CAACF,YAAY,EAAE;MACjB,IAAIE,QAAQ,KAAK,KAAK,EAAE;QACtB;QACA;QACA,IAAI,CAACF,YAAY,GAAG,IAAIG,YAAY,CAAC,CAAC;MACxC,CAAC,MAAM;QACL,MAAM,IAAIC,KAAK,CACb,wEACF,CAAC;MACH;IACF;IACA,IAAI,CAACH,KAAK,EAAE;MACV,MAAM,IAAIG,KAAK,CAAC,0CAA0C,CAAC;IAC7D;IACA,IAAI,CAACJ,YAAY,GAAGA,YAAY;IAChC,IAAI,CAACC,KAAK,GAAGA,KAAK;IAClB,IAAI,CAACI,WAAW,GAAG,IAAI;IACvB,IAAI,CAACC,QAAQ,GAAG,IAAI;IACpB,IAAI,CAACJ,QAAQ,GAAGA,QAAQ,CAAC,CAAC;IAC1B,IACE,IAAI,CAACF,YAAY,EAAEO,kBAAkB,EAAER,WAAW,EAAES,IAAI,KACxD,eAAe,EACf;MACAC,OAAO,CAACC,GAAG,CACT,kEACF,CAAC;MACD;MACA;MACA;MACA,IAAI,CAACV,YAAY,GAAG,IAAIG,YAAY,CAAC,CAAC;IACxC;EACF;;EAEA;AACF;AACA;AACA;EACUQ,mBAAmBA,CAAA,EAAG;IAC5B,IAAI,CAAC,IAAI,CAACN,WAAW,IAAI,CAAC,IAAI,CAACC,QAAQ,IAAI,IAAI,CAACJ,QAAQ,KAAK,KAAK,EAAE;MAClE,OAAO,CAAC;IACV;IAEA,MAAMU,UAAU,GAAG,IAAI,CAACP,WAAW,CAACO,UAAU;IAC9C,MAAMC,WAAW,GAAG,IAAI,CAACR,WAAW,CAACS,gBAAgB;IACrD,IAAI,CAAChB,iBAAiB,GAAG,CAAC,CAAC;IAE3B,KAAK,MAAMiB,SAAS,IAAI,IAAI,CAACT,QAAQ,CAACU,SAAS,EAAE;MAC/C,MAAMC,KAAK,GAAG,IAAI,CAACX,QAAQ,CAACU,SAAS,CAACD,SAAS,CAAC;;MAEhD;MACA,MAAMG,UAAU,GAAGC,IAAI,CAACC,KAAK,CAACH,KAAK,CAACI,KAAK,GAAGT,UAAU,CAAC;MACvD,MAAMU,QAAQ,GAAGH,IAAI,CAACI,IAAI,CAACN,KAAK,CAACO,GAAG,GAAGZ,UAAU,CAAC;MAClD,MAAMa,cAAc,GAAGH,QAAQ,GAAGJ,UAAU;MAE5C,IAAIO,cAAc,IAAI,CAAC,EAAE;QACvBhB,OAAO,CAACiB,IAAI,CACV,WAAWX,SAAS,4CACtB,CAAC;QACD;MACF;;MAEA;MACA,MAAMY,YAAY,GAAG,IAAI,CAAC3B,YAAY,CAAC4B,YAAY,CACjDf,WAAW,EACXY,cAAc,EACdb,UACF,CAAC;;MAED;MACA,KAAK,IAAIiB,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGhB,WAAW,EAAEgB,CAAC,EAAE,EAAE;QACpC,MAAMC,UAAU,GAAG,IAAI,CAACzB,WAAW,CAAC0B,cAAc,CAACF,CAAC,CAAC;QACrD,MAAMG,eAAe,GAAGL,YAAY,CAACI,cAAc,CAACF,CAAC,CAAC;;QAEtD;QACA,MAAMI,OAAO,GAAGH,UAAU,CAACI,QAAQ,CAAChB,UAAU,EAAEI,QAAQ,CAAC;QACzDU,eAAe,CAACG,GAAG,CAACF,OAAO,CAAC;MAC9B;MAEA,IAAI,CAACnC,iBAAiB,CAACiB,SAAS,CAAC,GAAGY,YAAY;MAChD;IACF;EACF;EAEA,MAAMS,IAAIA,CAACC,IAAS,EAAEC,KAAW,EAAE;IACjC,IAAI;MACF,IAAIC,aAAkB;;MAEtB;MACA,IAAI,OAAOF,IAAI,KAAK,QAAQ,EAAE;QAC5B,MAAMG,QAAQ,GAAG,MAAM,IAAI,CAACvC,KAAK,CAACoC,IAAI,CAAC;QACvC,IAAI,CAACG,QAAQ,CAACC,EAAE,EAAE;UAChB,MAAM,IAAIrC,KAAK,CAAC,6BAA6BoC,QAAQ,CAACE,UAAU,EAAE,CAAC;QACrE;QACA,IAAI,CAACpC,QAAQ,GAAG,MAAMkC,QAAQ,CAACH,IAAI,CAAC,CAAC;QAErC,IAAI,CAAC,IAAI,CAAC/B,QAAQ,CAACqC,SAAS,IAAI,CAAC,IAAI,CAACrC,QAAQ,CAACU,SAAS,EAAE;UACxD,MAAM,IAAIZ,KAAK,CACb,0EACF,CAAC;QACH;QAEA,MAAMwC,aAAa,GAAG,IAAI,CAACtC,QAAQ,CAACqC,SAAS,CAAC,CAAC,CAAC;QAChD,MAAME,QAAQ,GAAG,IAAIC,GAAG,CAACF,aAAa,EAAEJ,QAAQ,CAACO,GAAG,CAAC,CAACC,IAAI;QAE1D,MAAMC,aAAa,GAAG,MAAM,IAAI,CAAChD,KAAK,CAAC4C,QAAQ,CAAC;QAChD,IAAI,CAACI,aAAa,CAACR,EAAE,EAAE;UACrB,MAAM,IAAIrC,KAAK,CACb,+BAA+B6C,aAAa,CAACP,UAAU,EACzD,CAAC;QACH;QAEA,MAAMQ,WAAW,GAAG,MAAMD,aAAa,CAACC,WAAW,CAAC,CAAC;QACrDX,aAAa,GAAG,MAAM,IAAI,CAACvC,YAAY,CAACmD,eAAe,CAACD,WAAW,CAAC;MACtE,CAAC,MAAM;QACL,IAAI,CAAC5C,QAAQ,GAAG+B,IAAI;QACpB,IAAI,CAAC,IAAI,CAAC/B,QAAQ,CAACqC,SAAS,IAAI,CAAC,IAAI,CAACrC,QAAQ,CAACU,SAAS,EAAE;UACxD,MAAM,IAAIZ,KAAK,CACb,0EACF,CAAC;QACH;QAEA,IAAI8C,WAAW;QACf,IAAI,OAAOZ,KAAK,KAAK,QAAQ,EAAE;UAC7B,MAAMW,aAAa,GAAG,MAAM,IAAI,CAAChD,KAAK,CAACqC,KAAK,CAAC;UAC7C,IAAI,CAACW,aAAa,CAACR,EAAE,EAAE;YACrB,MAAM,IAAIrC,KAAK,CACb,+BAA+B6C,aAAa,CAACP,UAAU,EACzD,CAAC;UACH;UACAQ,WAAW,GAAG,MAAMD,aAAa,CAACC,WAAW,CAAC,CAAC;QACjD,CAAC,MAAM;UACLA,WAAW,GAAGZ,KAAK;QACrB;QACAC,aAAa,GAAG,MAAM,IAAI,CAACvC,YAAY,CAACmD,eAAe,CAACD,WAAW,CAAC;MACtE;MACA;;MAEA,IAAI,CAAC7C,WAAW,GAAGkC,aAAa;;MAEhC;MACA,IAAI,CAAC5B,mBAAmB,CAAC,CAAC;MAE1BF,OAAO,CAACC,GAAG,CAAC,yCAAyC,CAAC;IACxD,CAAC,CAAC,OAAO0C,KAAK,EAAE;MACd3C,OAAO,CAAC2C,KAAK,CAAC,8BAA8B,EAAEA,KAAK,CAAC;MACpD,MAAMA,KAAK,CAAC,CAAC;IACf;EACF;EAEAC,IAAIA,CAACtC,SAAiB,EAAE;IACtB,IAAI,CAAC,IAAI,CAACV,WAAW,IAAI,CAAC,IAAI,CAACC,QAAQ,EAAE;MACvCG,OAAO,CAACiB,IAAI,CAAC,6CAA6C,CAAC;MAC3D;IACF;;IAEA;IACA,IAAI,IAAI,CAAC1B,YAAY,CAACsD,KAAK,KAAK,WAAW,EAAE;MAC3C,IAAI,CAACtD,YAAY,CAACuD,MAAM,CAAC,CAAC,CAACC,KAAK,CAAEC,CAAM,IAAK;QAC3ChD,OAAO,CAAC2C,KAAK,CAAC,gCAAgC,EAAEK,CAAC,CAAC;MACpD,CAAC,CAAC;IACJ;IAEA,MAAMxC,KAAK,GAAG,IAAI,CAACX,QAAQ,CAACU,SAAS,CAACD,SAAS,CAAC;IAChD,IAAI,CAACE,KAAK,EAAE;MACVR,OAAO,CAACiB,IAAI,CAAC,UAAUX,SAAS,2BAA2B,CAAC;MAC5D;IACF;IAEA,MAAM2C,QAAQ,GAAGzC,KAAK,CAACO,GAAG,GAAGP,KAAK,CAACI,KAAK;IACxC,IAAIqC,QAAQ,IAAI,CAAC,EAAE;MACjBjD,OAAO,CAACiB,IAAI,CAAC,UAAUX,SAAS,yBAAyB,CAAC;MAC1D;IACF;IAEA,IAAI4C,MAAW;;IAEf;IACA,IAAI,IAAI,CAACzD,QAAQ,KAAK,KAAK,EAAE;MAC3B,MAAMyB,YAAY,GAAG,IAAI,CAAC7B,iBAAiB,CAACiB,SAAS,CAAC;MAEtD,IAAI,CAACY,YAAY,EAAE;QACjBlB,OAAO,CAAC2C,KAAK,CACX,iCAAiCrC,SAAS,uBAC5C,CAAC;QACD;MACF;MAEA,IAAI,CAAC,IAAI,CAACf,YAAY,CAAC4D,uBAAuB,EAAE;QAC9CnD,OAAO,CAAC2C,KAAK,CACX,+EACF,CAAC;QACD;MACF;MAEAO,MAAM,GAAG,IAAI,CAAC3D,YAAY,CAAC4D,uBAAuB,CAAC,CAAC;;MAEpD;MACAD,MAAM,CAACE,aAAa,CAAClC,YAAY,CAAC;MAElCgC,MAAM,CAACG,OAAO,CAAC,IAAI,CAAC9D,YAAY,CAAC+D,WAAW,CAAC;;MAE7C;MACAJ,MAAM,CAACtC,KAAK,CAAC,CAAC,CAAC;IACjB,CAAC,MAAM;MACL;MACAsC,MAAM,GAAG,IAAI,CAAC3D,YAAY,CAACO,kBAAkB,CAAC,CAAC;MAE/C,IAAI,CAACoD,MAAM,IAAI,OAAOA,MAAM,CAACG,OAAO,KAAK,UAAU,EAAE;QACnDrD,OAAO,CAAC2C,KAAK,CACX,wFACF,CAAC;QACD;MACF;MAEAO,MAAM,CAACK,MAAM,GAAG,IAAI,CAAC3D,WAAW;MAChCsD,MAAM,CAACG,OAAO,CAAC,IAAI,CAAC9D,YAAY,CAAC+D,WAAW,CAAC;;MAE7C;MACAJ,MAAM,CAACtC,KAAK,CACV,CAAC;MAAE;MACHJ,KAAK,CAACI,KAAK;MAAE;MACbqC,QAAQ,CAAC;MACX,CAAC;IACH;IAEAjD,OAAO,CAACC,GAAG,CAAC,gBAAgBK,SAAS,OAAO,IAAI,CAACb,QAAQ,EAAE,CAAC;EAC9D;EAEA+D,WAAWA,CAAA,EAAG;IACZ,OAAO,IAAI,CAAC3D,QAAQ;EACtB;EAEA4D,cAAcA,CAAA,EAAG;IACf,OAAO,IAAI,CAAC7D,WAAW;EACzB;AACF","ignoreList":[]}

package/lib/typescript/src/index.d.ts

@@ -1,17 +1,26 @@
 /**
  * Universal player for audio sprites generated by the 'audiosprite' tool.
- * It requires an AudioContext and fetch to be injected.
+ * Requires an AudioContext and fetch to be injected.
+ * Uses AudioBufferQueueSourceNode and buffer splitting for mobile stability.
  */
 export declare class AudioSpritePlayer {
-    audioContext: any;
-    fetch: any;
+    audioContext: any | null;
+    fetch: any | null;
     audioBuffer: any | null;
     manifest: any | null;
-    constructor({ audioContext, fetch }: {
-        audioContext: any;
+    platform: string;
+    private spriteBufferCache;
+    constructor({ audioContext, fetch, platform, }: {
+        audioContext: any | null;
         fetch: any;
+        platform: string;
     });
-    load(jsonPath: string): Promise<void>;
+    /**
+     * Caches pre-split AudioBuffers for each sprite, which is necessary
+     * for stable playback on mobile using the BufferQueueSourceNode.
+     */
+    private _cacheSpriteBuffers;
+    load(json: any, audio?: any): Promise<void>;
     play(soundName: string): void;
     getManifest(): any;
     getAudioBuffer(): any;

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,qBAAa,iBAAiB;IAC5B,YAAY,EAAE,GAAG,CAAC;IAClB,KAAK,EAAE,GAAG,CAAC;IACX,WAAW,EAAE,GAAG,GAAG,IAAI,CAAC;IACxB,QAAQ,EAAE,GAAG,GAAG,IAAI,CAAC;gBAET,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE;QAAE,YAAY,EAAE,GAAG,CAAC;QAAC,KAAK,EAAE,GAAG,CAAA;KAAE;IAahE,IAAI,CAAC,QAAQ,EAAE,MAAM;IAoC3B,IAAI,CAAC,SAAS,EAAE,MAAM;IA2CtB,WAAW;IAIX,cAAc;CAGf"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,qBAAa,iBAAiB;IAC5B,YAAY,EAAE,GAAG,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,GAAG,GAAG,IAAI,CAAC;IAClB,WAAW,EAAE,GAAG,GAAG,IAAI,CAAC;IACxB,QAAQ,EAAE,GAAG,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IAEjB,OAAO,CAAC,iBAAiB,CAA2B;gBAExC,EACV,YAAY,EACZ,KAAK,EACL,QAAQ,GACT,EAAE;QACD,YAAY,EAAE,GAAG,GAAG,IAAI,CAAC;QACzB,KAAK,EAAE,GAAG,CAAC;QACX,QAAQ,EAAE,MAAM,CAAC;KAClB;IAkCD;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IA8CrB,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,EAAE,GAAG;IAkEjC,IAAI,CAAC,SAAS,EAAE,MAAM;IA+EtB,WAAW;IAIX,cAAc;CAGf"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-audiosprites",
-  "version": "0.2.0-alpha.0",
+  "version": "0.2.0",
   "description": "audio sprites ",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/index.tsx

@@ -1,16 +1,36 @@
 /**
  * Universal player for audio sprites generated by the 'audiosprite' tool.
- * It requires an AudioContext and fetch to be injected.
+ * Requires an AudioContext and fetch to be injected.
+ * Uses AudioBufferQueueSourceNode and buffer splitting for mobile stability.
  */
 export class AudioSpritePlayer {
-  audioContext: any;
-  fetch: any;
-  audioBuffer: any | null;
+  audioContext: any | null;
+  fetch: any | null;
+  audioBuffer: any | null; // The full audio buffer
   manifest: any | null;
+  platform: string;
+  // Cache for the small, pre-split AudioBuffers used by mobile's QueueSourceNode
+  private spriteBufferCache: Record<string, any> = {};
 
-  constructor({ audioContext, fetch }: { audioContext: any; fetch: any }) {
+  constructor({
+    audioContext,
+    fetch,
+    platform,
+  }: {
+    audioContext: any | null;
+    fetch: any;
+    platform: string;
+  }) {
     if (!audioContext) {
-      throw new Error('An AudioContext instance must be provided.');
+      if (platform === 'web') {
+        // Web doesnt need to provide AudioContext
+        // @ts-ignore
+        this.audioContext = new AudioContext();
+      } else {
+        throw new Error(
+          'An AudioContext instance must be provided from react-native-audio-api.'
+        );
+      }
     }
     if (!fetch) {
       throw new Error('A fetch implementation must be provided.');
@@ -19,38 +39,131 @@ export class AudioSpritePlayer {
     this.fetch = fetch;
     this.audioBuffer = null;
     this.manifest = null;
+    this.platform = platform; // 'web', 'ios', 'android', etc.
+    if (
+      this.audioContext?.createBufferSource?.constructor?.name ===
+      'AsyncFunction'
+    ) {
+      console.log(
+        'createBufferSource is async! going with web default AudioContext'
+      );
+      // Can be removed after this PR gets merged
+      //https://github.com/software-mansion/react-native-audio-api/issues/574
+      // @ts-ignore
+      this.audioContext = new AudioContext();
+    }
   }
 
-  async load(jsonPath: string) {
-    try {
-      const response = await this.fetch(jsonPath);
-      if (!response.ok) {
-        throw new Error(`Failed to fetch manifest: ${response.statusText}`);
-      }
-      this.manifest = await response.json();
+  /**
+   * Caches pre-split AudioBuffers for each sprite, which is necessary
+   * for stable playback on mobile using the BufferQueueSourceNode.
+   */
+  private _cacheSpriteBuffers() {
+    if (!this.audioBuffer || !this.manifest || this.platform === 'web') {
+      return; // Only necessary for mobile platforms
+    }
 
-      if (!this.manifest.resources || !this.manifest.spritemap) {
-        throw new Error(
-          'Invalid audiosprite manifest format. Missing "resources" or "spritemap".'
+    const sampleRate = this.audioBuffer.sampleRate;
+    const numChannels = this.audioBuffer.numberOfChannels;
+    this.spriteBufferCache = {};
+
+    for (const soundName in this.manifest.spritemap) {
+      const sound = this.manifest.spritemap[soundName];
+
+      // Calculate frame indices
+      const startFrame = Math.floor(sound.start * sampleRate);
+      const endFrame = Math.ceil(sound.end * sampleRate);
+      const durationFrames = endFrame - startFrame;
+
+      if (durationFrames <= 0) {
+        console.warn(
+          `Sprite "${soundName}" has zero or negative duration. Skipping.`
         );
+        continue;
       }
 
-      // Find the first supported audio file (e.g., .mp3 or .ogg)
-      // For simplicity, we just take the first one.
-      const audioFileName = this.manifest.resources[0];
-      const audioUrl = new URL(audioFileName, response.url).href;
+      // 1. Create a new empty buffer for the sprite
+      const spriteBuffer = this.audioContext.createBuffer(
+        numChannels,
+        durationFrames,
+        sampleRate
+      );
 
-      const audioResponse = await this.fetch(audioUrl);
-      if (!audioResponse.ok) {
-        throw new Error(
-          `Failed to fetch audio file: ${audioResponse.statusText}`
-        );
+      // 2. Copy data from the full buffer to the new sprite buffer
+      for (let i = 0; i < numChannels; i++) {
+        const sourceData = this.audioBuffer.getChannelData(i);
+        const destinationData = spriteBuffer.getChannelData(i);
+
+        // Extract the segment data (efficient array copy)
+        const segment = sourceData.subarray(startFrame, endFrame);
+        destinationData.set(segment);
       }
 
-      const arrayBuffer = await audioResponse.arrayBuffer();
+      this.spriteBufferCache[soundName] = spriteBuffer;
+      // console.log(`Cached sprite buffer for ${soundName}, frames: ${durationFrames}`);
+    }
+  }
+
+  async load(json: any, audio?: any) {
+    try {
+      let decodedBuffer: any;
+
+      // --- Fetching and Decoding Logic (Uses existing logic) ---
+      if (typeof json === 'string') {
+        const response = await this.fetch(json);
+        if (!response.ok) {
+          throw new Error(`Failed to fetch manifest: ${response.statusText}`);
+        }
+        this.manifest = await response.json();
+
+        if (!this.manifest.resources || !this.manifest.spritemap) {
+          throw new Error(
+            'Invalid audiosprite manifest format. Missing "resources" or "spritemap".'
+          );
+        }
+
+        const audioFileName = this.manifest.resources[0];
+        const audioUrl = new URL(audioFileName, response.url).href;
+
+        const audioResponse = await this.fetch(audioUrl);
+        if (!audioResponse.ok) {
+          throw new Error(
+            `Failed to fetch audio file: ${audioResponse.statusText}`
+          );
+        }
 
-      this.audioBuffer = await this.audioContext.decodeAudioData(arrayBuffer);
-      console.log('Audio sprite loaded successfully.');
+        const arrayBuffer = await audioResponse.arrayBuffer();
+        decodedBuffer = await this.audioContext.decodeAudioData(arrayBuffer);
+      } else {
+        this.manifest = json;
+        if (!this.manifest.resources || !this.manifest.spritemap) {
+          throw new Error(
+            'Invalid audiosprite manifest format. Missing "resources" or "spritemap".'
+          );
+        }
+
+        let arrayBuffer;
+        if (typeof audio === 'string') {
+          const audioResponse = await this.fetch(audio);
+          if (!audioResponse.ok) {
+            throw new Error(
+              `Failed to fetch audio file: ${audioResponse.statusText}`
+            );
+          }
+          arrayBuffer = await audioResponse.arrayBuffer();
+        } else {
+          arrayBuffer = audio;
+        }
+        decodedBuffer = await this.audioContext.decodeAudioData(arrayBuffer);
+      }
+      // --- End Fetching and Decoding Logic ---
+
+      this.audioBuffer = decodedBuffer;
+
+      // 🚨 CRITICAL: Split and cache buffers for mobile stability/correctness
+      this._cacheSpriteBuffers();
+
+      console.log('RNAS: Audio sprite loaded successfully.');
     } catch (error) {
       console.error('Failed to load audio sprite:', error);
       throw error; // Re-throw for user to catch
@@ -63,41 +176,77 @@ export class AudioSpritePlayer {
       return;
     }
 
-    // Resume context if it was suspended (e.g., by browser policy)
+    // Resume context if it was suspended (must be non-blocking here)
     if (this.audioContext.state === 'suspended') {
-      this.audioContext.resume();
+      this.audioContext.resume().catch((e: any) => {
+        console.error('Failed to resume AudioContext:', e);
+      });
     }
 
-    // Get the sound from the 'spritemap'
     const sound = this.manifest.spritemap[soundName];
     if (!sound) {
       console.warn(`Sound "${soundName}" not found in spritemap.`);
       return;
     }
 
-    // Calculate duration from start/end times
     const duration = sound.end - sound.start;
-
     if (duration <= 0) {
       console.warn(`Sound "${soundName}" has invalid duration.`);
       return;
     }
 
-    const source = this.audioContext.createBufferSource();
-    source.buffer = this.audioBuffer;
+    let source: any;
 
-    const gain = this.audioContext.createGain();
-    gain.gain.setValueAtTime(1.0, this.audioContext.currentTime);
+    // 🚨 MOBILE LOGIC: Use AudioBufferQueueSourceNode with cached split buffer
+    if (this.platform !== 'web') {
+      const spriteBuffer = this.spriteBufferCache[soundName];
 
-    source.connect(gain);
-    gain.connect(this.audioContext.destination);
+      if (!spriteBuffer) {
+        console.error(
+          `RNAS Error: Split buffer for "${soundName}" not found in cache.`
+        );
+        return;
+      }
+
+      if (!this.audioContext.createBufferQueueSource) {
+        console.error(
+          'RNAS Error: createBufferQueueSource is not available on this native platform.'
+        );
+        return;
+      }
+
+      source = this.audioContext.createBufferQueueSource();
+
+      // Mobile Implementation: Enqueue the specific, short sprite buffer
+      source.enqueueBuffer(spriteBuffer);
+
+      source.connect(this.audioContext.destination);
+
+      // This will play the short buffer from its start to its end.
+      source.start(1);
+    } else {
+      // 🌐 WEB LOGIC (Standard Web Audio API)
+      source = this.audioContext.createBufferSource();
+
+      if (!source || typeof source.connect !== 'function') {
+        console.error(
+          'RNAS Error: createBufferSource() returned an invalid object on web. Aborting playback.'
+        );
+        return;
+      }
+
+      source.buffer = this.audioBuffer;
+      source.connect(this.audioContext.destination);
+
+      // Use the 'audiosprite' format: start(when, offset, duration)
+      source.start(
+        0, // Start playing now
+        sound.start, // The offset
+        duration // The calculated duration
+      );
+    }
 
-    // Use the 'audiosprite' format: start(when, offset, duration)
-    source.start(
-      0, // Start playing now
-      sound.start, // The offset
-      duration // The calculated duration
-    );
+    console.log(`RNAS: played ${soundName} on ${this.platform}`);
   }
 
   getManifest() {