DOCSEARCHbyAlgolia
Submit Docs

react-native-audiowaveform

repository·master·Indexed 42 days ago

https://github.com/juananime/react-native-audiowaveform

A React Native component for audio waveform visualization and sound renderization. Version 2.0.5 provides the WaveForm component to render audio files from local sources or URIs, featuring built-in playback controls (play, pause, stop, autoplay), progress scrubbing, and customizable styling for waveform and scrubber colors.

Tokens
1.6K
Snippets
7
Records
8
Agent score
5%

What's inside react-native-audiowaveform

  1. Manual installation for Android

    master

    Follow these steps to manually configure Android:

    1. Update MainActivity.java:

      • Add import com.otomogroove.OGReactNativeWaveform.OGWavePackage; to the imports.
      • Add new OGWavePackage() to the list returned by the getPackages() method.

    2. Update settings.gradle: Append these lines to android/settings.gradle:

      include ':react-native-audiowaveform'
project(':react-native-audiowaveform').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-audiowaveform/android')

    3. Update app/build.gradle: Insert this line inside the dependencies block in android/app/build.gradle:

      compile project(':react-native-audiowaveform')
    include ':react-native-audiowaveform'
project(':react-native-audiowwaveform').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-audiowaveform/android')

  2. Manual installation for iOS

    master

    If automatic linking fails, follow these steps in Xcode:

    1. In the project navigator, right-click Libraries ➜ Add Files to [your project's name].
    2. Navigate to node_modules/react-native-audiowaveform and add OGReactNativeWaveform.xcodeproj.
    3. Select your project in the navigator, go to Build Phases ➜ Link Binary With Libraries, and add libOGReactNativeWaveform.a to the list.
    4. Run your project (Cmd+R).

  4. Configure WaveForm styling

    master

    Use the waveFormStyle prop to customize the visual appearance of the waveform and the scrubber.

    • waveColor: Sets the color of the waveform.
    • scrubColor: Sets the color of the scrubber.
    <WaveForm 
    source={require('./audio.mp3')} 
    waveFormStyle={{waveColor:'red', scrubColor:'white'}} 
/>

  5. Use the WaveForm component

    master

    The WaveForm component renders an image view of audio waveform data. It supports local files (via require) and remote files (via uri).

    Basic Usage with Local File

    import WaveForm from 'react-native-audiowaveform';

<WaveForm 
    source={require('./path/to/your/file.mp3')}  
    waveFormStyle={{waveColor:'red', scrubColor:'white'}}
/>

    Usage with Remote File

    import WaveForm from 'react-native-audiowaveform';

<WaveForm source={{uri:'https://url/path/to/the/file.mp3'}} />

  6. Control audio playback with WaveForm props

    master

    You can control the playback state of the audio using the following props:

    • autoPlay: (boolean) If true, the audio starts playing automatically on both iOS and Android.
    • play: (boolean) Switching this between true and false will play or pause the audio.
    • stop: (boolean) Switching this to true will stop and reset the audio.
    • onPress: (function) A callback triggered when the waveform is touched. This works on both iOS and Android.

    Example: Playback and Interaction

    <WaveForm 
    source={{uri:'https://url/path/to/the/file.mp3'}}
    autoPlay={true}
    play={true}
    stop={this.state.stopAudio}
    onPress={(sender) => this.myMethodOnPress()} 
/>

  7. Configure WaveForm styling via waveFormStyle

    master

    The waveFormStyle prop allows you to customize the colors of the waveform and the scrubber. The component uses processColor to ensure the colors are compatible with the native layer.

    Expected keys:

    • waveColor: Sets the color of the waveform bars.
    • scrubColor: Sets the color of the playback scrubber.

    Example configuration:

    waveFormStyle={{
  waveColor: 'blue',
  scrubColor: 'red'
}}
    waveFormStyle={{
  waveColor: processColor(this.props.waveFormStyle.waveColor),
  ogScrubColor: processColor(this.props.waveFormStyle.scrubColor)
}}

  8. Use the WaveForm component

    master

    The WaveForm component is the primary interface for displaying audio waveforms in React Native. It wraps a native component (OGWave) and provides props to configure the visual style and handle user interactions.

    Key Props

    • source: An object defining the audio source. It must include a uri (via resolveAssetSource) and can include type, mainVer, and patchVer.
    • waveFormStyle: An object used to style the waveform. It accepts:
      • waveColor: The color of the waveform bars.
      • scrubColor: The color of the playback progress indicator (scrubber).
    • onPress: A callback function triggered when the waveform is pressed. The event object contains a componentID to ensure the event belongs to the specific instance.
    • onFinishPlay: A callback function triggered when the audio finishes playing. The event object contains a componentID to ensure the event belongs to the specific instance.
    import WaveForm from 'react-native-audiowaveform';

// Example usage
<WaveForm
  source={{ uri: 'https://example.com/audio.mp3' }}
  waveFormStyle={{
    waveColor: '#ff0000',
    scrubColor: '#00ff00'
  }}
  onPress={(event) => console.log('Pressed:', event)}
  onFinishPlay={(event) => console.log('Finished:', event)}
/>