简介

本项目是基于vue-aplayer二次开发的适用于PC端的采用wavesurfer.js的音乐播放器，可以参考这里vue-aplayer，原版的Vue-aplayer采用audio标签已被抛弃

安装

Node

$ yarn add jz-player

或者如果你选择 npm

$ npm i jz-player

示例图

使用

<aplayer autoplay
  :music="{
    title: 'secret base~君がくれたもの~',
    artist: 'Silent Siren',
    src: 'http://music.163.com/song/media/outer/url?id=447925558.mp3',
    pic: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg'
  }"
/>

// ES6
import Aplayer from 'vue-aplayer'

new Vue({
    components: {
        Aplayer
    }
})

Props

名称	类型	默认值	说明
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	'REPEAT.REPEAT_ALL'	循环模式。值可以是 'REPEAT.REPEAT_ONE'（单曲循环）'REPEAT.REPEAT_ONCE'（列表播放1遍）'REPEAT.REPEAT_ALL'（列表循环）或者 'REPEAT.NO_REPEAT'（不循环）
listMaxHeight	String	none	播放列表面板最大高度
listFolded	Boolean	false	默认收起播放列表
autoplay	Boolean	false	自动播放。如果多个 mutex 播放器设置了 autoplay，只有第一个会自动播放（因）
muted	Boolean	false	静音
volume	Number	0.8	播放音量，0为最小，1为最大

如果你是用的是 [email protected]+, 你可以在 music shuffle 和 repeat 上使用 .sync 修饰符，muted 和 volume 也可以使用 .sync 修饰符，你可以利用这一点做一些自定义的控制

Props.music

music props 包含了当前播放歌曲的如下信息。

属性	默认值	说明
src	必需	音频文件的 URL
title	'Untitled'	歌曲名称
artist	'Unknown'	演唱者
pic	none	封面图片 URL
lrc	none	LRC 歌词或者歌词文件的 URL
theme	none	歌曲的主题色，会覆盖播放器的主题色

Events

事件	参数	说明
play	currentMusic	播放回调事件，会返回当前播放的音频Object
pause	currentMusic	暂停回调事件，会返回当前播放的音频Object
stop	currentMusic	停止回调事件，会返回当前播放的音频Object
end	currentMusic	播放完回调事件，仅当repeat模式为“REPEAT.NO_REPEAT”生效，会返回当前播放的音频Object

进阶使用

自适应主题色

从 v1.3.0 开始, 如果你将一首歌的 theme 值设为 'pic', Vue-APlayer 会从它的封面图片中提取颜色作为主题色. 你也可以直接将 Vue-APlayer 的 theme prop 设为 'pic', 这样所有的歌曲都会使用自适应主题色

你只需将 color-thief 库加入页面中.

注意 color-thief 无法正常使用 npm 安装

<!-- 或者你选择的其他 CDN -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/color-thief.js"></script>

disableVersionBadge

Vue-APlayer 默认会在控制台打印出当前的版本标识，如果你想要禁用它，可以将 disableVersionBadge 设为 true。

import VueAPlayer from 'vue-aplayer'
VueAPlayer.disableVersionBadge = true

Slots

• slot="display"

这个 slot 代表播放器主体上显示的内容, 默认是滚动歌词.

这个 slot 中的组件会接收两个 props: currentMusic 和 playStat.