react-native-audiosprites 0.2.0-alpha.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2025 qalqi
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,121 @@
+# react-native-audiosprites
+
+A universal player for audio sprites generated by the 'audiosprite' tool.
+
+## Installation
+
+```sh
+npm install 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:
+
+```sh
+audiosprite --output audiosprite --format howler --path ./src/__tests__/ Sound_1.m4a Sound_2.m4a Sound_3.m4a Sound_4.m4a
+```
+
+This command will generate `audiosprite.json`, `audiosprite.mp3`, `audiosprite.ogg`, `audiosprite.m4a`, and `audiosprite.ac3` in the `src/__tests__/` directory. The `--path` argument is important as it tells the player where to find the audio files relative to the JSON manifest.
+
+Then, you can use the `AudioSpritePlayer` to play the sounds from the sprite.
+
+### Browser Environment
+
+```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),
+});
+
+async function playSound(soundName: string) {
+  try {
+    // Load the audio sprite manifest and audio files
+    // Adjust the path to your audiosprite.json file
+    await player.load('./src/__tests__/audiosprite.json');
+    console.log('Audio sprite loaded successfully.');
+
+    // Play a sound from the spritemap
+    player.play(soundName);
+    console.log(`Playing sound: ${soundName}`);
+  } catch (error) {
+    console.error('Error playing sound:', error);
+  }
+}
+
+// Example usage:
+playSound('Sound_1');
+// playSound('Sound_2');
+```
+
+### 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.
+
+First, install `react-native-audio-api`:
+
+```sh
+npm install react-native-audio-api
+# or
+yarn add react-native-audio-api
+```
+
+Then, you can use it like this:
+
+```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
+});
+
+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.');
+
+    // 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);
+  }
+}
+
+// Example usage:
+playRNSound('Sound_1');
+// playRNSound('Sound_2');
+```
+
+## Contributing
+
+- [Development workflow](CONTRIBUTING.md#development-workflow)
+- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
+- [Code of conduct](CODE_OF_CONDUCT.md)
+
+## License
+
+MIT
+
+---
+
+Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

package/lib/module/index.js

@@ -0,0 +1,96 @@
+"use strict";
+
+/**
+ * Universal player for audio sprites generated by the 'audiosprite' tool.
+ * It requires an AudioContext and fetch to be injected.
+ */
+export class AudioSpritePlayer {
+  constructor({
+    audioContext,
+    fetch
+  }) {
+    if (!audioContext) {
+      throw new Error('An AudioContext instance must be provided.');
+    }
+    if (!fetch) {
+      throw new Error('A fetch implementation must be provided.');
+    }
+    this.audioContext = audioContext;
+    this.fetch = fetch;
+    this.audioBuffer = null;
+    this.manifest = null;
+  }
+  async load(jsonPath) {
+    try {
+      const response = await this.fetch(jsonPath);
+      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".');
+      }
+
+      // 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}`);
+      }
+      const arrayBuffer = await audioResponse.arrayBuffer();
+      this.audioBuffer = await this.audioContext.decodeAudioData(arrayBuffer);
+      console.log('Audio sprite loaded successfully.');
+    } catch (error) {
+      console.error('Failed to load audio sprite:', error);
+      throw error; // Re-throw for user to catch
+    }
+  }
+  play(soundName) {
+    if (!this.audioBuffer || !this.manifest) {
+      console.warn('Audio sprite not loaded. Call load() first.');
+      return;
+    }
+
+    // Resume context if it was suspended (e.g., by browser policy)
+    if (this.audioContext.state === 'suspended') {
+      this.audioContext.resume();
+    }
+
+    // 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);
+
+    // Use the 'audiosprite' format: start(when, offset, duration)
+    source.start(0,
+    // Start playing now
+    sound.start,
+    // The offset
+    duration // The calculated duration
+    );
+  }
+  getManifest() {
+    return this.manifest;
+  }
+  getAudioBuffer() {
+    return this.audioBuffer;
+  }
+}
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +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":"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","ignoreList":[]}

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/package.json

