audio-mixer-ui 0.1.3 → 0.2.0

package/README.md

@@ -5,7 +5,7 @@ Originally developed for a choir practice application, these components provide
 
 ## Features
 
-- **Professional Audio Controls**: Custom sliders, buttons, and level meters with haptic feedback
+- **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
@@ -16,7 +16,7 @@ Originally developed for a choir practice application, these components provide
 ## Installation
 
 ```bash
-npm install audio-mixer-ui
+npm install audio-mixer-ui pinia
 ```
 
 ## Quick Start
@@ -25,96 +25,116 @@ npm install audio-mixer-ui
 <template>
   <div class="app">
     <MixerLayout>
-      <template #controls>
-        <MixerControls />
-      </template>
-      <template #parts>
-        <PartControl 
-          v-for="part in parts" 
-          :key="part.name"
-          :name="part.name"
-          v-model:volume="part.volume"
-          v-model:mute="part.mute"
-          v-model:solo="part.solo"
-        />
+      <template #menu>
+        <button @click="selectScore" class="menu-item">Load Score</button>
       </template>
     </MixerLayout>
   </div>
 </template>
 
 <script setup>
-import { 
-  MixerLayout, 
-  MixerControls, 
-  PartControl 
-} from 'audio-mixer-ui'
-import { ref } from 'vue'
-
-const parts = ref([
-  { name: 'Soprano', volume: 0.8, mute: false, solo: false },
-  { name: 'Alto', volume: 0.7, mute: false, solo: false },
-  { name: 'Tenor', volume: 0.75, mute: false, solo: false },
-  { name: 'Bass', volume: 0.8, mute: false, solo: false }
-])
+import { onMounted } from 'vue'
+import { MixerLayout, useMasterAudioControl } from 'audio-mixer-ui'
+import 'audio-mixer-ui/style.css'
+
+const masterAudio = useMasterAudioControl()
+
+const musicData = {
+  title: "Demo Song",
+  parts: [
+    { name: 'Soprano', volume: 0.75 },
+    { name: 'Alto', volume: 0.75 },
+    { name: 'Tenor', volume: 0.75 },
+    { name: 'Bass', volume: 0.75 }
+  ],
+  beats: [
+    { bar: 1, beat: 1, repeat: 0, tempo: 80, time: 0, timeSig: 4 },
+    { bar: 1, beat: 2, repeat: 0, tempo: 80, time: 0.75, timeSig: 4 },
+    // ... more beat data
+  ],
+  marks: { A: 1, B: 5, C: 9 }
+}
+
+onMounted(() => {
+  masterAudio.initialize(musicData)
+})
+
+function selectScore() {
+  console.log('Load different score')
+}
 </script>
 ```
 
+**Setup your app with Pinia:**
+
+```js
+// main.js
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(createPinia())
+app.mount('#app')
+```
+
 ## Core Components
 
+The library exports components that automatically integrate with Pinia stores:
+
 ### Layout Components
-- **`MixerLayout`** - Main responsive container with flexible slot system
-- **`MixerControls`** - Transport controls, master volume, and feature toggles
+- **`MixerLayout`** - Responsive container that auto-renders parts from store data
+- **`MixerControls`** - Transport controls connected to audio state
 
 ### Audio Controls
-- **`AudioSlider`** - Professional audio fader with level indicators
-- **`AudioButton`** - Responsive button with visual feedback
-- **`PartControl`** - Complete part mixer (volume, mute, solo)
-- **`TriState`** - Mute/Solo toggle control
+- **`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 number input with practice mark navigation
-- **`TimeInput`** - Time position display and input
-- **`SpeedInput`** - Playback speed control with percentage display
+- **`BarInput`** - Bar navigation with practice mark integration
+- **`TimeInput`** - Time display synced to playback position
+- **`SpeedInput`** - Playback speed control
 
 ### Utilities
-- **`BaseNumericInput`** - Foundation for all numeric inputs
-- **`TitleText`** - Responsive title display
+- **`BaseNumericInput`** - Foundation for numeric inputs
+- **`TitleText`** - Responsive text display
 
 ## State Management
 
-The library integrates with Pinia stores for reactive state management:
+Components automatically connect to Pinia stores for reactive state management. The library exports three main stores:
 
 ```js
-// stores/audioState.js
-export const useAudioStateStore = defineStore('audioState', {
-  state: () => ({
-    isPlaying: false,
-    currentTime: 0,
-    currentBar: 1,
-    currentBeat: 1,
-    masterVolume: 0.8
-  })
-})
-```
+import {
+  useAudioStateStore,     // Current playback state (time, volume, playing)
+  useMusicDataStore,      // Musical structure (beats, parts, marks)
+  usePlaybackStateStore,  // Transport settings (loop, metronome)
+  useMasterAudioControl   // Master composable for audio control
+} from 'audio-mixer-ui'
 
-## Event System
+// Components automatically connect to stores - no manual wiring needed
+const audioState = useAudioStateStore()
+const musicData = useMusicDataStore()
+const masterAudio = useMasterAudioControl()
 
-Components emit semantic events rather than directly manipulating audio:
+// Initialize with your musical data
+masterAudio.initialize(musicData)
+```
 
-```vue
-<template>
-  <MixerControls @play="handlePlay" @stop="handleStop" @set-bar="handleSetBar" />
-</template>
+## Integration Pattern
 
-<script setup>
-const handlePlay = () => {
-  // Start audio playback
-}
+Components handle user interactions via the master audio composable:
 
-const handleSetBar = (barNumber) => {
-  // Navigate to specific bar
-}
-</script>
+```js
+// Inside components, actions are coordinated through the master composable
+const masterAudio = useMasterAudioControl()
+
+// User interactions trigger master audio methods
+masterAudio.play()
+masterAudio.stop()
+masterAudio.setBar(5, 1)  // bar 5, repeat 1
+masterAudio.setPartVolume('Soprano', 0.8)
 ```
 
 ## Musical Data Structure
@@ -185,7 +205,7 @@ The library follows an event-driven layered architecture:
 ## Browser Support
 
 - Modern browsers with ES2020+ support
-- Vue 3.4+
+- Vue 3.4+ and Pinia for state management
 - Web Audio API for audio features
 
 ## Contributing