@web-lite/voice-recorder

A multi-platform typescript voice-recorder library for browser.

Usage no npm install needed!

<script type="module">
  import webLiteVoiceRecorder from 'https://cdn.skypack.dev/@web-lite/voice-recorder';
</script>

README

Weblite Voice Recorder

A multi-platform typescript voice-recorder library for browser.

The MediaRecorder API is not supported in Safari browsers (including Safari on iOS). So for recording voice in IOS you should use webassembly based recorders.

In this package, if MediaRecorder API fails, we use vmsg to record mp3 format.

Companies that develop speech-recognition apps, voice-activated software, apps that require audio recording features, or language-learning products all can use @web-lite/voice-recorder

Installation

yarn add @web-lite/voice-recorder

Usage

Upload

Simple upload with @web-lite/storage package:

import { Recorder } from '@web-lite/voice-recorder'
import * as storage from '@web-lite/storage'

const recorder = new Recorder()

const recordAndUpload = async (): Promise<void> => {
  await recorder.start()
  setTimeout(async () => {
    const { blob, ext } = await recorder.stop()
    const info = await storage.upload(blob, {
      type: 'voice',
      name: `sample-voice.${ext}`,
    })
    console.log(info)
  }, 5000)
}

recordAndUpload()

React

Integrating to react using react-aptor package:

Configuration

This package uses default wasm url configured by weblite. You must change this config to work for your site.

import { Recorder, config } from '@web-lite/voice-recorder'

config({
  wasmURL: 'yoursite.com/vmsg.wasm', // https://github.com/Kagami/vmsg/blob/master/vmsg.wasm
  shimURL: 'yoursite.com/wasm-polyfill.js', // https://github.com/Kagami/wasm-polyfill.js
})

const recorder = new Recorder()

// ....