jz-player v1.8.1

简介

本项目是基于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

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

Props.music

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

Events

进阶使用

自适应主题色

从 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/colorthief@2.0.2/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.