Package Exports

@liripeng/vue-audio-player

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@liripeng/vue-audio-player) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vue音频播放器组件

线上演示

特性

经过童星汇APP线上业务检验的组件
完善的文档和示例
支持进度条拖拽（PC 端需引入一个库模拟 Touch 事件，库链接：https://github.com/hammerjs/touchemulator）

安装

npm i -S @liripeng/vue-audio-player

注意事项

组件CSS使用 less 预编译语言

按需引入

import { AudioPlayer } from '@liripeng/vue-audio-player'
import '@liripeng/vue-audio-player/lib/vue-audio-player.css'

components: {
  AudioPlayer
}

全局引入

import AudioPlayer from '@liripeng/vue-audio-player'
import '@liripeng/vue-audio-player/lib/vue-audio-player.css'

Vue.use(AudioPlayer)

使用

<template>
  <div>
    <AudioPlayer :audio-list="audioList" />
  </div>
</template>

<script>
import { AudioPlayer } from '@liripeng/vue-audio-player'

export default {
  components: {
    AudioPlayer
  },
  data() {
    return {
      audioList: [
        'http://txh-cdn.96qbhy.com/20180817175211dtC1vE3z.mp3',
        'http://txh-cdn.96qbhy.com/20181106105737sOcozMqw.mp3'
      ]
    }
  }
}
</script>

Props

参数	说明	类型	默认值
audio-list	音频播放列表	`Array`	-
show-play-button	是否显示播放按钮	`Boolean`	`true`
show-prev-button	是否显示上一首按钮	`Boolean`	`true`
show-next-button	是否显示下一首按钮	`Boolean`	`true`
show-progress-bar	是否显示进度条	`Boolean`	`true`
isLoop	是否列表循环播放	`Boolean`	`true`
before-play	点击播放前的回调函数调用 done() 后开始播放	`(done)=>void`	-
before-prev	点击上一首前的回调函数调用 done() 后开始播放上一首	`(done)=>void`	-
before-next	点击下一首前的回调函数调用 done() 后开始播放下一首	`(done)=>void`	-

Event

事件	说明	回调
play	点击播放后触发	-
pause	点击暂停后触发	-
play-prev	点击上一首后触发	-
play-next	点击下一首后触发	-
timeupdate	正在播放音频中触发	`event`
loadedmetadata	当媒介元素的持续时间以及其它媒介已加载数据时运行脚本触发	`event`
ended	音频播放结束后触发	`event`

Data

变量	说明	默认值
currentPlayIndex	当前播放的音频索引	`0`
isPlaying	音频是否正在播放	`false`
duration	音频持续时间	-
currentTime	音频当前播放时间	-

更多请自行查看组件 data

Methods

方法	说明	回调
play	开始播放	-
pause	暂停播放	-
playPrev	播放上一首	-
playNext	播放下一首	-

更多请自行查看组件 methods

LICENSE

MIT

最后

使用过程中发现任何问题都可以提 Issue，也非常欢迎提PR