{"library":"react-native-audio-api","title":"React Native Web Audio API","description":"react-native-audio-api is a high-performance audio engine for React Native that implements a significant portion of the Web Audio API specification, allowing developers to create and manipulate audio graphs in a cross-platform manner (iOS, Android, and Web). The library enables advanced audio functionalities such as sound synthesis, real-time effects processing using various audio nodes (e.g., OscillatorNode, GainNode, BiquadFilterNode), microphone input, audio recording to files, HLS streaming, and audio visualization. Currently at version 0.11.7, it receives frequent patch updates addressing bugs and adding minor features, demonstrating active development. Its core differentiator is the adherence to the Web Audio API, offering a familiar interface for web developers moving to React Native for complex audio tasks, unlike simpler audio playback libraries.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-audio-api"],"cli":null},"imports":["import { AudioContext } from 'react-native-audio-api';","import { AudioContext, OscillatorNode, GainNode } from 'react-native-audio-api';","import { AudioManager } from 'react-native-audio-api';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useEffect, useState } from 'react';\nimport { View, Button, Text, Alert } from 'react-native';\nimport { AudioContext, OscillatorNode, GainNode, AudioDestinationNode, AudioManager } from 'react-native-audio-api';\nimport { requestMultiple, PERMISSIONS, RESULTS } from 'react-native-permissions';\n\nconst AudioPlayer = () => {\n  const [context, setContext] = useState<AudioContext | null>(null);\n  const [oscillator, setOscillator] = useState<OscillatorNode | null>(null);\n  const [isPlaying, setIsPlaying] = useState(false);\n\n  const requestPermissions = async () => {\n    const results = await requestMultiple([PERMISSIONS.IOS.MICROPHONE, PERMISSIONS.ANDROID.RECORD_AUDIO]);\n    if (results[PERMISSIONS.IOS.MICROPHONE] === RESULTS.GRANTED || results[PERMISSIONS.ANDROID.RECORD_AUDIO] === RESULTS.GRANTED) {\n      console.log('Microphone permission granted');\n    } else {\n      Alert.alert('Permission Denied', 'Microphone permission is required for some audio features.');\n    }\n  };\n\n  useEffect(() => {\n    requestPermissions();\n\n    const initAudio = async () => {\n      try {\n        const newContext = new AudioContext();\n        await newContext.start();\n\n        const newOscillator = new OscillatorNode(newContext);\n        newOscillator.frequency.value = 440; // A4 note\n        newOscillator.type = 'sine';\n\n        const gainNode = new GainNode(newContext);\n        gainNode.gain.value = 0.5;\n\n        const destination = new AudioDestinationNode(newContext);\n\n        newOscillator.connect(gainNode);\n        gainNode.connect(destination);\n\n        setContext(newContext);\n        setOscillator(newOscillator);\n      } catch (error) {\n        console.error('Failed to initialize audio context:', error);\n      }\n    };\n\n    initAudio();\n\n    return () => {\n      context?.close();\n    };\n  }, []);\n\n  const togglePlayback = async () => {\n    if (!context || !oscillator) return;\n\n    if (isPlaying) {\n      oscillator.stop();\n      setIsPlaying(false);\n    } else {\n      // Oscillators can only be started once, so create a new one each time\n      const newOscillator = new OscillatorNode(context);\n      newOscillator.frequency.value = 440;\n      newOscillator.type = 'sine';\n      \n      const gainNode = new GainNode(context);\n      gainNode.gain.value = 0.5;\n      const destination = new AudioDestinationNode(context);\n\n      newOscillator.connect(gainNode);\n      gainNode.connect(destination);\n      newOscillator.start();\n      setOscillator(newOscillator);\n      setIsPlaying(true);\n    }\n  };\n\n  if (!context) {\n    return (\n      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>\n        <Text>Loading Audio Engine...</Text>\n      </View>\n    );\n  }\n\n  return (\n    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>\n      <Text style={{ fontSize: 24, marginBottom: 20 }}>Simple Sine Wave Generator</Text>\n      <Button title={isPlaying ? 'Stop Sine Wave' : 'Start Sine Wave'} onPress={togglePlayback} />\n      <Button title=\"Request Permissions\" onPress={requestPermissions} />\n    </View>\n  );\n};\n\nexport default AudioPlayer;\n","lang":"typescript","description":"This quickstart code initializes an `AudioContext` and creates a simple audio graph to generate and play a 440 Hz sine wave, demonstrating basic sound synthesis and control. It also includes an example of requesting necessary microphone permissions using `react-native-permissions` for more advanced use cases like recording.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}