jpntex / vue-pad

Vue Pad - Sound Pads for Vue JS

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

$ npm i vue-pad
# or
$ yarn add vue-pad

2. Usage:

<template>
  <vue-pad :sounds="sounds" />
</template>

<script>
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'
      }]
    }
  }
}
</script>

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 - jpntex