react-native-audiosprites

v0.4.1

Published

17 days ago

audio sprites for react native ios, android and web

react-native-audiosprites_poster

react-native-audiosprites

A universal player for audio sprites generated by the 'audiosprite' tool. Supports playing multiple sounds at same time!

Installation

npm install react-native-audiosprites

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:

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:

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

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:

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

module.exports = wrapWithAudioAPIMetroConfig(config);

Then, you can use it in your component:

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<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.');
    }
  };

  const stopBGM = () => {
    const player = playerRef.current;
    if (player) {
      player.stop();
    }
  };

  return (
    <View style={styles.container}>
      <Text>AudioSprite Player Example</Text>
      <TouchableOpacity
        onPress={() => loadPlayer()}
        style={styles.button}
        disabled={!isLoaded}
      >
        <Text style={styles.buttonText}>Load Player</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() => playSound('Sound_1')}
        style={styles.button}
        disabled={!isLoaded}
      >
        <Text style={styles.buttonText}>Play Sound 1</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() => playSound('Sound_2')}
        style={styles.button}
        disabled={!isLoaded}
      >
        <Text style={styles.buttonText}>Play Sound 2</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() => playSound('bg_loop')}
        style={styles.button}
        disabled={!isLoaded}
      >
        <Text style={styles.buttonText}>Play Background Loop</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={stopBGM}
        style={styles.button}
        disabled={!isLoaded}
      >
        <Text style={styles.buttonText}>Stop BGM</Text>
      </TouchableOpacity>
    </View>
  );
}

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

License

MIT

Credits

Shaker, Woda, Conga, Bongo, Templeblock.wav by kwazi | License: Attribution 3.0

Made with create-react-native-library

Translations

Spanish

react-native-audiosprites_poster

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

npm install react-native-audiosprites

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 instalado globalmente:

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:

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

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:

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

module.exports = wrapWithAudioAPIMetroConfig(config);

Luego, puedes usarlo en tu componente:

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<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('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 (
    <View style={styles.container}>
      <Text>Ejemplo de AudioSprite Player</Text>
      <TouchableOpacity
        onPress={() => loadPlayer()}
        style={styles.button}
        disabled={!isLoaded}
      >
        <Text style={styles.buttonText}>Cargar Reproductor</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() => playSound('Sound_1')}
        style={styles.button}
        disabled={!isLoaded}
      >
        <Text style={styles.buttonText}>Reproducir Sonido 1</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() => playSound('Sound_2')}
        style={styles.button}
        disabled={!isLoaded}
      >
        <Text style={styles.buttonText}>Reproducir Sonido 2</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() => playSound('bg_loop')}
        style={styles.button}
        disabled={!isLoaded}
      >
        <Text style={styles.buttonText}>Reproducir Bucle de Fondo</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={stopBGM}
        style={styles.button}
        disabled={!isLoaded}
      >
        <Text style={styles.buttonText}>Detener BGM</Text>
      </TouchableOpacity>
    </View>
  );
}

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

Licencia

MIT

Créditos

Shaker, Woda, Conga, Bongo, Templeblock.wav por kwazi | Licencia: Atribución 3.0

Hecho con create-react-native-library

Russian

react-native-audiosprites_poster

react-native-audiosprites

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

Установка

npm install react-native-audiosprites

yarn add react-native-audiosprites

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

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

Предполагая, что у вас глобально установлен audiosprite:

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, вы должны использовать следующую команду:

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 для воспроизведения звуков из спрайта.

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

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 для обработки воспроизведения аудио и загрузки ресурсов.

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

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

module.exports = wrapWithAudioAPIMetroConfig(config);

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

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<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('Не удалось получить 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 (
    <View style={styles.container}>
      <Text>Пример AudioSprite Player</Text>
      <TouchableOpacity
        onPress={() => loadPlayer()}
        style={styles.button}
        disabled={!isLoaded}
      >
        <Text style={styles.buttonText}>Загрузить проигрыватель</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() => playSound('Sound_1')}
        style={styles.button}
        disabled={!isLoaded}
      >
        <Text style={styles.buttonText}>Воспроизвести звук 1</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() => playSound('Sound_2')}
        style={styles.button}
        disabled={!isLoaded}
      >
        <Text style={styles.buttonText}>Воспроизвести звук 2</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() => playSound('bg_loop')}
        style={styles.button}
        disabled={!isLoaded}
      >
        <Text style={styles.buttonText}>Воспроизвести фоновый цикл</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={stopBGM}
        style={styles.button}
        disabled={!isLoaded}
      >
        <Text style={styles.buttonText}>Остановить фоновую музыку</Text>
      </TouchableOpacity>
    </View>
  );
}

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)] }, });

Участие

Лицензия

MIT

Кредиты

Shaker, Woda, Conga, Bongo, Templeblock.wav от kwazi | Лицензия: Attribution 3.0

