简单的线上音乐播放器 APlayer & MetingJS - YunFanCH · 云帆沧海
YunFanCH · 云帆沧海 - 持续更新的个人博客,记录生活、工作、爱好的点点滴滴。一切过往,皆为序章。直挂云帆,乘风破浪。



  • 今天是:
  • 首页
  • 文章
    • 笔记
    • 轨迹
    • 分享
    • 建站
  • 轻语
  • 流影
  • 友链
  • 留言
  • 关于

网站首页 » 建站 » 简单的线上音乐播放器 APlayer & MetingJS

简单的线上音乐播放器 APlayer & MetingJS

2020-08-02

APlayer & MetingJS

==================

它可以很复杂——定制显示内容和样式

也可以很简单——就那么几行代码的事

详细学习还是看官方文档吧:

https://github.com/MoePlayer/APlayer

https://github.com/metowolf/MetingJS

简单的:

在header上添加

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.js"></script>

在footer上添加

<script src="https://cdn.jsdelivr.net/npm/meting@1.1.0/dist/Meting.min.js"></script>

在使用的地方上添加

<div class="aplayer" data-id="12345" data-server="netease" data-type="playlist"></div>
 
<div class="aplayer" data-id="12345" data-server="tencent" data-type="album" data- 
     fixed="true" data-autoplay="false" data-volume="1.0" data-list-max-height="200px" data-list-folded="true"></div>

必要的参数

data-id =>音乐页面链接上的id号

data-server => 平台名称。netease:网易;tencent:腾讯;xiami:虾米;kugou:酷狗;baidu:百度

data-type=>类型。playlist:歌单;song:单曲;专辑:album;关键词:search;歌手:artist

更多参数详见 https://github.com/metowolf/MetingJS#option

最后。浏览器兼容问题

Browsers without native custom element support require a polyfill.

Chrome
Firefox
Safari
Internet Explorer 11
Microsoft Edge
um...继续诅咒 ie

完成!
请输入图片描述

WeChat Pay

微信打赏

Alipay

支付宝打赏

qqpay

QQ钱包

分享至 : QQ好友 QQ空间 新浪微博 标签: 音乐, 播放器, 在线
  • 上一篇:给Typecho添加页面加载时间代码
  • 下一篇:Typecho最近评论不显示博主的评论
建站
仅有 1 条评论
  1. 疆飞 疆飞
    2020-10-10 16:02

    看起来不错!

    回复
取消回复
添加新评论

Copyright ©2022 YunFanCH · 云帆沧海  运行了0天  加载耗时:12 ms

冀公网安备13048102000290号  |  冀ICP备2020020976号-2

Top