23
2022
09
14:29:59

如何使用Aplayer播放器



推荐点击下面图片,通过本站淘宝优惠价购买:

image.png

Aplayer


一、部署


1、Aplayer


官网体验网址:https://aplayer.js.org/


Aplayer的GitHub网址: https://github.com/MoePlayer/APlayer


中文文档手册网址:首页 – APlayer


使用方法很简单,加载Aplayer的js和css,在想要展先的位置调用即可。Aplayer支持很多模式,上图展示的效果为吸底模式,就是在网页的页面最左下角展示。本文以吸底模式为例进行说明,如果想采用其它模式,可以根据文档手册修改代码。


2、Meting


如果只使用Aplayer,那么需要指定音乐的图片地址,mp4地址,歌词等,用着不是很方便,


这时就可以使用Meting作为辅助:GitHub - metowolf/MetingJS: A powerful plugin connect APlayer and Meting


Meting为Aplayer提供了网易云音乐的API接口,只要获得网易云音乐歌单的ID,就可以自动加载歌单里所有的歌曲,直接调用,方便很多,当然除了网易云音乐的API,还有其他的接口。


我在这里提供在线的Aplayer、Meting文件


<!-- require 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>

 <!--require MetingJS -->

<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

然后Aplayer播放器容器是下面代码


<meting-js

        id="6954857205"

        lrc-type="0"

        server="netease"

        order="list"

        type="playlist"

        fixed="true"

        list-olded="true"

        autoplay="true"

        mutex="true"

        >

</meting-js>

把上面2个框的代码放进你的网页就可以使用了,第二个的id我在这里使用的是网易云音乐的id,如下面图片内容


网易云音乐的id要用网页版,就是下图的网址中的id



d3d93e5fce3359b4738487185d9bcaca_6918704e18e825e7b0eb45dfd67bf90d.png


本文链接:http://www.hqyman.cn/post/2733.html 非本站原创文章欢迎转载,原创文章需保留本站地址!

分享到:





休息一下,本站随机推荐观看栏目:


« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

您的IP地址是: