audio-mixer-ui 0.5.2 → 0.7.0

package/README.md

@@ -1,17 +1,14 @@
 # Audio Mixer UI Components
 
-A Vue 3 component library for building audio mixer interfaces with musical navigation and control features. 
-Originally developed for a choir practice application, these components provide audio controls with responsive design and accessibility features.
+Vue 3 component library for building audio mixer interfaces with musical navigation and control features.
 
 ## Features
 
-- **Audio Controls**: Custom sliders, buttons, and level meters with haptic feedback
-- **Musical Navigation**: Bar/beat input, practice marks, tempo controls with bidirectional time mapping
-- **Responsive Design**: Optimized layouts for mobile, tablet, and desktop
-- **Event-Driven Architecture**: Clean separation between UI and audio engine
-- **Accessibility Ready**: ARIA labels, keyboard navigation, screen reader support
-- **Lightweight**: No heavy UI framework dependencies, just Vue 3
-- **TypeScript Ready**: Full TypeScript definitions included
+- Audio controls with level meters and haptic feedback
+- Musical navigation (bar/beat input, practice marks, tempo controls)
+- Responsive design for mobile, tablet, and desktop
+- Event-driven architecture with separate UI and audio layers
+- ARIA labels, keyboard navigation, and screen reader support
 
 ## Installation
 
@@ -80,63 +77,57 @@ app.mount('#app')
 
 ## Core Components
 
-The library exports components that automatically integrate with Pinia stores:
+Components automatically integrate with Pinia stores:
 
-### Layout Components
-- **`MixerLayout`** - Responsive container that auto-renders parts from store data
-- **`MixerControls`** - Transport controls connected to audio state
-
-### Audio Controls
-- **`AudioSlider`** - Professional fader with live level indicators
-- **`AudioButton`** - Button with visual/haptic feedback
-- **`PartControl`** - Complete part mixer (auto-generated from store)
-- **`TriState`** - Mute/Solo toggle
-
-### Musical Navigation
-- **`BarInput`** - Bar navigation with practice mark integration
-- **`TimeInput`** - Time display synced to playback position
+- **`MixerLayout`** - Responsive container that renders parts from store data
+- **`MixerControls`** - Transport controls (play, stop, pause)
+- **`AudioSlider`** - Fader with live level indicators
+- **`PartControl`** - Individual part mixer (volume, mute, solo)
+- **`BarInput`** - Bar navigation with practice marks
+- **`TimeInput`** - Time display synced to playback
 - **`SpeedInput`** - Playback speed control
 
-### Utilities
-- **`BaseNumericInput`** - Foundation for numeric inputs
-- **`TitleText`** - Responsive text display
-
 ## State Management
 
-Components automatically connect to Pinia stores for reactive state management. The library exports three main stores:
+Components connect to Pinia stores automatically:
 
 ```js
 import {
-  useAudioStateStore,     // Current playback state (time, volume, playing)
+  useAudioStateStore,     // Playback state (time, volume, playing)
   useMusicDataStore,      // Musical structure (beats, parts, marks)
   usePlaybackStateStore,  // Transport settings (loop, metronome)
-  useMasterAudioControl   // Master composable for audio control
+  useMasterAudioControl   // Master composable for control
 } from 'audio-mixer-ui'
 
-// Components automatically connect to stores - no manual wiring needed
-const audioState = useAudioStateStore()
-const musicData = useMusicDataStore()
 const masterAudio = useMasterAudioControl()
 
-// Initialize with your musical data
+// Initialize with musical data
 masterAudio.initialize(musicData)
+
+// Control playback
+masterAudio.play()
+masterAudio.stop()
+masterAudio.setBar(5, 1)
+masterAudio.setPartVolume('Soprano', 0.8)
 ```
 
-## Integration Pattern
+## Audio Engine Configuration
 
-Components handle user interactions via the master audio composable:
+Choose between SpessaSynth (soundfont-based, 10-50MB) or Lightweight (sample-based, ~4MB):
 
 ```js
-// Inside components, actions are coordinated through the master composable
-const masterAudio = useMasterAudioControl()
+import { audioEngineConfig } from 'audio-mixer-ui'
 
-// User interactions trigger master audio methods
-masterAudio.play()
-masterAudio.stop()
-masterAudio.setBar(5, 1)  // bar 5, repeat 1
-masterAudio.setPartVolume('Soprano', 0.8)
+// Use LightweightAudioEngine (default is SpessaSynth)
+audioEngineConfig.setEngineType('lightweight')
+
+// Then initialize as normal
+const masterAudio = useMasterAudioControl()
+await masterAudio.initialize(musicData)
 ```
 
+**Note:** Engine type must be set before initialization. See [audio-mixer-engine](https://www.npmjs.com/package/audio-mixer-engine) for setup details.
+
 ## Musical Data Structure
 
 The components expect musical timing data in this format:
@@ -188,38 +179,21 @@ npm run lint
 
 ## Architecture
 
-The library follows an event-driven layered architecture:
-
-1. **Components** - Vue 3 components with composition API
-2. **Composables** - Reusable logic for audio control and state management  
-3. **Stores** - Pinia stores for reactive state
-4. **Services** - Audio engine integration layer
+Event-driven layered architecture:
 
-### Key Design Principles
+1. **Components** - Vue 3 with Composition API
+2. **Composables** - Shared logic for audio control and state
+3. **Stores** - Pinia for reactive state management
+4. **Services** - Audio engine integration
 
-- **Audio Thread Isolation**: Audio processing separated from reactive UI state
-- **Event-Driven Coordination**: Real-time synchronization via event bus
-- **Dynamic Configuration**: Runtime discovery of parts and musical structure
-- **Responsive First**: Mobile-first design with progressive enhancement
+Key principles: Audio thread isolation, event-driven coordination, runtime part discovery.
 
-## Browser Support
+## Requirements
 
-- Modern browsers with ES2020+ support
-- Vue 3.4+ and Pinia for state management
-- Web Audio API for audio features
-
-## Contributing
-
-1. Fork the repository
-2. Create a feature branch
-3. Add tests for new functionality
-4. Ensure all tests pass
-5. Submit a pull request
+- Vue 3.4+
+- Pinia
+- Modern browser with Web Audio API support
 
 ## License
 
-MIT License - see [LICENSE](./LICENSE) file for details.
-
-## Related Projects
-
-This component library was extracted from a larger choir practice application.
+MIT License - see [LICENSE](./LICENSE) file for details.