无作为
不仅仅是一种态度!

一段代码实现Aplayer音乐播放器+网易云/QQ音乐接口+通用插件js代码

Aplayer是最近非常火切实用的网页音乐播放器,这里分享一段代码即可启用插件,另外附上通用的js代码以及调用代码,支持网易云和QQ音乐。

1、Aplayer

Aplayer是一款小巧的网页播放器,支持调用网易云以及QQ音乐歌曲和歌单实现网页播放。

之前网易云能够直接调用网页代码,现在因为版权问题以及无法调用了。

现在网易云调用网页播放器会直接提示:关于网易音乐由于版权保护,无法生成外链。

1、Aplayer音乐播放器部署

这里授人以鱼不如授人以渔,无作为会把所有代码贴出来,保证是全网最全的教程了。

首先是一段简易代码实现Aplayer侧边栏播放器,就是挂在网站左下角的那个播放器:

2、代码参数说明

这里无作为先把参数放在前面,给大家说明一下,不然等会直接添加到网站不显示之类的,好找原因。

data-id=”歌单id或歌曲id”
data-server=”netease或tencent”(netease为网易云,tencent为QQ音乐)
data-autoplay=”ture或false”(设为ture的话打开网页歌曲会自动播放,false不自动播放)
data-theme=”#f4a7b9″(按照自己的喜好更换颜色)
style=”width:600px; height:300px;”(按照自己的喜好设置宽高)

大家在看下面代码的时候自己注意代码是调用的网易云音乐接口还是QQ音乐的接口哈。

3、一段代码实现Aplayer音乐播放器

只需吧这段代码添加到网页中即可直接实现播放器功能,非常简单,至于添加的地方没有固定点,随意。

<!-- require APlayer -->
<link rel="stylesheet" rel="nofollow" href="https://www.w168.net/link?url=aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9hcGxheWVyL2Rpc3QvQVBsYXllci5taW4uY3Nz">
<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>
<meting-js
        id="35565456"//网易的上https://music.163.com/登陆自己的号找一个喜欢的歌单,复制地址栏上面的ID就可以啦!!!
        lrc-type="0"
        server="netease"//qq音乐或者其他上面有账号的小伙伴可以参考https://github.com/metowolf/MetingJS哦!!!
        order="list"//这里是歌单加载的排列顺序,list:按照原歌单排列;random:打乱顺序排列
        type="playlist"
        fixed="true"
        list-olded="true">
</meting-js>

以上代码添加后就是网站左下角边侧样式,上面已经给出图片了。

4、调用模式

这里也分享一下常规的前台后台代码调用的模式,也分为两种,就是边侧和调用显示的。

1、边侧播放器样式

<link rel="stylesheet" rel="nofollow" href="https://www.w168.net/link?url=aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9hcGxheWVyQDEuMTAuMC9kaXN0L0FQbGF5ZXIubWluLmNzcw==">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js"></script>
<div class="aplayer" data-id="7625573185" data-server="tencent" data-type="playlist" data-autoplay="false" data-fixed="true"> </div>

2、调用任意位置样式

<link rel="stylesheet" rel="nofollow" href="https://www.w168.net/link?url=aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9hcGxheWVyQDEuMTAuMC9kaXN0L0FQbGF5ZXIubWluLmNzcw==">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js"></script>
<div class="aplayer aplayer-withlrc aplayer-withlist" data-id="7625573185" data-server="tencent" data-type="playlist" data-autoplay="ture" data-theme="#f4a7b9" style="width:600px; height:300px;"> </div>

5、教程总结

这里给出播放器官方网站:点击前往

更多播放器样式大家可以在官方开源网站这里讨论:点击前往

历史上的今天:
赞(7) 打赏
所有免费资源、福利、电影、破解软件未经允许不得转载:www.wuzuowei.net无作为 » 一段代码实现Aplayer音乐播放器+网易云/QQ音乐接口+通用插件js代码

留下评论 抢沙发

无作为-不仅仅是一种态度

登录/注册广告合作

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