Skip to content

Latest commit

 

History

History
92 lines (64 loc) · 4.02 KB

README.md

File metadata and controls

92 lines (64 loc) · 4.02 KB

vue-audio-okapi npm npm

Audio recorder component for Vue.js 3 for saving voice messages in mp3 file format. It makes it possible to record an audio message and send it to a server using the HTTP POST body.

Use Case

The most popular use case of vue-audio-okapi is to upload an audio contact message directly from a website to your server.

Architecture Overview

The developer includes the vue-audio-okapi component in his Vue 3 website. Users can leave a voice message and submits it. Vue-audio-okapi contacts the laravel backend api and uploads the audio data.

Installation

In a Vue 3 application install with:

npm i vue-audio-okapi --save

or

yarn add vue-audio-okapi --save

Example Usage in vue3

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

<script>
import OkapiWidget from 'vue-audio-okapi';
import 'vue-audio-okapi/dist/vue-audio-okapi.css';

export default {
  name: 'App',
  components: {
    OkapiWidget,
  }
}
</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.
customUpload Function Custom upload function that expects the audio blob as parameter. Returns true when successful, false when error.
visible Boolean If the widget is visible on the website. "false" stops the recording.

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

Compatibility

Successfully tested with applications that use Vue 3 and inertiajs.

Dependencies

Further Reading

References

The package bases on a fork of the vue-audio-tapir by: @tderflinger Your can read more about the Audio Okapi project on the blog: https://www.tderflinger.com/en/easily-receive-audio-messages-from-users

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

License

MIT License