伍爱资源网 - 分享网络上的各大精品资料技术跟热点新闻以及最新的SEO技术
当前位置:伍爱资源网 > 网站源码 > 只有源码 > 正文

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

作者:欧皓瑞 点击: 只有源码本文有1039个文字,预计阅读时间3分钟

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

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音乐播放器

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


<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 src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js">
<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">

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

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 src="https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js">
<div class="aplayer" data-id="7625573185" data-server="tencent" data-type="playlist" data-autoplay="false" data-fixed="true"> 

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 src="https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js">
<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;"> 

5、教程总结

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

下载地址

蓝奏网盘百度网盘本地下载备用下载快速下载稳定下载

文章标签:

你会喜欢下面的文章? You'll like the following article.

评论列表

说点什么吧!不要发广告哦!!
  • 全部评论(0
    还没有评论,快来抢沙发吧!