Audio system

import { AudioPlayer } from '@/components/audio/AudioPlayer';

<AudioPlayer 
 number={1234} 
 showControls={true}
 autoPlay={false}
/>
```text

### Simple Audio Button
```tsx
import { NumberAudioButton } from '@/components/audio/AudioPlayer';

<NumberAudioButton
 number={5678}
 size="md"
 variant="primary"
/>
```text

### Direct Service Usage
```tsx
import { audioService } from '@/lib/audioService';

// Play a number
await audioService.playNumber(1234);

// Play concatenated components
await audioService.playConcatenated(['thousands/1000.mp3', 'hundreds/200.mp3', 'tens/30.mp3', 'basic/4.mp3']);

// Stop playback
audioService.stop();
```text

## Audio File Structure

The system expects audio files to be organized in the `tuharure-audio` bucket as:

```text
tuharure-audio/
├── basic/ # 1-9
│ ├── 1.mp3
│ ├── 2.mp3
│ └── ...
├── tens/ # 10-90
│ ├── 10.mp3
│ ├── 20.mp3
│ └── ...
├── hundreds/ # 100-900
│ ├── 100.mp3
│ ├── 200.mp3
│ └── ...
├── thousands/ # 1000-9000
│ ├── 1000.mp3
│ ├── 2000.mp3
│ └── ...
├── units/ # Unit words
│ ├── thousands.mp3
│ ├── millions.mp3
│ └── billions.mp3
└── connectors/ # Connector words
 └── na.mp3
```text

## Number Decomposition Logic

The system automatically decomposes numbers into audio components:

- **1234** → `thousands/1000.mp3` + `hundreds/200.mp3` + `tens/30.mp3` + `basic/4.mp3`
- **56789** → `tens/50.mp3` + `thousands/6000.mp3` + `hundreds/700.mp3` + `tens/80.mp3` + `basic/9.mp3`
- **1000000** → `basic/1.mp3` + `units/millions.mp3`

## Environment Variables Required

```bash
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
```text

## Demo Page

Visit `/audio-demo` to test the audio system with various numbers and see all available components in action.

## Integration Examples

### Numbers Page
The audio system is already integrated into the numbers page (`/numbers`) where each number card has an audio button.

### Any Number Tool
The audio system can be easily integrated into the any-number tool for pronunciation of any number.

## Performance Considerations

- **Preloading**: Common audio files (1-20, 100, 1000) are preloaded for better performance
- **Caching**: Audio files are cached in browser memory to avoid repeated downloads
- **Signed URLs**: URLs expire after 1 hour, but are refreshed automatically
- **Error Handling**: Graceful fallback for missing or corrupted audio files

## Future Enhancements

- **Volume Control**: Individual audio file volume control
- **Playback Speed**: Adjustable playback speed
- **Offline Support**: Service worker for offline audio playback
- **Audio Visualization**: Waveform or progress visualization
- **Multiple Voices**: Support for different speaker voices