Meeting_Assistant/openspec/changes/archive/2025-12-22-add-audio-device-selector/tasks.md

Tasks: add-audio-device-selector

Phase 1: Core Device Management

Task 1.1: Add Audio Settings Panel HTML Structure

• Add collapsible panel container in meeting-detail.html
• Add device dropdown selector element
• Add volume meter container (canvas or div bars)
• Add test recording/playback buttons
• Add status indicator element
• Validation: Panel renders correctly, all elements visible

Task 1.2: Implement Device Enumeration

• Create enumerateAudioDevices() function
• Filter out virtual devices (Stereo Mix)
• Populate dropdown with device labels
• Mark default device in dropdown
• Add device change event listener for hot-plug support
• Validation: All connected microphones appear in dropdown

Task 1.3: Implement Device Selection Logic

• Create selectAudioDevice(deviceId) function
• Stop existing audio context when switching
• Create new AudioContext with selected device
• Save selection to localStorage
• Handle device unavailable errors
• Validation: Selecting device updates state, persists after refresh

Phase 2: Volume Monitoring

Task 2.1: Implement Volume Meter

• Create AudioContext and AnalyserNode
• Connect selected device to analyser
• Create volume calculation function (RMS or peak)
• Implement requestAnimationFrame loop for updates
• Render volume level as visual bar
• Validation: Meter responds to voice input, updates smoothly

Task 2.2: Volume Meter Styling

• Add CSS for volume meter bar
• Add gradient colors (green → yellow → red)
• Add percentage text display
• Add "No input detected" indicator
• Validation: Visual feedback is clear and responsive

Phase 3: Test Recording

Task 3.1: Implement Test Recording Function

• Create startTestRecording() function
• Use MediaRecorder with selected device
• Implement 5-second auto-stop timer
• Store recording as Blob
• Update UI during recording (countdown, indicator)
• Validation: Can record 5 seconds, blob created

Task 3.2: Implement Test Playback Function

• Create playTestRecording() function
• Create Audio element from blob URL
• Handle play/stop states
• Update UI during playback
• Clean up blob URL when done
• Validation: Recorded audio plays back correctly

Task 3.3: Test Recording UI State Management

• Disable recording button during recording
• Show countdown timer during recording
• Enable play button after recording
• Disable test controls during main recording
• Validation: UI states transition correctly

Phase 4: Integration

Task 4.1: Integrate with Main Recording

• Modify startRecording() to use selected device
• Add fallback to auto-selection if no preference
• Handle selected device being unavailable
• Stop volume monitoring during main recording
• Validation: Main recording uses selected device

Task 4.2: Add Panel Collapse/Expand

• Add collapse toggle button
• Save panel state to localStorage
• Load panel state on page load
• Stop volume monitoring when collapsed
• Validation: Panel remembers collapse state

Task 4.3: Add Refresh Device List Button

• Add refresh icon button
• Re-enumerate devices on click
• Preserve selection if still available
• Update dropdown options
• Validation: New devices appear after refresh

Phase 5: Polish & Error Handling

Task 5.1: Error Handling

• Handle "No devices found" state
• Handle permission denied errors
• Handle device disconnection during use
• Show user-friendly error messages (Chinese)
• Validation: All error states show appropriate messages

Task 5.2: Localization

• Add Chinese labels for all UI elements
• Add Chinese error messages
• Add tooltips for buttons
• Validation: All text is in Traditional Chinese

Task 5.3: Testing & Documentation

• Manual testing with multiple microphones
• Test USB microphone hot-plug
• Test headset microphone switching
• Update DEPLOYMENT.md if needed
• Validation: Feature works with various microphone types

Dependencies

• Task 1.2 depends on Task 1.1
• Task 2.1 depends on Task 1.3
• Task 3.1 depends on Task 1.3
• Task 4.1 depends on Tasks 1.3, 3.1
• Phase 5 depends on all previous phases

Parallelizable Work

• Task 1.1 (HTML) and Task 2.2 (CSS) can run in parallel
• Task 3.1 (Recording) and Task 2.1 (Volume) can run in parallel after Task 1.3