JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 60
  • Score
    100M100P100Q85400F
  • License MIT

Audio recorder tapir component for Vue.js 3. It enables to record, play and send audio messages to a server.

Package Exports

  • vue-audio-tapir
  • vue-audio-tapir/dist/vue-audio-tapir.common.js
  • vue-audio-tapir/dist/vue-audio-tapir.umd.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-audio-tapir) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-audio-tapir npm npm Snyk Vulnerabilities for GitHub Repo


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.

Architecture Overview

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 --save

or

yarn add vue-audio-tapir --save

Example Usage

<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>

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
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 in the WAV format.

Dependencies

More Information

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

Further Reading

References

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

License

MIT License