上篇文章我们说了怎么使用 视频插件vue-vedio-player那么我们当然也有音频插件了
我们选择使用vue-aplayer
- 同样我们先安装这个插件
npm install vue-aplayer -s
- 我们需要在main.js里面导入并引用
import vueAplayer from 'vue-aplayer'
Vue.use(vueAplayer)
image.gif
- 那么我们怎么使用了？
- 首先我们需要在使用的vue文件里面引入他
import aplayer from 'vue-aplayer'
export default {
components: {
aplayer
}
}
image.gif
- 我们的html部分
<template>
<div style="width: 60%">
<aplayer :music="videoUpload.music"></aplayer>
</div>
</template>
image.gif
- js部分
<script>
export default {
data() {
return {
videoUpload: {
progress: false,
progressPercent: 0,
successPercent: 0,
music: {
title: '',
author: '',
url: '',
lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'
}
},
}
}
}
</script>
image.gif
- 最后我们来看一下效果
image
image.gif
