UI Components

The @siteed/audio-ui package provides ready-to-use UI components for audio applications. These components are built with React Native, Reanimated, and Skia for optimal performance across platforms.

Installation

yarn add @siteed/audio-ui

Make sure you have the required peer dependencies installed:

yarn add @shopify/react-native-skia react-native-gesture-handler react-native-reanimated

Available Components

The package currently includes the following components:

AudioVisualizer

A powerful component for visualizing audio waveforms with extensive customization options. Features include:

• Waveform visualization with customizable appearance
• Interactive navigation and selection
• Support for both static and live audio data
• Amplitude scaling options (normalized, absolute, or human voice range)
• Optional decibel visualization
• Customizable themes

DecibelGauge

A gauge component for displaying audio levels in decibels with various formatting options:

• Support for different decibel formats (dBFS, dB SPL, dBA, dBC)
• Customizable appearance with themes
• Optional tick marks, value display, and needle
• Configurable min/max ranges

DecibelMeter

A linear meter component for displaying audio levels in decibels:

• Visual representation of audio levels in a linear format
• Customizable appearance and thresholds
• Real-time level display

RecordButton

A button component specifically designed for audio recording:

• Visual feedback for recording state
• Animated transitions between states
• Customizable appearance

Waveform

A lightweight component for rendering audio waveforms:

• Efficient rendering of audio amplitude data
• Customizable styling options
• Support for different visualization modes

AudioTimeRangeSelector

A component for selecting a time range within an audio file:

• Interactive handles for adjusting start and end points
• Visual representation of the selected range
• Support for time-based navigation

Usage Example: AudioVisualizer

Here's a simple example of using the AudioVisualizer component:

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { AudioVisualizer } from '@siteed/audio-ui';
import { extractAudioAnalysis } from '@siteed/audio-studio';

const AudioWaveform = ({ audioUri }) => {
  const [audioData, setAudioData] = React.useState(null);
  
  React.useEffect(() => {
    async function loadAudioData() {
      if (audioUri) {
        const analysis = await extractAudioAnalysis({
          fileUri: audioUri,
          features: { rms: true }
        });
        setAudioData(analysis);
      }
    }
    
    loadAudioData();
  }, [audioUri]);
  
  if (!audioData) {
    return <View style={styles.container} />;
  }
  
  return (
    <View style={styles.container}>
      <AudioVisualizer
        audioData={audioData}
        canvasHeight={150}
        candleWidth={3}
        candleSpace={1}
        showRuler={true}
        showNavigation={true}
        amplitudeScaling="normalized"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    height: 150,
    width: '100%',
  },
});

export default AudioWaveform;

Usage Example: DecibelGauge

Here's how to use the DecibelGauge component:

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { DecibelGauge } from '@siteed/audio-ui';

const AudioLevelMeter = ({ level }) => {
  return (
    <View style={styles.container}>
      <DecibelGauge
        db={level}
        inputFormat="dBFS"
        showTickMarks={true}
        showValue={true}
        theme={{
          minDb: -60,
          maxDb: 0,
          colors: {
            needle: '#FF3B30',
            progress: '#007AFF',
            high: '#FF9500'
          }
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
});

export default AudioLevelMeter;

Storybook

The package includes a Storybook with examples of all components. You can run it locally:

cd packages/audio-ui
yarn storybook

Or view it online at https://deeeed.github.io/audiolab/expo-audio-ui-storybook.

Contributing

Contributions to the UI components package are welcome! Please see the contributing guidelines for more information.