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

Overview

vue-audio-tapir npm npm

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 MP3 format for efficient storage. For MP3 encoding the lamejs library is used.

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

References

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

License

MIT License

Owner
Thomas Derflinger
Freelance web developer and entrepreneur.
Thomas Derflinger
Vue.js sound audio player base on Vuetify UI framework. Covers audio-tag API and adds more.

vuetify-audio Vue.js sound audio player base on Vuetify UI framework. Covers audio-tag API and adds more. Features Support most of audio play in this

Wilson Wu 128 Jan 23, 2022
Record video or snapshots from device cameras or desktop. Upload and download of video or snapshots is supported.

Multicorder Record video from cameras Record video from desktop screens Playback recordings Take snapshots of video Download videos or snapshots Demo

Brian Winkers 6 Nov 11, 2021
Manage your videos, add any metadata to them and play them.

Manage your videos, add any metadata to them and play them.

null 48 Jan 12, 2022
A Vue2 plugin to make video play easier

v-playback A Vue2 plugin to make video play easier Examples、Documentation and Changelog Explorer on English site 国内站点 Installation npm i -S v-playback

Terry Zeng 19 Nov 17, 2020
Play your own videos in background responsively in different resolutions.

Responsive Video Background Player for Vue 2 & 3 ⚡️ If you are looking to play videos in the background, you have found the best Vue package for it ??

Avido Food 168 Jan 18, 2022
Azuracast PWA Player - can play locally with the player

Azuracast PWA Player - can play locally with the player

Oussama 19 Jan 19, 2022
A cute small app to play TicTacToe. Check it out! :)

LET'S PLAY TO TICTACTOE! Project Description A simple app to play TicTacToe =) Technologies Project is created with: Vue-Cli Framework VueJS 3.0.0 HTM

Anthony 0 Dec 1, 2021
A Vue component for the plyr (https://github.com/sampotts/plyr) video & audio player.

vue-plyr v7.0.0 - Changelog A vue component for the plyr video & audio player. This is useful for when you want a nice video player in your Vue app. I

Gabe Dunn 630 Jan 19, 2022
▶️ 🎹 🎵 HTML5 audio tag sound player UI for Vue.js - supports single, loop, pause/stop modes etc

Vue.js sound player Vue.js sound audio player UI. Covers audio-tag API and adds more. Demo See DEMO here Installation Use npm: npm install vue-audio -

Mikhail Kuznetcov 170 Dec 18, 2021
:stuck_out_tongue_winking_eye: :stuck_out_tongue_winking_eye: :stuck_out_tongue_winking_eye: Easy to create custom audio player components for Vue. 一个有灵魂的进度条。 A progress bar with soul.

vue-audio-better Easy to create custom audio player components for Vue.js. 一个有灵魂的进度条。 A progress bar with soul. 简单、有趣的 audio 组件,非常感谢您的 star! Simple, f

JasonYu 87 Jan 20, 2022
A Howler.js mixin for Vue 2 that makes it easy to create custom audio player components

vue-howler A Howler.js mixin for Vue 2 that makes it easy to create custom audio player components Installation $ npm install vue-howler Usage First c

Mick Dekkers 105 Jan 5, 2022
An Audio Mixer plugin for Vue.js

Audio Mixer Demo Install Support us Demo To view a demo online: https://audiomixer.io To view demo examples locally clone the repo and run npm install

null 12 Oct 23, 2021
Web pages based on HTML 5 audio music player

Web pages based on HTML 5 < audio > music player demo // demo已停止 Requirements vue ^2.3.3 vue-resource ^1.3.4 v-click-outside ^0.0.8 Installation npm i

张啸 25 Dec 5, 2020
VueJS audio visualization components

vue-audio-visual Vue HTML5 audio visualization components Overview Install and setup API Common props AvLine props AvBars props AvCircle props AvWavef

Stas Kobzar 448 Jan 23, 2022
Productivity application for audio professionals 🌱

Productivity application for audio professionals ??

Britton Hayes 16 Dec 29, 2021
Can remove the audio file that the sample rate is less than 44.1 HZ

Can remove the audio file that the sample rate is less than 44.1 HZ

欧阳铖 0 Oct 11, 2021
Search, listen to YouTube videos (Audio Only), No YouTube Api

Trooveo is a project which can let you search, listen to youtube videos. No YouTube Api. Player Channel Playlist History Search This is the front-end

Joe Kaikaty 8 Dec 25, 2021
A Vue.js component for playing videos on HTML canvas. Useful for achieving autoplay videos in iOS and Safari.

vue-canvasvideo A Vue.js component for playing videos on HTML canvas. Useful for achieving autoplay videos in iOS and Safari. Overview Installation np

Chris Hurlburt 38 Nov 25, 2021
📼 A simple video header/section component for Vue. Good for video backgrounds and overlaying content on them.

vue-video-section A simple video header/section component for Vue. Good for video backgrounds and overlaying content on them. Links View demo View on

John Datserakis 32 Jan 7, 2022