vue项目添加音乐播放插件

npm install vue-aplayer -s

我们需要在main.js里面导入并引用

import vueAplayer from 'vue-aplayer'

Vue.use(vueAplayer)

• 我们需要在使用的vue文件里面引入

import aplayer from 'vue-aplayer'

export default {
    components: {
      aplayer
    }
}

• 我们的html部分

<div style="width:280px;">
    <aplayer :music="videoUpload.music"></aplayer>
</div>

• js部分

<script>
    export default {
        data () {
           return {
                videoUpload: {
                //progress: false,
               // progressPercent: 0,
               // successPercent: 0,
                theme: '#ffc0cb',
                autoplay: true,
                repeat: 'repeat-one', // 轮播模式。值可以是 'repeat-one'（单曲循环）'repeat-all'（列表循环）或者 'no-repeat'（不循环）。为了好记，还可以使用对应的 'music' 'list' 'none'
                mini: true, // 迷你模式
                float: true, // 浮动模式。你可以在页面上随意拖放你的播放器
                music: { // 当前播放的音乐
                    title: '能够成家吗',
                    author: '咖啡少年',
                    url: 'https://assets.smallsunnyfox.com/music/1.mp3',                  pic:'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2366432289,1795558543&fm=26&gp=0.jpg' // 封面图片
                }
           }
        }
      }
    }
</script>

中文文档地址：https://github.com/SevenOutman/vue-aplayer/blob/develop/docs/README.zh-CN.md

我的效果图：