Vue-audio-tapir-x NPM

vue-audio-tapir SOURCE

this is a clone of vue-audio-tapir

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

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

Use Case

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.

Installation

In a Vue 3 application install with:

npm i vue-audio-tapir-x --save

yarn add vue-audio-tapir-x --save

Example Usage

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

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

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

Properties

Name	Type	Description
time	Number	Maximum recording time in minutes
bitRate	Number	bit rate of recording
sampleRate	Number	sample rate of recording
backendEndpoint	String	URL of the service that receives the data as POST
buttonColor	String	color code of the buttons for theming
audioFormat	String	file format of audio recording (MP3 or WAV)
afterRecording	Function	callback function when recording is finished.
successfulUpload	Function	callback function that is called when data is uploaded successfully
failedUpload	Function	callback function that is called when upload failed.

The data sent to the server is encoded either in the MP3 or WAV format. For MP3 encoding the lamejs library is used.

MP3 encoding saves space but needs more processing power on the client device. WAV has bigger file size but the encoding is faster and needs less power.