https://github.com/qalqi/react-native-audiosprites

React Native player for audio sprites generated by the 'audiosprite' tool. Supports ios, android and web
https://github.com/qalqi/react-native-audiosprites

android audiosprite expo games ios react-native

Last synced: 8 months ago
JSON representation

React Native player for audio sprites generated by the 'audiosprite' tool. Supports ios, android and web

• Host: GitHub
• URL: https://github.com/qalqi/react-native-audiosprites
• Owner: qalqi
• License: mit
• Created: 2025-11-05T09:35:58.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2025-11-22T10:03:17.000Z (8 months ago)
• Last Synced: 2025-11-22T11:24:49.157Z (8 months ago)
• Topics: android, audiosprite, expo, games, ios, react-native
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-native-audiosprites
• Size: 10.8 MB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
![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

```sh

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`](https://www.npmjs.com/package/audiosprite) installed globally:

```sh

audiosprite --output src/__tests__/sounds/mygameaudio --format howler --loop "bg_loop" src/__tests__/sounds/bg_loop.wav src/__tests__/sounds/Sound_1.m4a src/__tests__/sounds/Sound_2.m4a src/__tests__/sounds/Sound_3.m4a src/__tests__/sounds/Sound_4.m4a

```

This command will generate `mygameaudio.json`, `mygameaudio.mp3`, `mygameaudio.ogg`, `mygameaudio.m4a`, and `mygameaudio.ac3` in the `src/__tests__/sounds/` directory.

### Looping Sounds

You can create looping sounds by using the `--loop` option with the `audiosprite` command. The value of the `--loop` option should be the name of the sound you want to loop.

For example, to loop the `bg_music` sound, you would use the following command:

```sh

audiosprite --output audiosprite --format howler --loop "bg_music" --path ./src/__tests__/ Sound_1.m4a Sound_2.m4a Sound_3.m4a Sound_4.m4a bg_music.wav

```

When you play a looping sound, it will play continuously until you stop it using the `player.stop()` method. The looping functionality is supported on both web and mobile platforms.

Then, you can use the `AudioSpritePlayer` to play the sounds from the sprite.

### Browser Environment

```typescript

import { AudioSpritePlayer } from 'react-native-audiosprites';

const player = new AudioSpritePlayer({

  platform: 'web',

});

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__/sounds/mygameaudio.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);

  }

}

function stopSound() {

  player.stop();

  console.log('Stopped looping sound.');

}

// Example usage:

playSound('Sound_1');

// playSound('Sound_2');

// To stop a looping sound:

// stopSound();

```

### React Native Environment

For React Native, you'll need `react-native-audio-api` and `expo-asset` to handle audio playback and asset loading.

First, install the dependencies:

```sh

npm install react-native-audio-api expo-asset expo-file-system

# or

yarn add react-native-audio-api expo-asset expo-file-system

```

Change `metro.config.js` as per `react-native-audio-api` documentation: https://docs.swmansion.com/react-native-audio-api/docs/fundamentals/getting-started

```js

module.exports = wrapWithAudioAPIMetroConfig(config);

```

Then, you can use it in your component:

```typescript

import { StyleSheet, View, Text, Platform, TouchableOpacity } 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/mygameaudio.json';

// Import the audio asset

const audioAsset = require('../assets/mygameaudio.mp3');

export default function App() {

  const [isLoaded, setIsLoaded] = useState(false);

  const playerRef = useRef(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.');

    }

  };

  const stopBGM = () => {

    const player = playerRef.current;

    if (player) {

      player.stop();

    }

  };

  return (

    

      AudioSprite Player Example

       loadPlayer()}

        style={styles.button}

        disabled={!isLoaded}

      >

        Load Player

      

       playSound('Sound_1')}

        style={styles.button}

        disabled={!isLoaded}

      >

        Play Sound 1

      

       playSound('Sound_2')}

        style={styles.button}

        disabled={!isLoaded}

      >

        Play Sound 2

      

       playSound('bg_loop')}

        style={styles.button}

        disabled={!isLoaded}

      >

        Play Background Loop

      

      

        Stop BGM

      

    

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    alignItems: 'center',

    justifyContent: 'center',

  },

  button: {

    backgroundColor: '#DDDDDD',

    padding: 10,

    marginVertical: 5,

    borderRadius: 5,

  },

  buttonText: {

    color: '#000000',

    textAlign: 'center',

  },

});

```

## Inspiration

https://github.com/goldfire/howler.js

Generated json also works with new Howl({

sprite: {

key1: [offset, duration, (loop)]

},

});

## 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

## Credits

[Shaker, Woda, Conga, Bongo, Templeblock.wav](https://freesound.org/people/kwazi/sounds/34115/) by [kwazi](https://freesound.org/people/kwazi/) | License: [Attribution 3.0](http://creativecommons.org/licenses/by/3.0/)

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

---

# Translations

## Spanish

![react-native-audiosprites_poster](react-native-audiosprites_poster.jpg)

# react-native-audiosprites

Un reproductor universal para sprites de audio generados por la herramienta 'audiosprite'.

¡Soporta la reproducción de múltiples sonidos al mismo tiempo!

## Instalación

```sh

npm install react-native-audiosprites

```

```sh

yarn add react-native-audiosprites

```

## Uso

Primero, necesitas generar un sprite de audio y un archivo de manifiesto JSON usando la herramienta `audiosprite`.

Asumiendo que tienes [`audiosprite`](https://www.npmjs.com/package/audiosprite) instalado globalmente:

```sh

audiosprite --output src/__tests__/sounds/mygameaudio --format howler --loop "bg_loop" src/__tests__/sounds/bg_loop.wav src/__tests__/sounds/Sound_1.m4a src/__tests__/sounds/Sound_2.m4a src/__tests__/sounds/Sound_3.m4a src/__tests__/sounds/Sound_4.m4a

```

Este comando generará `mygameaudio.json`, `mygameaudio.mp3`, `mygameaudio.ogg`, `mygameaudio.m4a` y `mygameaudio.ac3` en el directorio `src/__tests__/sounds/`.

### Sonidos en Bucle

Puedes crear sonidos en bucle usando la opción `--loop` con el comando `audiosprite`. El valor de la opción `--loop` debe ser el nombre del sonido que deseas repetir.

Por ejemplo, para repetir el sonido `bg_music`, usarías el siguiente comando:

```sh

audiosprite --output audiosprite --format howler --loop "bg_music" --path ./src/__tests__/ Sound_1.m4a Sound_2.m4a Sound_3.m4a Sound_4.m4a bg_music.wav

```

Cuando reproduces un sonido en bucle, se reproducirá continuamente hasta que lo detengas usando el método `player.stop()`. La funcionalidad de bucle es compatible tanto en plataformas web como móviles.

Luego, puedes usar el `AudioSpritePlayer` para reproducir los sonidos del sprite.

### Entorno del Navegador

```typescript

import { AudioSpritePlayer } from 'react-native-audiosprites';

const player = new AudioSpritePlayer({

  platform: 'web',

});

async function playSound(soundName: string) {

  try {

    // Carga el manifiesto del sprite de audio y los archivos de audio

    // Ajusta la ruta a tu archivo audiosprite.json

    await player.load('./src/__tests__/sounds/mygameaudio.json');

    console.log('Sprite de audio cargado exitosamente.');

    // Reproduce un sonido del spritemap

    player.play(soundName);

    console.log(`Reproduciendo sonido: ${soundName}`);

  } catch (error) {

    console.error('Error al reproducir el sonido:', error);

  }

}

function stopSound() {

  player.stop();

  console.log('Sonido en bucle detenido.');

}

// Ejemplo de uso:

playSound('Sound_1');

// playSound('Sound_2');

// Para detener un sonido en bucle:

// stopSound();

```

### Entorno de React Native

Para React Native, necesitarás `react-native-audio-api` y `expo-asset` para manejar la reproducción de audio y la carga de activos.

Primero, instala las dependencias:

```sh

npm install react-native-audio-api expo-asset expo-file-system

# o

yarn add react-native-audio-api expo-asset expo-file-system

```

Cambia `metro.config.js` según la documentación de `react-native-audio-api`: https://docs.swmansion.com/react-native-audio-api/docs/fundamentals/getting-started

```js

module.exports = wrapWithAudioAPIMetroConfig(config);

```

Luego, puedes usarlo en tu componente:

```typescript

import { StyleSheet, View, Text, Platform, TouchableOpacity } 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/mygameaudio.json';

// Importa el activo de audio

const audioAsset = require('../assets/mygameaudio.mp3');

export default function App() {

  const [isLoaded, setIsLoaded] = useState(false);

  const playerRef = useRef(null);

  useEffect(() => {

    const loadPlayer = async () => {

      const asset = Asset.fromModule(audioAsset);

      await asset.downloadAsync();

      const audioUri = asset.localUri || asset.uri;

      if (!audioUri) {

        console.error('No se pudo obtener la URI del audio.');

        return;

      }

      if (Platform.OS === 'ios') {

        try {

          await AudioManager.setAudioSessionOptions({

            iosCategory: 'playback',

            iosOptions: ['mixWithOthers'],

          });

          await AudioManager.setAudioSessionActivity(true);

        } catch (e) {

          console.error('Error al configurar las opciones de AudioSession:', 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('Sprite de audio cargado exitosamente.');

      } catch (error) {

        console.error('Error al cargar el sprite de audio:', error);

      }

    };

    loadPlayer();

  }, []);

  const playSound = (soundName: string) => {

    const player = playerRef.current;

    if (player && isLoaded) {

      player.play(soundName);

      console.log(`Reproduciendo sonido: ${soundName}`);

    } else {

      console.warn('El reproductor aún no se ha cargado.');

    }

  };

  const stopBGM = () => {

    const player = playerRef.current;

    if (player) {

      player.stop();

    }

  };

  return (

    

      Ejemplo de AudioSprite Player

       loadPlayer()}

        style={styles.button}

        disabled={!isLoaded}

      >

        Cargar Reproductor

      

       playSound('Sound_1')}

        style={styles.button}

        disabled={!isLoaded}

      >

        Reproducir Sonido 1

      

       playSound('Sound_2')}

        style={styles.button}

        disabled={!isLoaded}

      >

        Reproducir Sonido 2

      

       playSound('bg_loop')}

        style={styles.button}

        disabled={!isLoaded}

      >

        Reproducir Bucle de Fondo

      

      

        Detener BGM

      

    

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    alignItems: 'center',

    justifyContent: 'center',

  },

  button: {

    backgroundColor: '#DDDDDD',

    padding: 10,

    marginVertical: 5,

    borderRadius: 5,

  },

  buttonText: {

    color: '#000000',

    textAlign: 'center',

  },

});

```

## Inspiración

https://github.com/goldfire/howler.js

El json generado también funciona con new Howl({

sprite: {

key1: [offset, duration, (loop)]

},

});

## Contribuciones

- [Flujo de trabajo de desarrollo](CONTRIBUTING.md#development-workflow)

- [Enviar una pull request](CONTRIBUTING.md#sending-a-pull-request)

- [Código de conducta](CODE_OF_CONDUCT.md)

## Licencia

MIT

## Créditos

[Shaker, Woda, Conga, Bongo, Templeblock.wav](https://freesound.org/people/kwazi/sounds/34115/) por [kwazi](https://freesound.org/people/kwazi/) | Licencia: [Atribución 3.0](http://creativecommons.org/licenses/by/3.0/)

Hecho con [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

## Russian

![react-native-audiosprites_poster](react-native-audiosprites_poster.jpg)

# react-native-audiosprites

Универсальный проигрыватель для аудио-спрайтов, созданных с помощью инструмента 'audiosprite'.

Поддерживает одновременное воспроизведение нескольких звуков!

## Установка

```sh

npm install react-native-audiosprites

```

```sh

yarn add react-native-audiosprites

```

## Использование

Сначала вам нужно создать аудио-спрайт и файл манифеста JSON с помощью инструмента `audiosprite`.

Предполагая, что у вас глобально установлен [`audiosprite`](https://www.npmjs.com/package/audiosprite):

```sh

audiosprite --output src/__tests__/sounds/mygameaudio --format howler --loop "bg_loop" src/__tests__/sounds/bg_loop.wav src/__tests__/sounds/Sound_1.m4a src/__tests__/sounds/Sound_2.m4a src/__tests__/sounds/Sound_3.m4a src/__tests__/sounds/Sound_4.m4a

```

Эта команда создаст `mygameaudio.json`, `mygameaudio.mp3`, `mygameaudio.ogg`, `mygameaudio.m4a` и `mygameaudio.ac3` в каталоге `src/__tests__/sounds/`.

### Зацикленные звуки

Вы можете создавать зацикленные звуки, используя опцию `--loop` с командой `audiosprite`. Значением опции `--loop` должно быть имя звука, который вы хотите зациклить.

Например, чтобы зациклить звук `bg_music`, вы должны использовать следующую команду:

```sh

audiosprite --output audiosprite --format howler --loop "bg_music" --path ./src/__tests__/ Sound_1.m4a Sound_2.m4a Sound_3.m4a Sound_4.m4a bg_music.wav

```

Когда вы воспроизводите зацикленный звук, он будет воспроизводиться непрерывно, пока вы не остановите его с помощью метода `player.stop()`. Функция зацикливания поддерживается как на веб-, так и на мобильных платформах.

Затем вы можете использовать `AudioSpritePlayer` для воспроизведения звуков из спрайта.

### Среда браузера

```typescript

import { AudioSpritePlayer } from 'react-native-audiosprites';

const player = new AudioSpritePlayer({

  platform: 'web',

});

async function playSound(soundName: string) {

  try {

    // Загрузите манифест аудио-спрайта и аудиофайлы

    // Укажите правильный путь к вашему файлу audiosprite.json

    await player.load('./src/__tests__/sounds/mygameaudio.json');

    console.log('Аудио-спрайт успешно загружен.');

    // Воспроизведите звук из spritemap

    player.play(soundName);

    console.log(`Воспроизведение звука: ${soundName}`);

  } catch (error) {

    console.error('Ошибка воспроизведения звука:', error);

  }

}

function stopSound() {

  player.stop();

  console.log('Зацикленный звук остановлен.');

}

// Пример использования:

playSound('Sound_1');

// playSound('Sound_2');

// Чтобы остановить зацикленный звук:

// stopSound();

```

### Среда React Native

Для React Native вам понадобятся `react-native-audio-api` и `expo-asset` для обработки воспроизведения аудио и загрузки ресурсов.

Сначала установите зависимости:

```sh

npm install react-native-audio-api expo-asset expo-file-system

# или

yarn add react-native-audio-api expo-asset expo-file-system

```

Измените `metro.config.js` в соответствии с документацией `react-native-audio-api`: https://docs.swmansion.com/react-native-audio-api/docs/fundamentals/getting-started

```js

module.exports = wrapWithAudioAPIMetroConfig(config);

```

Затем вы можете использовать его в своем компоненте:

```typescript

import { StyleSheet, View, Text, Platform, TouchableOpacity } 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/mygameaudio.json';

// Импортируйте аудио-ресурс

const audioAsset = require('../assets/mygameaudio.mp3');

export default function App() {

  const [isLoaded, setIsLoaded] = useState(false);

  const playerRef = useRef(null);

  useEffect(() => {

    const loadPlayer = async () => {

      const asset = Asset.fromModule(audioAsset);

      await asset.downloadAsync();

      const audioUri = asset.localUri || asset.uri;

      if (!audioUri) {

        console.error('Не удалось получить URI аудио.');

        return;

      }

      if (Platform.OS === 'ios') {

        try {

          await AudioManager.setAudioSessionOptions({

            iosCategory: 'playback',

            iosOptions: ['mixWithOthers'],

          });

          await AudioManager.setAudioSessionActivity(true);

        } catch (e) {

          console.error('Не удалось настроить параметры AudioSession:', 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('Аудио-спрайт успешно загружен.');

      } catch (error) {

        console.error('Не удалось загрузить аудио-спрайт:', error);

      }

    };

    loadPlayer();

  }, []);

  const playSound = (soundName: string) => {

    const player = playerRef.current;

    if (player && isLoaded) {

      player.play(soundName);

      console.log(`Воспроизведение звука: ${soundName}`);

    } else {

      console.warn('Проигрыватель еще не загружен.');

    }

  };

  const stopBGM = () => {

    const player = playerRef.current;

    if (player) {

      player.stop();

    }

  };

  return (

    

      Пример AudioSprite Player

       loadPlayer()}

        style={styles.button}

        disabled={!isLoaded}

      >

        Загрузить проигрыватель

      

       playSound('Sound_1')}

        style={styles.button}

        disabled={!isLoaded}

      >

        Воспроизвести звук 1

      

       playSound('Sound_2')}

        style={styles.button}

        disabled={!isLoaded}

      >

        Воспроизвести звук 2

      

       playSound('bg_loop')}

        style={styles.button}

        disabled={!isLoaded}

      >

        Воспроизвести фоновый цикл

      

      

        Остановить фоновую музыку

      

    

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    alignItems: 'center',

    justifyContent: 'center',

  },

  button: {

    backgroundColor: '#DDDDDD',

    padding: 10,

    marginVertical: 5,

    borderRadius: 5,

  },

  buttonText: {

    color: '#000000',

    textAlign: 'center',

  },

});

```

## Вдохновение

https://github.com/goldfire/howler.js

Сгенерированный json также работает с new Howl({

sprite: {

key1: [offset, duration, (loop)]

},

});

## Участие

- [Рабочий процесс разработки](CONTRIBUTING.md#development-workflow)

- [Отправка pull request](CONTRIBUTING.md#sending-a-pull-request)

- [Кодекс поведения](CODE_OF_CONDUCT.md)

## Лицензия

MIT

## Кредиты

[Shaker, Woda, Conga, Bongo, Templeblock.wav](https://freesound.org/people/kwazi/sounds/34115/) от [kwazi](https://freesound.org/people/kwazi/) | Лицензия: [Attribution 3.0](http://creativecommons.org/licenses/by/3.0/)

Сделано с помощью [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

## Hindi

![react-native-audiosprites_poster](react-native-audiosprites_poster.jpg)

# react-native-audiosprites

'ऑडियोस्प्राइट' टूल द्वारा उत्पन्न ऑडियो स्प्राइट्स के लिए एक सार्वभौमिक खिलाड़ी।

एक ही समय में कई ध्वनियाँ बजाने का समर्थन करता है!

## स्थापना

```sh

npm install react-native-audiosprites

```

```sh

yarn add react-native-audiosprites

```

## उपयोग

सबसे पहले, आपको `audiosprite` टूल का उपयोग करके एक ऑडियो स्प्राइट और एक JSON मैनिफ़ेस्ट फ़ाइल उत्पन्न करने की आवश्यकता है।

मान लें कि आपके पास विश्व स्तर पर [`audiosprite`](https://www.npmjs.com/package/audiosprite) स्थापित है:

```sh

audiosprite --output src/__tests__/sounds/mygameaudio --format howler --loop "bg_loop" src/__tests__/sounds/bg_loop.wav src/__tests__/sounds/Sound_1.m4a src/__tests__/sounds/Sound_2.m4a src/__tests__/sounds/Sound_3.m4a src/__tests__/sounds/Sound_4.m4a

```

यह कमांड `src/__tests__/sounds/` डायरेक्टरी में `mygameaudio.json`, `mygameaudio.mp3`, `mygameaudio.ogg`, `mygameaudio.m4a`, और `mygameaudio.ac3` उत्पन्न करेगा।

### लूपिंग ध्वनियाँ

आप `audiosprite` कमांड के साथ `--loop` विकल्प का उपयोग करके लूपिंग ध्वनियाँ बना सकते हैं। `--loop` विकल्प का मान उस ध्वनि का नाम होना चाहिए जिसे आप लूप करना चाहते हैं।

उदाहरण के लिए, `bg_music` ध्वनि को लूप करने के लिए, आप निम्न कमांड का उपयोग करेंगे:

```sh

audiosprite --output audiosprite --format howler --loop "bg_music" --path ./src/__tests__/ Sound_1.m4a Sound_2.m4a Sound_3.m4a Sound_4.m4a bg_music.wav

```

जब आप एक लूपिंग ध्वनि बजाते हैं, तो यह तब तक लगातार बजेगी जब तक आप इसे `player.stop()` विधि का उपयोग करके रोक नहीं देते। लूपिंग कार्यक्षमता वेब और मोबाइल दोनों प्लेटफार्मों पर समर्थित है।

फिर, आप स्प्राइट से ध्वनियों को चलाने के लिए `AudioSpritePlayer` का उपयोग कर सकते हैं।

### ब्राउज़र पर्यावरण

```typescript

import { AudioSpritePlayer } from 'react-native-audiosprites';

const player = new AudioSpritePlayer({

  platform: 'web',

});

async function playSound(soundName: string) {

  try {

    // ऑडियो स्प्राइट मैनिफ़ेस्ट और ऑडियो फ़ाइलें लोड करें

    // अपनी audiosprite.json फ़ाइल का पथ समायोजित करें

    await player.load('./src/__tests__/sounds/mygameaudio.json');

    console.log('ऑडियो स्प्राइट सफलतापूर्वक लोड हो गया।');

    // स्प्राइटमैप से एक ध्वनि चलाएं

    player.play(soundName);

    console.log(`ध्वनि बज रही है: ${soundName}`);

  } catch (error) {

    console.error('ध्वनि बजाने में त्रुटि:', error);

  }

}

function stopSound() {

  player.stop();

  console.log('लूपिंग ध्वनि बंद हो गई।');

}

// उदाहरण उपयोग:

playSound('Sound_1');

// playSound('Sound_2');

// एक लूपिंग ध्वनि को रोकने के लिए:

// stopSound();

```

### रिएक्ट नेटिव पर्यावरण

रिएक्ट नेटिव के लिए, आपको ऑडियो प्लेबैक और एसेट लोडिंग को संभालने के लिए `react-native-audio-api` और `expo-asset` की आवश्यकता होगी।

सबसे पहले, निर्भरताएँ स्थापित करें:

```sh

npm install react-native-audio-api expo-asset expo-file-system

# या

yarn add react-native-audio-api expo-asset expo-file-system

```

`react-native-audio-api` दस्तावेज़ीकरण के अनुसार `metro.config.js` बदलें: https://docs.swmansion.com/react-native-audio-api/docs/fundamentals/getting-started

```js

module.exports = wrapWithAudioAPIMetroConfig(config);

```

फिर, आप इसे अपने घटक में उपयोग कर सकते हैं:

```typescript

import { StyleSheet, View, Text, Platform, TouchableOpacity } 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/mygameaudio.json';

// ऑडियो एसेट आयात करें

const audioAsset = require('../assets/mygameaudio.mp3');

export default function App() {

  const [isLoaded, setIsLoaded] = useState(false);

  const playerRef = useRef(null);

  useEffect(() => {

    const loadPlayer = async () => {

      const asset = Asset.fromModule(audioAsset);

      await asset.downloadAsync();

      const audioUri = asset.localUri || asset.uri;

      if (!audioUri) {

        console.error('ऑडियो URI प्राप्त करने में विफल।');

        return;

      }

      if (Platform.OS === 'ios') {

        try {

          await AudioManager.setAudioSessionOptions({

            iosCategory: 'playback',

            iosOptions: ['mixWithOthers'],

          });

          await AudioManager.setAudioSessionActivity(true);

        } catch (e) {

          console.error('ऑडियो सत्र विकल्प कॉन्फ़िगर करने में विफल:', 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('ऑडियो स्प्राइट सफलतापूर्वक लोड हो गया।');

      } catch (error) {

        console.error('ऑडियो स्प्राइट लोड करने में विफल:', error);

      }

    };

    loadPlayer();

  }, []);

  const playSound = (soundName: string) => {

    const player = playerRef.current;

    if (player && isLoaded) {

      player.play(soundName);

      console.log(`ध्वनि बज रही है: ${soundName}`);

    } else {

      console.warn('खिलाड़ी अभी तक लोड नहीं हुआ है।');

    }

  };

  const stopBGM = () => {

    const player = playerRef.current;

    if (player) {

      player.stop();

    }

  };

  return (

    

      ऑडियोस्प्राइट प्लेयर उदाहरण

       loadPlayer()}

        style={styles.button}

        disabled={!isLoaded}

      >

        खिलाड़ी लोड करें

      

       playSound('Sound_1')}

        style={styles.button}

        disabled={!isLoaded}

      >

        ध्वनि 1 चलाएं

      

       playSound('Sound_2')}

        style={styles.button}

        disabled={!isLoaded}

      >

        ध्वनि 2 चलाएं

      

       playSound('bg_loop')}

        style={styles.button}

        disabled={!isLoaded}

      >

        पृष्ठभूमि लूप चलाएं

      

      

        बीजीएम रोकें

      

    

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    alignItems: 'center',

    justifyContent: 'center',

  },

  button: {

    backgroundColor: '#DDDDDD',

    padding: 10,

    marginVertical: 5,

    borderRadius: 5,

  },

  buttonText: {

    color: '#000000',

    textAlign: 'center',

  },

});

```

## प्रेरणा

https://github.com/goldfire/howler.js

उत्पन्न json new Howl({

sprite: {

key1: [offset, duration, (loop)]

},

}); के साथ भी काम करता है।

## योगदान

- [विकास कार्यप्रवाह](CONTRIBUTING.md#development-workflow)

- [एक पुल अनुरोध भेजना](CONTRIBUTING.md#sending-a-pull-request)

- [आचार संहिता](CODE_OF_CONDUCT.md)

## लाइसेंस

एमआईटी

## क्रेडिट

[kwazi](https://freesound.org/people/kwazi/) द्वारा [शकर, वोडा, कोंगा, बोंगो, टेम्पलब्लॉक.wav](https://freesound.org/people/kwazi/sounds/34115/) | लाइसेंस: [एट्रिब्यूशन 3.0](http://creativecommons.org/licenses/by/3.0/)

[create-react-native-library](https://github.com/callstack/react-native-builder-bob) के साथ बनाया गया

## Chinese

![react-native-audiosprites_poster](react-native-audiosprites_poster.jpg)

# react-native-audiosprites

一个用于播放由“audiosprite”工具生成的音频精灵的通用播放器。

支持同时播放多种声音！

## 安装

```sh

npm install react-native-audiosprites

```

```sh

yarn add react-native-audiosprites

```

## 用法

首先，您需要使用 `audiosprite` 工具生成一个音频精灵和一个 JSON 清单文件。

假设您已全局安装 [`audiosprite`](https://www.npmjs.com/package/audiosprite)：

```sh

audiosprite --output src/__tests__/sounds/mygameaudio --format howler --loop "bg_loop" src/__tests__/sounds/bg_loop.wav src/__tests__/sounds/Sound_1.m4a src/__tests__/sounds/Sound_2.m4a src/__tests__/sounds/Sound_3.m4a src/__tests__/sounds/Sound_4.m4a

```

此命令将在 `src/__tests__/sounds/` 目录中生成 `mygameaudio.json`、`mygameaudio.mp3`、`mygameaudio.ogg`、`mygameaudio.m4a` 和 `mygameaudio.ac3`。

### 循环声音

您可以使用 `audiosprite` 命令的 `--loop` 选项创建循环声音。`--loop` 选项的值应该是您想要循环的声音的名称。

例如，要循环 `bg_music` 声音，您将使用以下命令：

```sh

audiosprite --output audiosprite --format howler --loop "bg_music" --path ./src/__tests__/ Sound_1.m4a Sound_2.m4a Sound_3.m4a Sound_4.m4a bg_music.wav

```

当您播放循环声音时，它将连续播放，直到您使用 `player.stop()` 方法停止它。循环功能在 Web 和移动平台上都受支持。

然后，您可以使用 `AudioSpritePlayer` 播放精灵中的声音。

### 浏览器环境

```typescript

import { AudioSpritePlayer } from 'react-native-audiosprites';

const player = new AudioSpritePlayer({

  platform: 'web',

});

async function playSound(soundName: string) {

  try {

    // 加载音频精灵清单和音频文件

    // 调整到您的 audiosprite.json 文件的路径

    await player.load('./src/__tests__/sounds/mygameaudio.json');

    console.log('音频精灵已成功加载。');

    // 从 spritemap 播放声音

    player.play(soundName);

    console.log(`正在播放声音: ${soundName}`);

  } catch (error) {

    console.error('播放声音时出错:', error);

  }

}

function stopSound() {

  player.stop();

  console.log('已停止循环声音。');

}

// 用法示例:

playSound('Sound_1');

// playSound('Sound_2');

// 停止循环声音:

// stopSound();

```

### React Native 环境

对于 React Native，您需要 `react-native-audio-api` 和 `expo-asset` 来处理音频播放和资产加载。

首先，安装依赖项：

```sh

npm install react-native-audio-api expo-asset expo-file-system

# 或

yarn add react-native-audio-api expo-asset expo-file-system

```

根据 `react-native-audio-api` 文档更改 `metro.config.js`：https://docs.swmansion.com/react-native-audio-api/docs/fundamentals/getting-started

```js

module.exports = wrapWithAudioAPIMetroConfig(config);

```

然后，您可以在您的组件中使用它：

```typescript

import { StyleSheet, View, Text, Platform, TouchableOpacity } 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/mygameaudio.json';

// 导入音频资产

const audioAsset = require('../assets/mygameaudio.mp3');

export default function App() {

  const [isLoaded, setIsLoaded] = useState(false);

  const playerRef = useRef(null);

  useEffect(() => {

    const loadPlayer = async () => {

      const asset = Asset.fromModule(audioAsset);

      await asset.downloadAsync();

      const audioUri = asset.localUri || asset.uri;

      if (!audioUri) {

        console.error('无法获取音频 URI。');

        return;

      }

      if (Platform.OS === 'ios') {

        try {

          await AudioManager.setAudioSessionOptions({

            iosCategory: 'playback',

            iosOptions: ['mixWithOthers'],

          });

          await AudioManager.setAudioSessionActivity(true);

        } catch (e) {

          console.error('配置 AudioSession 选项失败:', 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('音频精灵已成功加载。');

      } catch (error) {

        console.error('加载音频精灵失败:', error);

      }

    };

    loadPlayer();

  }, []);

  const playSound = (soundName: string) => {

    const player = playerRef.current;

    if (player && isLoaded) {

      player.play(soundName);

      console.log(`正在播放声音: ${soundName}`);

    } else {

      console.warn('播放器尚未加载。');

    }

  };

  const stopBGM = () => {

    const player = playerRef.current;

    if (player) {

      player.stop();

    }

  };

  return (

    

      AudioSprite 播放器示例

       loadPlayer()}

        style={styles.button}

        disabled={!isLoaded}

      >

        加载播放器

      

       playSound('Sound_1')}

        style={styles.button}

        disabled={!isLoaded}

      >

        播放声音 1

      

       playSound('Sound_2')}

        style={styles.button}

        disabled={!isLoaded}

      >

        播放声音 2

      

       playSound('bg_loop')}

        style={styles.button}

        disabled={!isLoaded}

      >

        播放背景循环

      

      

        停止背景音乐

      

    

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    alignItems: 'center',

    justifyContent: 'center',

  },

  button: {

    backgroundColor: '#DDDDDD',

    padding: 10,

    marginVertical: 5,

    borderRadius: 5,

  },

  buttonText: {

    color: '#000000',

    textAlign: 'center',

  },

});

```

## 灵感

https://github.com/goldfire/howler.js

生成的 json 也适用于 new Howl({

sprite: {

key1: [offset, duration, (loop)]

},

});

## 贡献

- [开发工作流程](CONTRIBUTING.md#development-workflow)

- [发送拉取请求](CONTRIBUTING.md#sending-a-pull-request)

- [行为准则](CODE_OF_CONDUCT.md)

## 执照

麻省理工学院

## 学分

[Shaker, Woda, Conga, Bongo, Templeblock.wav](https://freesound.org/people/kwazi/sounds/34115/) by [kwazi](https://freesound.org/people/kwazi/) | 执照: [署名 3.0](http://creativecommons.org/licenses/by/3.0/)

使用 [create-react-native-library](https://github.com/callstack/react-native-builder-bob) 制作