Сделано с помощью create-react-native-library

Hindi

react-native-audiosprites_poster

react-native-audiosprites

'ऑडियोस्प्राइट' टूल द्वारा उत्पन्न ऑडियो स्प्राइट्स के लिए एक सार्वभौमिक खिलाड़ी। एक ही समय में कई ध्वनियाँ बजाने का समर्थन करता है!

स्थापना

npm install react-native-audiosprites

yarn add react-native-audiosprites

उपयोग

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

मान लें कि आपके पास विश्व स्तर पर audiosprite स्थापित है:

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 ध्वनि को लूप करने के लिए, आप निम्न कमांड का उपयोग करेंगे:

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 का उपयोग कर सकते हैं।

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

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 की आवश्यकता होगी।

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

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

module.exports = wrapWithAudioAPIMetroConfig(config);

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

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<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('ऑडियो 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 (
    <View style={styles.container}>
      <Text>ऑडियोस्प्राइट प्लेयर उदाहरण</Text>
      <TouchableOpacity
        onPress={() => loadPlayer()}
        style={styles.button}
        disabled={!isLoaded}
      >
        <Text style={styles.buttonText}>खिलाड़ी लोड करें</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() => playSound('Sound_1')}
        style={styles.button}
        disabled={!isLoaded}
      >
        <Text style={styles.buttonText}>ध्वनि 1 चलाएं</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() => playSound('Sound_2')}
        style={styles.button}
        disabled={!isLoaded}
      >
        <Text style={styles.buttonText}>ध्वनि 2 चलाएं</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() => playSound('bg_loop')}
        style={styles.button}
        disabled={!isLoaded}
      >
        <Text style={styles.buttonText}>पृष्ठभूमि लूप चलाएं</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={stopBGM}
        style={styles.button}
        disabled={!isLoaded}
      >
        <Text style={styles.buttonText}>बीजीएम रोकें</Text>
      </TouchableOpacity>
    </View>
  );
}

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)] }, }); के साथ भी काम करता है।

योगदान

लाइसेंस

एमआईटी

क्रेडिट

kwazi द्वारा शकर, वोडा, कोंगा, बोंगो, टेम्पलब्लॉक.wav | लाइसेंस: एट्रिब्यूशन 3.0

create-react-native-library के साथ बनाया गया

Chinese

react-native-audiosprites_poster

react-native-audiosprites

一个用于播放由“audiosprite”工具生成的音频精灵的通用播放器。支持同时播放多种声音！

安装

npm install react-native-audiosprites

yarn add react-native-audiosprites

用法

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

假设您已全局安装 audiosprite：

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 声音，您将使用以下命令：

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 播放精灵中的声音。

浏览器环境

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 来处理音频播放和资产加载。

首先，安装依赖项：

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

module.exports = wrapWithAudioAPIMetroConfig(config);

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

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<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('无法获取音频 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 (
    <View style={styles.container}>
      <Text>AudioSprite 播放器示例</Text>
      <TouchableOpacity
        onPress={() => loadPlayer()}
        style={styles.button}
        disabled={!isLoaded}
      >
        <Text style={styles.buttonText}>加载播放器</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() => playSound('Sound_1')}
        style={styles.button}
        disabled={!isLoaded}
      >
        <Text style={styles.buttonText}>播放声音 1</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() => playSound('Sound_2')}
        style={styles.button}
        disabled={!isLoaded}
      >
        <Text style={styles.buttonText}>播放声音 2</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() => playSound('bg_loop')}
        style={styles.button}
        disabled={!isLoaded}
      >
        <Text style={styles.buttonText}>播放背景循环</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={stopBGM}
        style={styles.button}
        disabled={!isLoaded}
      >
        <Text style={styles.buttonText}>停止背景音乐</Text>
      </TouchableOpacity>
    </View>
  );
}

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)] }, });

贡献

执照

麻省理工学院

学分

Shaker, Woda, Conga, Bongo, Templeblock.wav by kwazi | 执照: 署名 3.0

使用 create-react-native-library 制作

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

react-native-audiosprites

Installation

Usage

Looping Sounds

Browser Environment

React Native Environment

Inspiration

Contributing

License

Credits

Translations

Spanish

react-native-audiosprites

Instalación

Uso

Sonidos en Bucle

Entorno del Navegador

Entorno de React Native

Inspiración

Contribuciones

Licencia

Créditos

Russian

react-native-audiosprites

Установка

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

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

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

Среда React Native

Вдохновение

Участие

Лицензия

Кредиты

Hindi

react-native-audiosprites

स्थापना

उपयोग

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

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

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

प्रेरणा

योगदान

लाइसेंस

क्रेडिट

Chinese

react-native-audiosprites

安装

用法

循环声音

浏览器环境

React Native 环境

灵感

贡献

执照

学分