欢迎来到好人卡资源网,专注网络技术资源收集,我们不仅是网络资源的搬运工,也生产原创资源。寻找资源请留言或关注公众号:烈日下的男人

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

网站源码 sky995 4年前 (2020-08-28) 2780次浏览 0个评论

本文及资源最后更新时间 2020-08-28 by sky995

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

1、Aplayer

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

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

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

1、Aplayer音乐播放器部署

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

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

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

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

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

<span class="com"><!-- require </span><a title="View all posts in APlayer" href="https://www.w168.net/tag/aplayer/" target="_blank" rel="noopener noreferrer"><span class="com">APlayer</span></a><span class="com"> --></span>
<span class="tag"><link</span> <span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span> <span class="atn">rel</span><span class="pun">=</span><span class="atv">"nofollow"</span> <span class="atn">href</span><span class="pun">=</span><span class="atv">"https://www.w168.net/link?url=aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9hcGxheWVyL2Rpc3QvQVBsYXllci5taW4uY3Nz"</span><span class="tag">></span>
<span class="tag"><script</span> <span class="atn">src</span><span class="pun">=</span><span class="atv">"https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"</span><span class="tag">></script></span>
<span class="com"><!-- require MetingJS --></span>
<span class="tag"><script</span> <span class="atn">src</span><span class="pun">=</span><span class="atv">"https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"</span><span class="tag">></script></span>
<span class="tag"><meting-js</span>
        <span class="atn">id</span><span class="pun">=</span><span class="atv">"35565456"</span><span class="pun">//</span><span class="pln">网易的上</span><span class="atn">https</span><span class="pln">:</span><span class="pun">//</span><span class="atn">music</span><span class="pln">.163.</span><span class="atn">com</span><span class="pun">/</span><span class="pln">登陆自己的号找一个喜欢的歌单,复制地址栏上面的</span><span class="atn">ID</span><span class="pln">就可以啦!!!
        </span><span class="atn">lrc-type</span><span class="pun">=</span><span class="atv">"0"</span>
        <span class="atn">server</span><span class="pun">=</span><span class="atv">"netease"</span><span class="pun">//</span><span class="atn">qq</span><span class="pln">音乐或者其他上面有账号的小伙伴可以参考</span><span class="atn">https</span><span class="pln">:</span><span class="pun">//</span><span class="atn">github</span><span class="pln">.</span><span class="atn">com</span><span class="pun">/</span><span class="atn">metowolf</span><span class="pun">/</span><span class="atn">MetingJS</span><span class="pln">哦!!!
        </span><span class="atn">order</span><span class="pun">=</span><span class="atv">"list"</span><span class="pun">//</span><span class="pln">这里是歌单加载的排列顺序,</span><span class="atn">list</span><span class="pln">:按照原歌单排列;</span><span class="atn">random</span><span class="pln">:打乱顺序排列
        </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"playlist"</span>
        <span class="atn">fixed</span><span class="pun">=</span><span class="atv">"true"</span>
        <span class="atn">list-olded</span><span class="pun">=</span><span class="atv">"true"</span><span class="tag">></span>
<span class="tag"></meting-js></span>

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

4、调用模式

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

1、边侧播放器样式

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

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

2、调用任意位置样式

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

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

5、教程总结

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

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


好人卡资源网 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:一段代码轻松实现Aplayer音乐播放器+网易云/QQ音乐接口+通用插件js代码
喜欢 (2)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址