Modern, accessible audio interface components for React applications
Documentation | Components | GitHub
AudioUI is a comprehensive library of React components specifically designed for audio applications, digital audio workstations (DAWs), synthesizers, and music production tools. It provides professionally crafted UI elements with modern design principles and full accessibility support.
# npm
npm install audioui
# yarn
yarn add audioui
# pnpm
pnpm add audiouiAudioUI is compatible with React 18+ and works with frameworks like Next.js, Vite, and Create React App.
AudioUI is a comprehensive library of React components specifically designed for audio applications, digital audio workstations (DAWs), synthesizers, and other music production tools. It provides professionally crafted UI elements common in music software with modern design principles and full accessibility support.
- 🎛️ Professional Audio Controls: Knobs, faders, XY pads, and other audio-specific UI components
- 🎹 MIDI Integration: Built-in MIDI support for components like drum pads and keyboards
- 📱 Responsive: Fully responsive components that work across desktop and mobile devices
- ♿ Accessible: ARIA-compliant components with keyboard navigation and screen reader support
- 🎨 Customizable: Easily themeable to match your application's design system
- ⚡ Optimized: High-performance components with minimal re-renders for low-latency audio applications
- 🔌 Framework Agnostic: Works with any React-based project, including Next.js, Remix, and more
- 🎚️ JUCE Integration: Ready-to-use starter template for integrating with JUCE 8's WebView feature
import { ADSREnvelope, Dial, MIDIPad, PitchBend } from 'audioui';
function MySynthUI() {
return (
<div className="synth-container">
<Dial
value={75}
min={0}
max={100}
onChange={(value) => console.log('Dial value:', value)}
/>
<ADSREnvelope
attack={0.1}
decay={0.3}
sustain={0.5}
release={1.0}
onValueChange={(values) => console.log('ADSR values:', values)}
/>
<PitchBend
onChange={(value) => console.log('Pitch bend:', value)}
/>
<MIDIPad
note={60}
onTrigger={(note, velocity) => console.log('Note on:', note, velocity)}
onRelease={(note) => console.log('Note off:', note)}
/>
</div>
);
}| Component | Description | Documentation |
|---|---|---|
| Dial/Knob | Rotary control for parameters | View docs |
| Knob Specular | Photorealistic knob with specular highlights | View docs |
| Slider - Ethereal | Linear control with ethereal visual style | View docs |
| XY Pad | Two-dimensional control surface | View docs |
| ADSR Envelope | Attack, Decay, Sustain, Release envelope editor | View docs |
| Pitch Bend Wheel | Vertical/horizontal pitch bend control | View docs |
| Modulation Wheel | Modulation wheel control | View docs |
| Meter - Arc | Circular level meter display | View docs |
- MIDI Provider - Context provider for MIDI functionality
- Filter Display - Visual representation of filter curves
- Drum Pad - Trigger pad for percussion samples
- Preset Browser - Interface for managing and selecting presets
AudioUI components can be customized to match your application's theme:
<Dial
value={50}
size="lg"
trackColor="rgba(0,0,0,0.2)"
indicatorColor="#6366f1"
variant="flat"
showValue={true}
valueFormatter={(v) => `${v}%`}
/>import { useEffect, useRef } from 'react';
import { Dial } from 'audioui';
function AudioProcessor() {
const audioContextRef = useRef(null);
const filterRef = useRef(null);
useEffect(() => {
audioContextRef.current = new AudioContext();
filterRef.current = audioContextRef.current.createBiquadFilter();
// Additional audio setup...
}, []);
const handleFilterChange = (value) => {
if (filterRef.current) {
filterRef.current.frequency.value = value * 100;
}
};
return (
<div>
<h3>Filter Frequency</h3>
<Dial
min={20}
max={20000}
value={1000}
onChange={handleFilterChange}
logScale={true}
/>
</div>
);
}AudioUI provides a starter template for integrating with JUCE 8's WebView feature, allowing you to build audio plugins with React-based UIs.
- JUCE 8 audio processing backend with C++
- React frontend for modern UI development
- Hot-reloading capability for rapid UI development
- Seamless communication between C++ and JavaScript
- Cross-platform compatibility
# Clone the starter template
git clone https://github.com/profmitchell/AudioUIJUCEStarterTemplate
# Set up the React frontend
cd AudioUIJUCEStarterTemplate/frontend
npm install
npm startOpen the JUCE project in your IDE (Xcode/Visual Studio), build and run it. The application will automatically connect to the React development server and display your UI with hot-reloading support.
- JUCE 8 WebView UIs Documentation - Official documentation from JUCE about the WebView feature
- JUCE WebView Tutorial by Jan Wilczek - Excellent step-by-step tutorial on integrating WebViews with JUCE
Special thanks to the JUCE team for creating the WebView feature that makes this integration possible, and to Jan Wilczek for his invaluable tutorial that helped shape our implementation approach.
/
├── components/
│ ├── ui/ # Core UI components
│ │ ├── dial.tsx # Rotary knob component
│ │ ├── adsr-envelope.tsx
│ │ ├── XYPad.tsx
│ │ └── ...
│ ├── site-sidebar.tsx # Documentation site components
│ └── ...
├── app/
│ ├── docs/ # Documentation pages
│ │ ├── components/ # Component documentation
│ │ ├── installation/ # Installation guide
│ │ └── introduction/ # Introduction to AudioUI
│ └── ...
└── ...
We welcome contributions to AudioUI! Whether it's new components, bug fixes, or documentation improvements, your help is greatly appreciated.
-
Fork the repository on GitHub
-
Clone your fork locally:
git clone https://github.com/YOUR-USERNAME/AudioUI.git cd AudioUI -
Create your feature branch:
git checkout -b feature/amazing-feature
-
Commit your changes with descriptive commit messages:
git commit -m 'Add some amazing feature' -
Push to the branch:
git push origin feature/amazing-feature
-
Open a Pull Request on GitHub
We have comprehensive documentation for contributors:
Contributing a new audio component? Ensure it meets these criteria:
- Accessible (keyboard navigable, ARIA compliant)
- Mobile responsive
- Well-documented with clear prop interfaces
- Includes basic tests
- Follows AudioUI's design system
Documentation improvements are just as valuable as code! Consider:
- Adding usage examples
- Creating tutorials
- Improving component documentation
- Fixing typos and clarifying instructions
- Fork the repository
- Create your feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add some amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
Please see our contributing guidelines for more details.
# Clone the repository
git clone https://github.com/profmitchell/AudioUI.git
cd AudioUI
# Install dependencies
pnpm install
# Start the development server
pnpm dev
# Build for production
pnpm build
# Deploy to GitHub Pages
pnpm deploy:pagesAudioUI is MIT licensed.
Cohen Concepts - Building the future of audio software interfaces. Mitchell Cohen - Professor of Electronic Music Production and Sound Design at Berklee College of Music in Boston.
AudioUI is built on the foundation of shadcn/ui, a collection of re-usable components built using Radix UI and Tailwind CSS. We extend our gratitude to the shadcn/ui team for their excellent work that made this project possible.