@@ -0,0 +1 @@
+{"type":"module"}

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

@@ -0,0 +1,19 @@
+/**
+ * Universal player for audio sprites generated by the 'audiosprite' tool.
+ * It requires an AudioContext and fetch to be injected.
+ */
+export declare class AudioSpritePlayer {
+    audioContext: any;
+    fetch: any;
+    audioBuffer: any | null;
+    manifest: any | null;
+    constructor({ audioContext, fetch }: {
+        audioContext: any;
+        fetch: any;
+    });
+    load(jsonPath: string): Promise<void>;
+    play(soundName: string): void;
+    getManifest(): any;
+    getAudioBuffer(): any;
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/package.json

@@ -0,0 +1,156 @@
+{
+  "name": "react-native-audiosprites",
+  "version": "0.2.0-alpha.0",
+  "description": "audio sprites ",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "test": "jest",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "release:alpha": "release-it --preRelease=alpha",
+    "release": "release-it --only-version",
+    "example": "yarn workspace react-native-audiosprites-example"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/qalqi/react-native-audiosprites.git"
+  },
+  "author": "qalqi <qalqi@qalqi.com> (https://github.com/qalqi)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/qalqi/react-native-audiosprites/issues"
+  },
+  "homepage": "https://github.com/qalqi/react-native-audiosprites#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@evilmartians/lefthook": "^1.12.3",
+    "@react-native/babel-preset": "0.81.1",
+    "@react-native/eslint-config": "^0.81.1",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.1.12",
+    "commitlint": "^19.8.1",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "jest": "^29.7.0",
+    "prettier": "^3.6.2",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-audio-api": "^0.9.3",
+    "react-native-builder-bob": "^0.40.13",
+    "release-it": "^19.0.4",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@3.6.1",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "create-react-native-library": {
+    "languages": "js",
+    "type": "library",
+    "version": "0.54.8"
+  }
+}

package/src/index.tsx

@@ -0,0 +1,110 @@
+/**
+ * Universal player for audio sprites generated by the 'audiosprite' tool.
+ * It requires an AudioContext and fetch to be injected.
+ */
+export class AudioSpritePlayer {
+  audioContext: any;
+  fetch: any;
+  audioBuffer: any | null;
+  manifest: any | null;
+
+  constructor({ audioContext, fetch }: { audioContext: any; fetch: any }) {
+    if (!audioContext) {
+      throw new Error('An AudioContext instance must be provided.');
+    }
+    if (!fetch) {
+      throw new Error('A fetch implementation must be provided.');
+    }
+    this.audioContext = audioContext;
+    this.fetch = fetch;
+    this.audioBuffer = null;
+    this.manifest = null;
+  }
+
+  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();
+
+      if (!this.manifest.resources || !this.manifest.spritemap) {
+        throw new Error(
+          'Invalid audiosprite manifest format. Missing "resources" or "spritemap".'
+        );
+      }
+
+      // 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}`
+        );
+      }
+
+      const arrayBuffer = await audioResponse.arrayBuffer();
+
+      this.audioBuffer = await this.audioContext.decodeAudioData(arrayBuffer);
+      console.log('Audio sprite loaded successfully.');
+    } catch (error) {
+      console.error('Failed to load audio sprite:', error);
+      throw error; // Re-throw for user to catch
+    }
+  }
+
+  play(soundName: string) {
+    if (!this.audioBuffer || !this.manifest) {
+      console.warn('Audio sprite not loaded. Call load() first.');
+      return;
+    }
+
+    // Resume context if it was suspended (e.g., by browser policy)
+    if (this.audioContext.state === 'suspended') {
+      this.audioContext.resume();
+    }
+
+    // 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);
+
+    // Use the 'audiosprite' format: start(when, offset, duration)
+    source.start(
+      0, // Start playing now
+      sound.start, // The offset
+      duration // The calculated duration
+    );
+  }
+
+  getManifest() {
+    return this.manifest;
+  }
+
+  getAudioBuffer() {
+    return this.audioBuffer;
+  }
+}