vmsg

vmsg

vmsg is a small library for creating voice messages. While traditional way of communication on the web is via text, sometimes it's easier or rather funnier to express your thoughts just by saying it. Of course it doesn't require any special support: record your voice with some standard program, upload to file hosting and share the link. But why bother with all of that boredom stuff if you can do the same in browser with a few clicks.

:fireworks: :tada: DEMO :tada: :fireworks:

Features

• No dependencies, framework-agnostic, can be easily added to any site
• Small: ~73kb gzipped WASM module and ~3kb gzipped JS + CSS
• Uses MP3 format which is widely supported
• Works in all latest browsers

Supported browsers

• Chrome 57+
• Firefox 53+
• Safari 11+
• Edge 16+

Note that this haven't been extensively tested yet. Feel free to open issue in case of any errors.

Usage

npm install vmsg --save

import { record } from "vmsg";

someButton.onclick = function() {
  record(/* {wasmURL: "/path/to/vmsg.wasm"} */).then(file => {
    console.log("Recorded MP3", file);
    // Can be used like this:
    //
    // const form = new FormData();
    // form.append("file[]", file);
    // fetch("/upload.php", {
    //   credentials: "include",
    //   method: "POST",
    //   body: form,
    // }).then(resp => {
    // });
  });
};

That's it! Don't forget to include vmsg.css and vmsg.wasm in your project.

See also demo directory for a more feasible example.

Development

1. Install Emscripten SDK.
2. Install latest LLVM, Clang and LLD with WebAssembly backend, fix LLVM_ROOT variable of Emscripten config.
3. Make sure you have a standard GNU development environment.
4. Activate emsdk environment.

5. git clone --recurse-submodules https://github.com/Kagami/vmsg.git && cd vmsg
   make clean all
   npm install
   npm start
   

These instructions are very basic because there're a lot of systems with different conventions. Docker image would probably be provided to fix it.

Technical details for nerds

vmsg uses LAME encoder underneath compiled with Emscripten to WebAssembly module. LAME build is optimized for size, weights only little more than 70kb gzipped and can be super-efficiently fetched and parsed by browser. It's like a small image.

Access to microphone is implemented with Web Audio API, data samples sent to Web Worker which is responsibe for loading WebAssembly module and calling LAME API.

Module is produced with modern LLVM WASM backend and LLD linker which should become standard soon, also vmsg has own tiny WASM runtime instead of Emscripten's to decrease overall size and simplify architecture. Worker code is included in the main JS module so end-user has to care only about 3 files: vmsg.js, vmsg.css and vmsg.wasm. CSS can be inlined too but IMO that would be ugly.

Why not MediaRecorder?

MediaStream Recording API is great but:

• Works only in Firefox and Chrome
• Provides little to no options, e.g. VBR quality can't be specified
• Firefox/Chrome encode only to Opus which can't be natively played in Safari and Edge

License

vmsg is licensed under CC0.
LAME is licensed under LGPL.
MP3 patents seems to have expired since April 23, 2017.