npm package: @spitch/reader
Description: Embeddable audio reader component to render a rich audio reader player in African languages.
Author: Spitch
Latest version: 0.2.6

# @spitch/reader

Embeddable audio reader component to render a rich audio reader player in African languages.

## Installation

```bash
npm install @spitch/reader
```

## Usage

### React

```tsx
import { AudioReader } from '@spitch/reader/react';

function App() {
  return (
    <AudioReader 
      readerId="your-reader-id"
    />
  );
}
```

With ref for programmatic control:

```tsx
import { useRef } from 'react';
import { AudioReader, AudioReaderRef } from '@spitch/reader/react';

function App() {
  const readerRef = useRef<AudioReaderRef>(null);

  const handlePlay = () => {
    readerRef.current?.play();
  };

  return (
    <div>
      <button onClick={handlePlay}>Play</button>
      <AudioReader 
        ref={readerRef}
        readerId="your-reader-id"
      />
    </div>
  );
}
```

### Vue

```vue
<template>
  <AudioReader 
    :reader-id="readerId"
    @play="onPlay"
    @pause="onPause"
  />
</template>

<script setup lang="ts">
import { AudioReader } from '@spitch/reader/vue';

const readerId = 'your-reader-id';

const onPlay = () => console.log('Started playing');
const onPause = () => console.log('Paused');
</script>
```

With ref for programmatic control:

```vue
<template>
  <div>
    <button @click="handlePlay">Play</button>
    <button @click="handlePause">Pause</button>
    <button @click="handleSeek">Seek to 30s</button>
    
    <AudioReader 
      ref="readerRef"
      :reader-id="readerId"
      @play="onPlay"
      @pause="onPause"
      @seek="onSeek"
      @rate-change="onRateChange"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { AudioReader } from '@spitch/reader/vue';

const readerRef = ref();
const readerId = 'your-reader-id';

const handlePlay = () => readerRef.value?.play();
const handlePause = () => readerRef.value?.pause();
const handleSeek = () => readerRef.value?.seek(30);

const onPlay = () => console.log('Started playing');
const onPause = () => console.log('Paused');
const onSeek = (seconds: number) => console.log('Seeked to:', seconds);
const onRateChange = (rate: number) => console.log('Rate changed to:', rate);
</script>
```

### Angular (Standalone)

```ts
// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { Component, ViewChild } from '@angular/core';
import { AudioReaderComponent } from '@spitch/reader/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AudioReaderComponent],
  template: `
    <spitch-audio-reader [readerId]="readerId" />
  `,
})
class AppComponent {
  readerId = 'your-reader-id';
}

bootstrapApplication(AppComponent);
```

### Vanilla JavaScript/HTML

```html
<script type="module">
  import '@spitch/reader';
</script>

<audio-reader 
  reader-id="your-reader-id"
></audio-reader>
```

## Import Options

| Framework | Import Path | Component Name |
|-----------|-------------|----------------|
| React | `@spitch/reader/react` | `AudioReader` |
| Vue | `@spitch/reader/vue` | `AudioReader` |
| Angular | `@spitch/reader/angular` | `AudioReaderComponent` |
| Vanilla JS | `@spitch/reader` | `<audio-reader>` |

## Props

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `readerId` | string | ✅ | Unique identifier for the reader |

## Events (Vue)

- `@play` - Fired when audio starts playing
- `@pause` - Fired when audio is paused
- `@stop` - Fired when audio stops
- `@seek` - Fired when seeking to a specific time
- `@rate-change` - Fired when playback rate changes

## Methods (React/Vue/Angular refs)

- `play()` - Start playing audio
- `pause()` - Pause audio
- `stop()` - Stop audio
- `seek(seconds: number)` - Seek to specific time
- `setPlaybackRate(rate: number)` - Set playback speed

## Framework-Specific Features

### React
- Full TypeScript support with `AudioReaderProps` and `AudioReaderRef`
- Standard React props (`className`, `style`, etc.)
- Ref-based programmatic control
- Automatic cleanup on unmount

### Vue
- Vue 3 Composition API support
- Reactive props and event emission
- Template-based rendering
- Exposed methods for programmatic control
- Event handling for all audio state changes

### Vanilla JS
- Custom element `<audio-reader>`
- Attribute-based configuration
- Direct DOM manipulation
- Framework-agnostic

## Browser Support

- Chrome 67+
- Firefox 63+
- Safari 11.1+
- Edge 79+

## License

MIT