https://github.com/jpntex/vue-pad
Vue Pad - Sound Pads for Vue JS
https://github.com/jpntex/vue-pad
audio beat beats css drum drumkit music pad plugin sound vue vuejs
Last synced: 18 days ago
JSON representation
Vue Pad - Sound Pads for Vue JS
- Host: GitHub
- URL: https://github.com/jpntex/vue-pad
- Owner: jpntex
- License: mit
- Created: 2020-08-15T15:37:09.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-03-26T22:29:03.000Z (about 5 years ago)
- Last Synced: 2025-04-08T00:47:04.157Z (about 1 year ago)
- Topics: audio, beat, beats, css, drum, drumkit, music, pad, plugin, sound, vue, vuejs
- Language: Vue
- Homepage: https://jpntex.github.io/vue-pad/
- Size: 3.33 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Vue Pad - Sound Pads for Vue JS
https://jpntex.github.io/vue-pad/
## Getting Started
Do you want to add to your own projects? There you go:
1. Add this package to your dependencies
```bash
$ npm i vue-pad
# or
$ yarn add vue-pad
```
2. Usage:
```html
import VuePad from 'vue-pad'
export default {
components: {
VuePad
},
data() {
return {
sounds: [{
label: 'Petaculo',
url: require('./sounds/petaculo.mp3'),
volume: 1, // 0 .. 0.5 .. 1
color: '#11e9e2',
shortkey: 'B',
}, {
url: '/beats/snare.wav',
color: 'purple'
}]
}
}
}
```
## FAQ
### What about the touch delay on mobile?
To solve the touch delay in modern web browsers natively:
https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away
And for the old browsers: https://github.com/ftlabs/fastclick
## License
[MIT license](https://github.com/jpntex/vue-pad/blob/master/LICENSE) - jpntex