vue|使用vue音频播放器（vue-aplayer）详解 vue|vue

效果：
文章图片

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

npm install vue-aplayer --save

在需要使用的界面中：

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

2、基本使用：

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] (,,?? . ??,,) 抱歉，当前歌曲暂无歌词', }, ], } }

【vue|使用vue音频播放器（vue-aplayer）详解】属性大全：