@spitch/reader/README.md

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

# @spitch/reader

A modern, fully-typed library for streaming text-to-speech audio using the Spitch API. Easily embed audio reading and voice features into any website or web app.

---

## Features
- 🎤 Text-to-speech via Spitch API
- 🔊 Audio playback controls (play, pause, seek, speed)
- ⚡ Real-time audio streaming
- 🖼️ Customizable appearance via [Spitch Studio](https://www.spitch.studio)
- 📦 Typed API for TypeScript consumers
- 🪶 Lightweight, framework-agnostic

---

## Installation

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

---

## Quick Start: Embed on Any Website

### 1. Import the Component

**In your JavaScript/TypeScript app:**
```js
import '@spitch/reader/dist/audio-reader.js';
```

**Or directly in HTML:**
```html
<script type="module" src="/node_modules/@spitch/reader/dist/audio-reader.js"></script>
```

### 2. Add the Component to Your Page
```html
<audio-reader reader-id="your-reader-id"></audio-reader>
```
- `reader-id` is required and should match a reader configured in your Spitch backend.

### 3. (Optional) Control via JS
```js
const reader = document.querySelector('audio-reader');
reader.readerId = 'my-reader-id';
```

---

## API & Types

The only required property is the `id` (provided as `reader-id`):

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

Or in JS/TS:
```js
const reader = document.createElement('audio-reader');
reader.readerId = 'your-reader-id';
document.body.appendChild(reader);
```

---

## Troubleshooting & FAQ
- **Audio not playing?**
  - Ensure your browser supports MediaSource and the audio format.
  - Confirm the ID you are passing is from your [Spitch Studio](https://www.spitch.studio) 
  - Check CORS settings on your API endpoint.
- **TypeScript errors?**
  - All types are exported. If you have issues, ensure your tooling supports `exports` and `types` fields in `package.json`.

---

## Development

- **Dev server:** `npm run dev`
- **Build:** `npm run build`
- **Preview:** `npm run preview`

---

## License

This component is part of the Spitch ecosystem and follows the same licensing terms. For commercial or custom licensing, contact [Spitch](https://spi-tch.com).

---

## Support

- [Spitch Website](https://spi-tch.com)
- [Contact Support](mailto:dev@spi-tch.com)