APlayer & MetingJS 音乐播放器使用指南

2024-06-16 18:18| 来源: 网络整理| 查看: 265

使用APlayer & MetingJS 音乐播放器为博客园添加背景音乐 1.介绍 APlayer 是一个简洁漂亮、功能强大的 Html5 音乐播放器，GitHub地址：https://github.com/DIYgod/APlayer MetingJS 是为 APlayer 添加网易云、QQ音乐等支持的插件，GitHub地址： https://github.com/metowolf/MetingJS 2.安装

引用三个文件APlayer.min.js APlayer.min.css Meting.min.js

当然也可以打开这三个链接，将其中内容拉下来放到自己服务器上，这样可以避免那天链接失效，

拉下来之后没有自己没有服务器不要紧，可以上传到博客园文件，然后直接引用博客园文件就行了

3.APlayer 原生用法

const ap = new APlayer({　　　　 //定义容器 container: document.getElementById('aplayer01'),　　　　 //关于音频的相关参数： audio: [{ name: '碧い瞳のエリス',//音频名称 artist: '安全地帯',//艺术家 url: 'https://doge.ottoli.cn/安全地帯 - 碧い瞳のエリス.mp3',//文件地址 cover: 'https://doge.ottoli.cn/aqdd.jpg'//封面地址 }] });

更多用法请参考：APlayer官方文档

4.MetingJS 的用法

APlayer 原生用法设置参数十分繁琐，而且只能调用音频文件直链，增加服务器开销。而使用 MetingJS 就很好地解决了这个问题。

Id获取请参考：https://www.cnblogs.com/lwk9527/p/17405710.html，文中目录2，生成的链接中就包含Id

一个MetingJS 播放器至少需要三个参数

id='外链播放器id',必须参数,Id type=[song=单曲, playlist=歌单, album=专辑, search=搜索结果, artist=艺术家],必须参数,调用类型 server=[netease=网易云音乐, tencent=QQ音乐, kugou=酷狗音乐, xiami=虾米音乐, baidu=百度音乐],必须参数,调用的API

在只设置了这三个参数的情况下，列表默认展开，且播放器显示占用地方较大

可以在设置以下两个参数

fixed = 启用固定模式，固定在左下角,默认false

mini = 启用迷你模式,默认false

更多请参考：MetingJS官方文档

本文来自博客园，作者：流纹，转载请注明原文链接：https://www.cnblogs.com/lwk9527/p/17425769.html

【本文地址】

公司简介

联系我们