vue-tiny-audio

A simple vue audio component build by vue-cli

Install

npm install vue-tiny-audio --save

Usage

<template>
  <tiny-audio :src="audioSrc"
    :title="audioTitle"
    ref="tinyAudio"
    @play="onPlay"
    @pause="onPause"
    @end="onEnd"
    @next="onNext"
    @previous="onPrevious">
  </tiny-audio>
</template>

<script>
import tinyAudio from 'vue-tiny-audio';
import 'vue-tiny-audio/lib/tinyAudio.css';

export default {
  components: {
    tinyAudio
  },
  data () {
    return {
      src: 'xxx',
      title: 'xxx',
      step: 10
    }
  }
}
</script>

props

|prop|type|default|required| |:---:|:---:|:---:|:---:| |src|String|undefined|true| |title|String|undefined|false| |speeds|Array|[1, 1.25, 1.5, 2]|false| |step|Number|5|false|

events

|event|description| |:---:|:---:| |play|audio start to play| |pause|audio pause| |end|audio complete play| |previous|click previous button| |next|click next button|

slots

|slot|description|scopeData| |:---:|:---:|:---:| |title|the play material title|title| |control|the audio all control DOM|audio(all the data you need)| |time|the part of DOM which is related to time|audio(all the data you need)| |previous|the previous button|none| |next|the next button|none| |back|the back button|none| |forward|the forward button|none| |playOrPause|the play/pause button|status(play/pause/waiting)| |speed|the all DOM related to speed control|none| |speedLabel|the label of speed control DOM|speed|