如何使用Aplayer播放器

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文件




 

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


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

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

如何使用Aplayer播放器_第1张图片

你可能感兴趣的:(Aplayer,javascript,html)