JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 37
  • Score
    100M100P100Q73031F
  • 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

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

Use Case

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

UI

Example Usage

<meta charset="utf-8">
<title>Vue-audio-tapir Demo</title>
<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<script src="./vue-audio-tapir.umd.js"></script>

<link rel="stylesheet" href="./vue-audio-tapir.css">

<div id="app" style="margin-top: 60px">
  <vue-audio-tapir backendEndpoint="https://yourendpoint/audio" :time="2" ></vue-audio-tapir>
</div>

<script>
app = Vue.createApp({});
app.component('vue-audio-tapir', window['vue-audio-tapir'])
app.mount('#app');
</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
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.

Project Setup

npm install

Development

npm run serve

Production

npm run build

Linting

npm run lint

Dependencies

References

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

License

MIT License