更换音乐盒组件Aplayer+Metingjs

裴大头

发布于 2022-01-17 13:50:59

1.5K0

发布于 2022-01-17 13:50:59

文章被收录于专栏：裴大头的专栏

Aplayer

🍭 Wow, such a beautiful HTML5 music player(哇，好漂亮的HTML5音乐播放器) Aplayer是一个功能强大的HTML5音乐播放器 Aplayer官网文档：https://aplayer.js.org/#/

Metingjs

Metingjs基于Aplayer插件封装好的插件，开箱即用 Metingjs官网文档：https://github.com/metowolf/MetingJS

使用方法

一、html里

<!-- APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>

<meting-js
server="netease" 
type="playlist" 
id="60198">
</meting-js>
复制

直接粘贴到html里即可，效果如下：

二、Vue项目中

在index.html中添加依赖

在自定义组件中直接使用即可：

<template>
    <div id="music">
        <meting-js :autoplay="true"
                   :fixed="true"
                   :id="6819158597"
                   :mini="true"
                   :volume="0.4"
                   server="netease"
                   type="playlist"/>
    </div>
</template>

<script>
    export default {
        name: "music",
    }
</script>
复制

配置参数

选项	默认值	描述
id(编号)	require	歌曲ID /播放列表ID /专辑ID /搜索关键字
server(平台)	require	音乐平台：netease（网易云），tencent（QQ音乐），kugou（酷狗），xiami（虾米），baidu（百度音乐）
type（类型）	require	song，playlist，album，search，artist
fixed（固定模式）	false	启用固定模式，默认 false
mini（迷你模式）	false	启用迷你模式,默认 false
autoplay（自动播放）	false	音频自动播放，默认 false
theme(主题颜色)	#2980b9	默认 #2980b9
loop（循环）	all	播放器循环播放，值：“all”，one”，“none”
order(顺序)	list	播放器播放顺序，值：“list”，“random”
preload(加载)	auto	值：“none”，“metadata”，“'auto”
volume（声量）	0.7	默认音量，请注意播放器会记住用户设置，用户自己设置音量后默认音量将不起作用
mutex（限制）	true	防止同时播放多个玩家，在该玩家开始播放时暂停其他玩家
lrc-type（歌词）	0	歌词显示
list-folded（列表折叠）	false	指示列表是否应该首先折叠
list-max-height（最大高度）	340px	列出最大高度
storage-name（储存名称）	metingjs	存储播放器设置的localStorage键