Audio recorder component for Vue.js 3. It enables to record, play and send audio messages to a server. There is a corresponding serverless backend function called audio-tapir-function. You can use both in combination to send you an email with the recorded audio message.

Demo page of Audio Tapir, you can record and play audio, but submitting is disabled.

The most popular use case of vue-audio-tapir is to deliver an audio contact message directly from a website to your email inbox.

The developer includes the vue-audio-tapir component in his Vue 3 website. When the user of the website wants to leave a voice message, he records his message and submits it. Vue-audio-tapir contacts the backend server, a Netlify serverless function and uploads the audio data. The serverless backend function sends the audio data to an email address using the email service Sendgrid. Finally the email with the voice message arrives at the destination, probably the email application of the website owner.

In a Vue 3 application install with:

npm i vue-audio-tapir --save

or

yarn add vue-audio-tapir --save

<template>
  <tapir-widget :time="2" backendEndpoint="https://your-endpoint.com/.netlify/functions/audio-message" 
                buttonColor="green"/>
</template>

<script>
import TapirWidget from 'vue-audio-tapir';
import 'vue-audio-tapir/dist/vue-audio-tapir.css';

export default {
  name: 'App',
  components: {
    TapirWidget,
  }
}
</script>

The data sent to the server is encoded in the WAV format.

If you need to run audio-tapir locally, run:

npm run serve

If you want to build audio-tapir locally, run:

npm run build

Successfully tested with applications that use Vue 3 and vue-cli.

• Vue 3
• Tailwindcss

Follow me on Twitter for updates: @tderflinger

Your can read more about the Audio Tapir project on my blog:

https://www.tderflinger.com/en/easily-receive-audio-messages-from-users

• Web Audio API on MDN
• WAV File Format

This project has been inspired by vue-audio-recorder by Gennady Grishkovtsov.

MIT License