v-audio-player v0.2.1

v-audio-player

A audio player vue component based on html5.

Demo

demo

Installation

npm i v-audio-player

Usage

<template>
  <div id="app">
    <v-audio-player :audio="audio" ref="audio"></v-audio-player>
  </div>
</template>

<script>
import VAudioPlayer from '../src/index.js'

export default {
  data () {
    return {
      audio: {
        name: 'Sometimes When We Touch',
        loop: true,
        url: 'https://fengxianqi.github.io/v-audio-player/dist/media/sometimes_when_we_touch.010fafb2.mp3'
      }
    }
  },
  components: {
    VAudioPlayer
  }
}
</script>

props

audio 属性下：

Events

暴露一些audio标签默认的常用事件

Events Example

<template>
  <v-audio-player :audio="audio" @play="onPlay" @ended="onEnded"></v-audio-player>
</template>
<script>
export default {
  data () {
    return {
      audio: {
        name: 'Sometimes When We Touch',
        url: 'https://fengxianqi.github.io/v-audio-player/dist/media/sometimes_when_we_touch.010fafb2.mp3'
      }
    }
  },
  methods: {
    onPlay (e) {
      console.log('onplay', e)
    },
    onEnded (e) {
      console.log('this audio play ended', e)
    }
  }
}
</script>

Methods

可以通过ref来调用音频的方法，如

<v-audio-player :audio="audio" ref="audio"></v-audio-player>