JavaScript SDK Quick Start

Get started with voice recording quickly. Complete, copy-paste code examples for vanilla JavaScript, React, and Vue. Learn how to initialize the SDK, record voice notes, and handle the recording lifecycle.

JavaScript

import { VocaFuseSDK } from '@vocafuse/frontend-sdk';

// Initialize SDK
const sdk = new VocaFuseSDK({ tokenEndpoint: '/api/vocafuse-token' });
await sdk.init();

// Create a recorder instance you control
const recorder = sdk.createRecorder({
  maxDuration: 60,
  onStateChange: (s) => console.log('state', s),
  onRecordProgress: (sec) => console.log('seconds', sec),
  onUploadProgress: (pct) => console.log('upload %', pct),
  onComplete: (r) => console.log('uploaded', r.voicenote_id),
  onError: (e) => console.error(e)
});

// Wire up any UI
const btn = document.querySelector('#record-btn');
btn.addEventListener('click', async () => {
  if (recorder.isRecording) {
    await recorder.stop(); // auto-uploads by default
    btn.textContent = 'Start Recording';
  } else {
    await recorder.start();
    btn.textContent = 'Stop & Upload';
  }
});