@spitch/reader

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

Installation

npm install @spitch/reader

Usage

React

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

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

With ref for programmatic control:

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

<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:

<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)

// 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

<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