JavaScript API

Integrate Transcriptify's transcription capabilities into your own applications.

Contents

Overview

Transcriptify provides a client-side JavaScript API for transcribing audio and video files using OpenAI's Whisper model via Transformers.js. All processing happens in the browser — no server required, no API keys needed, no microphone access required.

Note: This API runs Whisper AI entirely in your browser using WebAssembly. The model is downloaded once and cached. No audio data is ever sent to external servers.

Installation

Include the script in your HTML:

<script src="transcribe.js"></script>

Or use as an ES module:

import { Transcriber } from './transcribe.js';

Quick Start

// Create a new transcriber instance
const transcriber = new Transcriber();

// Transcribe a video file
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', async (e) => {
    const file = e.target.files[0];
    
    const result = await transcriber.transcribe(file, {
        onProgress: (progress) => {
            // progress.status: 'loading' | 'extracting' | 'transcribing' | 'complete'
            // progress.message: Human-readable status
            // progress.percent: 0-100
            console.log(progress.message);
        }
    });
    
    console.log('Final transcript:', result.text);
    console.log('Segments with timestamps:', result.segments);
});

API Reference

new Transcriber(options?)

Creates a new Transcriber instance.

Options

Property Type Default Description
model string 'Xenova/whisper-tiny.en' Whisper model to use (see models below)
language string 'en' Language code (e.g., 'en', 'es', 'fr', 'de', 'ja')

transcriber.transcribe(file, options?)

Transcribes an audio or video file. Returns a Promise.

Parameters

Parameter Type Description
file File | Blob The media file to transcribe
options.language string Override language for this transcription
options.onProgress function Callback for progress updates (0-100)
options.onPartialResult function Callback for interim transcription results

Returns

{
    text: string,           // Full transcript text
    segments: [{
        text: string,       // Segment text
        startTime: number,  // Start time in seconds
        endTime: number,    // End time in seconds
        confidence: number  // Confidence score (0-1)
    }],
    duration: number,       // Total duration in seconds
    language: string        // Language used
}

transcriber.cancel()

Cancels the current transcription.

transcriber.isSupported()

Returns true if the browser supports AudioContext (required for audio processing).

Transcriber.toSRT(segments)

Converts transcript segments to SRT subtitle format.

const srt = Transcriber.toSRT(result.segments);
// Returns formatted SRT string

Transcriber.toVTT(segments)

Converts transcript segments to WebVTT subtitle format.

const vtt = Transcriber.toVTT(result.segments);
// Returns formatted VTT string

Events

The Transcriber instance emits events you can listen to:

Event Data Description
start — Transcription started
progress { progress: number } Progress update
result { text: string, isFinal: boolean } Transcription result
end { text: string, segments: array } Transcription complete
error { error: Error } An error occurred 
transcriber.on('progress', (data) => {
    console.log(`Progress: ${data.progress}%`);
});

transcriber.on('result', (data) => {
    if (data.isFinal) {
        console.log('Final:', data.text);
    }
});

Examples

Basic Transcription

const transcriber = new Transcriber();

async function transcribeVideo(file) {
    try {
        const result = await transcriber.transcribe(file);
        console.log(result.text);
    } catch (error) {
        console.error('Transcription failed:', error);
    }
}

With Progress Updates

const result = await transcriber.transcribe(file, {
    onProgress: (progress) => {
        progressBar.style.width = `${progress}%`;
    },
    onPartialResult: (text) => {
        transcriptDiv.textContent = text;
    }
});

Generate Subtitles

const result = await transcriber.transcribe(file);

// Create SRT file
const srt = Transcriber.toSRT(result.segments);
const blob = new Blob([srt], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

// Download
const a = document.createElement('a');
a.href = url;
a.download = 'subtitles.srt';
a.click();

Multiple Languages

// Spanish
const resultES = await transcriber.transcribe(file, {
    language: 'es-ES'
});

// French
const resultFR = await transcriber.transcribe(file, {
    language: 'fr-FR'
});

// Japanese
const resultJA = await transcriber.transcribe(file, {
    language: 'ja-JP'
});

Browser Support

Whisper via Transformers.js is supported in modern browsers:

Browser Support Notes
Chrome ✅ Full Best performance with WebGPU
Edge ✅ Full Same as Chrome
Firefox ✅ Full WebAssembly support
Safari ✅ Full macOS/iOS 15+

Available Models

Model Size Speed Accuracy
Xenova/whisper-tiny.en ~40MB Fastest Good (English only)
Xenova/whisper-tiny ~40MB Fastest Good (Multilingual)
Xenova/whisper-base ~75MB Fast Better
Xenova/whisper-small ~250MB Moderate Best
Privacy Note: All transcription happens locally in your browser. Your video and audio data never leaves your device. The AI model is downloaded once and cached in your browser.