1.0.4 • Published 2 years ago
vue-mini-audio v1.0.4
vue-mini-audio
介绍
- 可在 PC/H5 页面使用的 mini 音频播放组件
- 场景使用 :不满足 audio 自带的标签样式
- 主要用到
timeupdateplaypauseloadedmetadata等进行相关操作
安装
// 使用yarn
yarn add vue-mini-audio
// 使用npm
npm i vue-mini-audio引入
插件方式
import Vue from "vue";
import vueMiniAudio from "vue-mini-audio";
Vue.use(vueMiniAudio);组件形式
import vueMiniAudio from "vue-mini-audio";
components: {
vueMiniAudio
},基础用法
<template>
<div>
<vue-mini-audio :url="url" />
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
url: "xxx.com/music/いつも何度でも.mp3",
};
},
};
</script>API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| url | 播放地址 (必填) | String | - |
| coverAudioBg | 音频背景色 | String | #343536 |
| activeColor | 播放状态进度条背景色 | String | #1989fa |
| inactiveColor | 未播放状态进度条背景色 | String | #fff |
| coverAudioBtnBg | 播放/暂停按钮背景色 | String | #1989fa |
Events
| 事件名 | 说明 |
|---|---|
| play | 播放回调 |
| pause | 暂停回调 |