只要我一直写下去，我活着，就有意义
前言
1 介绍
常用属性 props
music
:music="{
// 歌曲名
title,
// 音乐家
artist,
// 音乐path
src,
// 封面path
pic,
// 封面底色
theme
}"
autoplay
// 自动播放
:autoplay="true"
mini
// 简化版，只有封面
// 播放，暂停按钮
// 进度条，时间等自定义
:mini="true"
volume
// 播放音量
:volume="0.8"
常用插槽 slots
display
// 音乐信息
// 播放信息
// 可以自定义控制样式
<template v-slot:display="{ currentMusic, playStat }">
{{ currentMusic.title }}
{{ playStat.duration }} -{{ playStat.playedTime }}
</template>
常用事件 events
play
// 播放时触发
@play = “play”
pause
// 暂停时触发
@pause = “pause”
常用样式 style
aplayer-info
// aplayer-bar-wrap 进度条样式
// aplayer-time 时间按钮样式
/deep/ .aplayer {
.aplayer-info {
// slot内容
.aplayer-music {
}
// 控制条内容
.aplayer-controller {
// 进度条
.aplayer-bar-wrap {
}
// 时间
.aplayer-time {
// 总时长，播放时间
.aplayer-time-inner {
// display: none;
}
// 音量，随机播放等按钮
button {
display: none;
}
}
}
}
}
2 使用
安装
// 从 v1.3.0 开始, Vue-APlayer 可选支持 *.m3u8 音频
// 需要在项目中安装 hls.js
npm install vue-aplayer --save
播放
<template>
<div>
<!-- mini -->
<Aplayer
@pause="pause"
@play="play"
autoplay
:music="{
title: 'secret base~君がくれたもの~',
artist: 'Silent Siren',
src:
'https://audio04.dmhmusic.com/71_53_T10047699632_128_4_1_0_sdk-cpm/cn/0207/M00/73/B4/ChR461vN92uAMSHEAF13XOUL5QM162.mp3?xcode=f289a0ca2634d9507de6cfedc0901fca7251256',
pic
}"
>
<template v-slot:display="{ currentMusic, playStat }">
{{ currentMusic.title }}
{{ playStat.duration }} - {{ playStat.playedTime }}
</template>
</Aplayer>
</div>
</template>
<script>
import Aplayer from 'vue-aplayer'
const pic = require('../../assets/logo.png')
export default {
components: {
Aplayer
},
data() {
return {
pic
}
},
methods: {
play() {
console.log('play')
},
pause() {
console.log('pause')
}
}
}
</script>
<style lang="scss" scoped>
/deep/ .aplayer {
.aplayer-info {
// slot内容
.aplayer-music {
}
// 控制条内容
.aplayer-controller {
// 进度条
.aplayer-bar-wrap {
}
// 时间
.aplayer-time {
// 总时长，播放时间
.aplayer-time-inner {
// display: none;
}
// 音量，随机播放等按钮
button {
display: none;
}
}
}
}
}
</style>
3.注意
1.music.src 本地文件须使用 require 动态引入
2.使用solt自定义控制内容
3.事件和方法，同原生audio
尾声
很晚了，楼下的杂货铺都已经关门了，早点睡~
晚安 ^_^
