Audio Playground
A full-featured cross-platform audio application showcasing the capabilities of my @siteed/expo-audio-studio library with real-time audio processing, visualization, and analysis.
Why?
I built this application to demonstrate the full potential of my audio processing libraries and to provide a real-world example of how they can be used. It also serves as a testing ground for new features and a reference implementation for developers using my libraries.
Now available on iOS and Android:
Preview
Audio Playground running on web, iOS, and Android platforms.
Key Features
- Live Audio Recording: Record audio with real-time waveform visualization
- On-device Speech Transcription: Convert recorded audio to text using advanced speech recognition
- Feature Extraction Demo: Extract and visualize audio features like MFCC, chromagram, and spectral data
- Background Recording: Keep recording while app is in background with rich notification controls
- Mel Spectrogram Visualization: Visual representation of audio frequency content for analysis
- Audio Trimming Demo: Interactive interface for precision audio editing
- Cross-Platform: Fully functional on iOS, Android, and web with the same codebase
Tech Stack
- React Native & Expo: Core framework for cross-platform development
- @siteed/expo-audio-studio: My library for audio processing and analysis
- @siteed/expo-audio-ui: My UI component library for audio applications
- React Native Reanimated: For smooth animations and interactions
- React Native Skia: For high-performance graphics rendering
UI Components Showcase
The playground demonstrates all the components from my @siteed/expo-audio-ui package:
- AudioVisualizer: Customizable component for visualizing audio waveforms
- DecibelGauge & DecibelMeter: Components for displaying audio levels
- RecordButton: Animated button for audio recording with visual feedback
- Waveform: Lightweight component for rendering audio waveforms
- AudioTimeRangeSelector: Component for selecting time ranges within audio files
Tech Challenges
Building a cross-platform audio application with this level of functionality wasn't easy:
- Optimizing performance for real-time audio visualization on mobile devices
- Creating a consistent UI/UX across web, iOS, and Android
- Implementing complex audio processing algorithms that work efficiently on all platforms
- Designing an intuitive interface for complex audio operations
- Ensuring smooth animations and interactions while processing audio in real-time
- Supporting background audio recording with notification controls
Current Status
Audio Playground is now publicly available on the App Store and Google Play Store. It's also available as a web application that you can try right now.
This open-source app serves as a reference implementation for developers building audio applications with React Native and Expo, demonstrating real-world usage of my audio libraries.
Development
The project uses a streamlined development workflow with three environments (Development, Preview, and Production), and is built using EAS (Expo Application Services). Full setup instructions and documentation are available in the GitHub repository.