https://github.com/lorti/vue-dictaphone
🎙️ Vue.js dictaphone component to record audio from the user
https://github.com/lorti/vue-dictaphone
audio-recorder audio-visualizer vue-component
Last synced: about 2 months ago
JSON representation
🎙️ Vue.js dictaphone component to record audio from the user
- Host: GitHub
- URL: https://github.com/lorti/vue-dictaphone
- Owner: Lorti
- License: mit
- Created: 2018-05-11T11:47:05.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T03:58:10.000Z (over 2 years ago)
- Last Synced: 2025-04-23T17:13:33.661Z (about 2 months ago)
- Topics: audio-recorder, audio-visualizer, vue-component
- Language: Vue
- Size: 3.21 MB
- Stars: 24
- Watchers: 2
- Forks: 8
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-dictaphone
[](https://www.paypal.me/manuninja)
🎙️ Vue.js dictaphone component to record audio from the user
---
## Features
* HTML/CSS is fully customizable via [Scoped Slots](https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots)
* Spectrum analyser for visualising frequencies (Optional)
* `stop` event returns an `$event` object containing
* the audio blob (`$event.blob`) for further processing
* and a data URL (`$event.src`) for immediate output to the user
* Components emit an `error` event, when the browser does not support audio recording or the user has blocked microphone access.
## Installation
```
npm install --save vue-dictaphone
```
```
yarn add vue-dictaphone
```
## Usage
```js
import VueDictaphone from "vue-dictaphone";
Vue.use(VueDictaphone);
```
```html
Start recording
Stop recording
```
```js
new Vue({
// ...
data: {
audioSource: null
},
methods: {
handleRecording({ blob, src }) {
this.audioSource = src;
}
}
// ...
});
```
### File types
You can pass an optional `mime-type` prop on the `vue-dictaphone` element to change the MIME type of the recorded audio.
```html
```
For a list of MIME types supported by major browsers take a look a [Media formats for HTML audio and video](https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#File_formats) on MDN.
## Author
Manuel Wieser