文章7
标签10
分类4

HTML5音乐播放器 - APlayer

前言

在偶然之间发现了这个播放器,界面还挺美观的,支持https

食用

将这三行代码放进网站里

<!-- MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@1.0.1/dist/Meting.min.js"></script>
<!-- Aplayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.js"></script>

建议 Aplayer 与 MetingJS 配合使用,因 Aplayer 本身比较复杂且繁琐

需要注意Meting.min.js必须在jquery.min.js

现在就可以在需要使用音乐的地方插入代码

<meting-js server="XXX" type="XXX" id="XXX"></meting-js>

示例:

<meting-js server="netease" type="song" id="1403774122"></meting-js>
<meting-js server="netease" type="song" id="1396561141" theme="#ff8300"></meting-js>
<meting-js server="netease" type="playlist" id="2111401734" theme="#ff6eb4"></meting-js>

其中的部分参数如下,加粗为必填

  • id:歌曲/专辑/歌单 ID
  • server:音乐平台,含下列可选值
    • netease(网易云音乐)
    • tencent(QQ音乐)
    • xiami(虾米音乐)
    • kugou(酷狗音乐)
    • baidu(百度音乐)
  • type:请求类型,含下列可选值
    • song(单曲)
    • album(专辑)
    • playlist(歌单)
    • search(搜索)
  • mode:播放模式,含下列可选值
    • random(随机)
    • single(单曲)
    • circulation(列表循环)
    • order(列表)
  • autoplay:自动播放
    • true
    • false
  • fixed: 吸底模式
    • true
    • false
  • mini:迷你模式
    • true
    • false
  • theme: 主题色(默认为 #2980b9)

更多设置请前往 APlayerMetingJS

感谢

本文作者:Little_cow
本文链接:http://blog.mzniuniu.cn/Aplayer/
许可协议:采用 署名-非商业性使用-相同方式共享 4.0 国际 转载请注明原作者