实现效果(我这里是在样式里面把功能注释了):
实现步骤:
1、安装:
2、封装组件 aPlayer.vue :
3、调用
template:
js部分:
官方api文档:
安装
Node
CDN
运行时要求
使用
Props
将 Audio 属性作为 props
音乐信息
事件
进阶使用
自适应主题色
支持 HLS
disableVersionBadge
Slots
cnpm i vue-aplayer --save
import aPlayer from '@/components/audio/aPlayer.vue'
components: {
aPlayer
},
data() {
return {
// 音频配置
songInfo: {
title: '我爱祖国.map3', //歌曲名称
artist: '123', //演唱者
lrc: '', //LRC 歌词或者歌词文件的 URL
pic: '', //封面图片 URL
src: 'https://music.163.com/song/media/outer/url?id=1466598056.mp3' //音频文件的 URL
}
}
},
$ yarn add vue-aplayer
或者如果你选择 npm
$ npm i vue-aplayer
// ES6
import Aplayer from 'vue-aplayer'
new Vue({
components: {
Aplayer
}
})
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
music | Object | 必需 | 当前播放的音乐。 具体请看音乐信息 |
list | Array | [] |
播放列表。如果 list 不是空数组,播放列表就会显示出来,即使 list 中只有一首歌并且它和 music 一样 |
mini | Boolean | false |
迷你模式 |
float | Boolean | false |
浮动模式。你可以在页面上随意拖放你的播放器 |
showLrc | Boolean | false |
是否显示歌词 |
mutex | Boolean | true |
是否在该播放器播放时暂停其他播放器 |
theme | String | '#41b883' |
主题色。如果当前歌曲也设置了 theme 则以歌曲的为准 |
shuffle | Boolean | false |
随机播放 |
repeat | String | 'no-repeat' |
轮播模式。值可以是 'repeat-one' (单曲循环)'repeat-all' (列表循环)或者 'no-repeat' (不循环)。为了好记,还可以使用对应的 'music' 'list' 'none' |
listMaxHeight | String | none | 播放列表面板最大高度 |
listFolded | Boolean | false |
默认收起播放列表 |
narrow | DEPRECATED, 请使用 mini |
||
listmaxheight | DEPRECATED, 请使用 listMaxHeight |
||
showlrc | DEPRECATED, 请使用 showLrc |
如果你是用的是 [email protected]+, 你可以在
music
shuffle
和repeat
上使用.sync
修饰符。
从 v1.4.0
开始,我们选取了一些 属性并将它们运用为 props
名称 | 类型 | 默认值 | 是否可变 | 说明 |
---|---|---|---|---|
autoplay | Boolean | false |
false | 自动播放。如果多个 mutex 播放器设置了 autoplay,只有第一个会自动播放 |
controls | Boolean | false |
true | 显示原生 audio 元素(在播放器面板和播放列表面板之间) |
muted | Boolean | false |
true | 静音 |
preload | String | none | true | The way to load music, can be 'none' 'metadata' or 'auto' |
volume | Number | 0.8 |
true | 播放音量 |
muted
和volume
也可以使用.sync
修饰符,你可以利用这一点做一些自定义的控制
music
props 包含了当前播放歌曲的如下信息。
属性 | 默认值 | 说明 |
---|---|---|
src | 必需 | 音频文件的 URL |
title | 'Untitled' |
歌曲名称 |
artist | 'Unknown' |
演唱者 |
pic | none | 封面图片 URL |
lrc | none | LRC 歌词或者歌词文件的 URL |
theme | none | 歌曲的主题色,会覆盖播放器的主题色 |
url | DEPRECATED, 请使用 src |
|
author | DEPRECATED, 请使用 artist |
从 v1.4.0
开始, Vue-APlayer 会抛出它内部的 元素上触发的所有媒体事件. 你可以查阅 MDN 上的这张完整列表.
在 v1.4.0
以前, 我们有一些自定义事件,如 play
pause
canplay
playing
ended
error
, 它们现在已全部被废弃。
从 v1.3.0
开始, 如果你将一首歌的 theme
值设为 'pic'
, Vue-APlayer 会从它的封面图片中提取颜色作为主题色. 你也可以直接将 Vue-APlayer 的 theme
prop 设为 'pic'
, 这样所有的歌曲都会使用自适应主题色
你只需将 color-thief 库加入页面中.
注意 color-thief 无法正常使用 npm 安装
从 v1.3.0
开始, Vue-APlayer 可选支持 *.m3u8
音频. 你需要做的就是在项目中安装 hls.js 包即可.
disableVersionBadge
Vue-APlayer 默认会在控制台打印出当前的版本标识,如果你想要禁用它,可以将 disableVersionBadge
设为 true
。
import VueAPlayer from 'vue-aplayer'
VueAPlayer.disableVersionBadge = true
slot="display"
这个 slot 代表播放器主体上显示的内容, 默认是滚动歌词.
这个 slot 中的组件会接收两个 props: currentMusic
和 playStat
.