Voice Notes Code Examples

Real-world voice notes integration examples for React and Vue. Build voice recording components with state management, error handling, and loading states. Full working code you can adapt for your application.

---

React Integration

React Hooks

import { useEffect, useState } from 'react';
import { VocaFuseSDK } from '@vocafuse/frontend-sdk';

function VoiceRecorder() {
  const [recorder, setRecorder] = useState(null);
  const [status, setStatus] = useState('idle');
  const [seconds, setSeconds] = useState(0);
  const [uploadPct, setUploadPct] = useState(0);
  const [error, setError] = useState('');

  useEffect(() => {
    (async () => {
      const sdk = new VocaFuseSDK({ tokenEndpoint: '/api/vocafuse-token' });
      await sdk.init();
      setRecorder(sdk.createRecorder({
        onStateChange: setStatus,
        onRecordProgress: setSeconds,
        onUploadProgress: setUploadPct,
        onError: (e) => setError(e.userMessage || e.message || 'Error')
      }));
    })();
  }, []);

  if (!recorder) return <button disabled>Loading…</button>;

  const toggle = async () => {
    setError('');
    if (recorder.isRecording) {
      await recorder.stop();
    } else {
      await recorder.start();
    }
  };

  return (
    <div>
      <button onClick={toggle}>
        {recorder.isRecording ? 'Stop & Upload' : 'Start Recording'}
      </button>
      <p>Status: {status}</p>
      <p>Time: {seconds.toFixed(1)}s</p>
      <p>Upload: {Math.round(uploadPct)}%</p>
      {error && <p style={{ color: '#b91c1c' }}>{error}</p>}
    </div>
  );
}

React Class

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

class VoiceRecorder extends React.Component {
  state = { status: 'idle', seconds: 0, uploadPct: 0, error: '' };
  recorder = null;

  async componentDidMount() {
    const sdk = new VocaFuseSDK({ tokenEndpoint: '/api/vocafuse-token' });
    await sdk.init();
    this.recorder = sdk.createRecorder({
      onStateChange: (s) => this.setState({ status: s }),
      onRecordProgress: (sec) => this.setState({ seconds: sec }),
      onUploadProgress: (pct) => this.setState({ uploadPct: pct }),
      onError: (e) => this.setState({ error: e.userMessage || e.message || 'Error' })
    });
    this.forceUpdate();
  }

  toggle = async () => {
    this.setState({ error: '' });
    if (this.recorder.isRecording) {
      await this.recorder.stop();
    } else {
      await this.recorder.start();
    }
  }

  render() {
    if (!this.recorder) return <button disabled>Loading…</button>;
    return (
      <div>
        <button onClick={this.toggle}>
          {this.recorder.isRecording ? 'Stop & Upload' : 'Start Recording'}
        </button>
        <p>Status: {this.state.status}</p>
        <p>Time: {this.state.seconds.toFixed(1)}s</p>
        <p>Upload: {Math.round(this.state.uploadPct)}%</p>
        {this.state.error && <p style={{ color: '#b91c1c' }}>{this.state.error}</p>}
      </div>
    );
  }
}

Vue Integration

Vue 3

<template>
  <div>
    <button @click="toggle">
      {{ isRecording ? 'Stop & Upload' : 'Start Recording' }}
    </button>
    <p>Status: {{ status }}</p>
    <p>Time: {{ seconds.toFixed(1) }}s</p>
    <p>Upload: {{ Math.round(uploadPct) }}%</p>
    <p v-if="error" style="color:#b91c1c">{{ error }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { VocaFuseSDK } from '@vocafuse/frontend-sdk';

const status = ref('idle');
const seconds = ref(0);
const uploadPct = ref(0);
const error = ref('');
const recorder = ref(null);

onMounted(async () => {
  const sdk = new VocaFuseSDK({ tokenEndpoint: '/api/vocafuse-token' });
  await sdk.init();
  recorder.value = sdk.createRecorder({
    onStateChange: (s) => status.value = s,
    onRecordProgress: (sec) => seconds.value = sec,
    onUploadProgress: (pct) => uploadPct.value = pct,
    onError: (e) => error.value = e.userMessage || e.message || 'Error'
  });
});

const toggle = async () => {
  error.value = '';
  if (recorder.value.isRecording) {
    await recorder.value.stop();
  } else {
    await recorder.value.start();
  }
}
</script>

Vue 2

<template>
  <div>
    <button @click="toggle">
      {{ isRecording ? 'Stop & Upload' : 'Start Recording' }}
    </button>
    <p>Status: {{ status }}</p>
    <p>Time: {{ seconds.toFixed(1) }}s</p>
    <p>Upload: {{ Math.round(uploadPct) }}%</p>
    <p v-if="error" style="color:#b91c1c">{{ error }}</p>
  </div>
</template>

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

export default {
  data() {
    return { recorder: null, status: 'idle', seconds: 0, uploadPct: 0, error: '' };
  },
  async mounted() {
    const sdk = new VocaFuseSDK({ tokenEndpoint: '/api/vocafuse-token' });
    await sdk.init();
    this.recorder = sdk.createRecorder({
      onStateChange: (s) => this.status = s,
      onRecordProgress: (sec) => this.seconds = sec,
      onUploadProgress: (pct) => this.uploadPct = pct,
      onError: (e) => this.error = e.userMessage || e.message || 'Error'
    });
  },
  computed: {
    isRecording() { return this.recorder?.isRecording; }
  },
  methods: {
    async toggle() {
      this.error = '';
      if (this.recorder.isRecording) {
        await this.recorder.stop();
      } else {
        await this.recorder.start();
      }
    }
  }
}
</script>