Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rimiti/vue-audio
Vue audio recorder
https://github.com/rimiti/vue-audio
audio audio-player recorder uploader vue
Last synced: about 5 hours ago
JSON representation
Vue audio recorder
- Host: GitHub
- URL: https://github.com/rimiti/vue-audio
- Owner: rimiti
- License: mit
- Created: 2019-12-28T11:58:25.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-11T18:39:00.000Z (almost 2 years ago)
- Last Synced: 2024-09-23T15:17:42.132Z (about 2 months ago)
- Topics: audio, audio-player, recorder, uploader, vue
- Language: Vue
- Homepage: https://dimsolution.com
- Size: 2.61 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @rimiti/vue-audio
## Description
Audio recorder for Vue.js. It allows to create, play, download and store records on a server.
### Features
- Beautiful clean UI
- Download/upload/play record
- Time limit
- Records limit
- A lot of callbacks
- Individual an audio player
- MP3/WAV support
### Tested in (desktop)
- Chrome
- Firefox
- Safari
## Installation
```
yarn add @rimiti/vue-audio
```
## AudioRecorder props
| Prop | Type | Description |
| --------------------- | -------- | ------------------------------------------------------------------------ |
| attempts | Number | Number of recording attempts |
| headers | Object | HTTP headers |
| time | Number | Time limit for the record (minutes) |
| bit-rate | Number | Default: 128 (only for MP3) |
| sample-rate | Number | Default: 44100 |
| filename | String | Download/Upload filename |
| format | String | WAV/MP3. Default: mp3 |
| upload-url | String | URL for uploading |
| show-download-button | Boolean | If it is true show a download button. Default: true |
| show-upload-button | Boolean | If it is true show an upload button. Default: true |
| before-upload | Function | Callback fires before uploading |
| successful-upload | Function | Callback fires after successful uploading |
| failed-upload | Function | Callback fires after failure uploading |
| mic-failed | Function | Callback fires if your microphone doesn't work |
| before-recording | Function | Callback fires after click the record button |
| pause-recording | Function | Callback fires after pause recording |
| after-recording | Function | Callback fires after click the stop button or exceeding the time limit |
| select-record | Function | Callback fires after choise a record. Returns the record |
## AudioPlayer props
| Prop | Type | Description |
| --------------------- | -------- | --------------------------------------------------------------- |
| src | String | Specifies the URL of the audio file |
## Usage
```js
import AudioRecorder from '@rimiti/vue-audio'
Vue.use(AudioRecorder)
```
```js
methods: {
callback (data) {
console.debug(data)
}
}
```
```html
```
```html
```
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```
## TODO
- Clear record list
- Responsive design