效果：
预览效果：http://47.115.47.113:9090/message
1、安装&&组件引入：

npm install vue-aplayer --save

在需要使用的界面中：

import aplayer from "vue-aplayer";  
components: { aplayer },

2、基本使用：

<!--music：当前播放的音乐。 list：播放列表 ：showlrc：是否显示歌词-->
<aplayer :music="audio[0]" :list="audio"  :showlrc="true"></aplayer>

3、模拟数据：

data(){
    return{
        // 音频列表
        audio:  [
            {
                title:'天空之城',
                artist: '黄叶',
                url: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E5%A4%A9%E7%A9%BA%E4%B9%8B%E5%9F%8E.m4a',
                pic: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/QQ%E5%9B%BE%E7%89%8720200713203148.jpg',
                lrc: '[00:00.00] (,,•́ . •̀,,) 刚刚开始学钢琴弹的hhhh',
            },
            {
                title:'蒲空英的约定',
                artist: '黄叶',
                url: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a',
                pic: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/QQ%E5%9B%BE%E7%89%8720200713203148.jpg" ,
                lrc: '[00:00.00] (,,•́ . •̀,,) 刚刚开始学钢琴弹的hhhh',
            },
            {
                title:'无畏',
                artist: '马頔',
                url: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E9%A9%AC%E9%A0%94%20-%20%E6%97%A0%E7%95%8F.flac',
                pic: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E4%BB%A5%E5%AE%B6%E4%B9%8B%E5%90%8D.jpg', // prettier-ignore
                lrc: '[00:00.00] (,,•́ . •̀,,) 抱歉，当前歌曲暂无歌词',
            },
            {
                title:'蓝乐',
                artist: '白纸',
                url: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%93%9D%E4%B9%90%20-%20%E7%99%BD%E7%BA%B8.flac',
                pic: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/-1992181439.jpg" ,
                lrc: '[00:00.00] (,,•́ . •̀,,) 抱歉，当前歌曲暂无歌词',
            },
        ],
    }
}

属性大全：