标签 APlayer 下的文章 - 易航博客
首页
统计
友链
4K壁纸
留言板
关于
推荐
百度一下: 易航博客
搜 索
1
Joe主题再续前缘版 - 本站同款
5,878 阅读
2
易航网址引导系统
3,131 阅读
3
Js自动播放HTML音乐(不受浏览器限制,无需先与浏览器交互,无需对浏览器进行修改)
2,008 阅读
4
六个好看实用的HTML登录界面源码
1,774 阅读
5
V免签全开源免签约码支付系统(支持:支付宝 微信 QQ)
716 阅读
源码大全
PHP源码
HTML模板
Java源码
小程序源码
热门程序
Typecho
ThinkPHP
Joe主题
技术教程
HTML教程
PHP教程
CSS教程
JS教程
MySQL教程
SEO教程
正则表达式教程
网络技术
话题讨论
PHP话题
书虫小说
剑来
雪中悍刀行
值得一看
媒体新闻
人生语录
热门事件
活动线报
经验分享
关于我们
站点公告
其他文章
登录
/
注册
搜 索
标签搜索
网站源码
PHP
PHP教程
PHP源码
PHP函数方法
JavaScript
HTML模板
HTML
Joe主题
网站模板
Typecho
ThinkPHP
PHP网络请求
支付系统
通信协议
码支付
API接口
Typecho插件
PHP发送数据
网络攻击
易航
累计撰写
90
篇文章
累计收到
925
条评论
首页
栏目
源码大全
PHP源码
HTML模板
Java源码
小程序源码
热门程序
Typecho
ThinkPHP
Joe主题
技术教程
HTML教程
PHP教程
CSS教程
JS教程
MySQL教程
SEO教程
正则表达式教程
网络技术
话题讨论
PHP话题
书虫小说
剑来
雪中悍刀行
值得一看
媒体新闻
人生语录
热门事件
活动线报
经验分享
关于我们
站点公告
其他文章
页面
统计
友链
4K壁纸
留言板
关于
推荐
百度一下: 易航博客
用户登录
登录
注册
找到
1
篇与
APlayer
相关的结果
2022-11-21
给你的网站增加一款简洁而功能强大的音乐播放器
H5播放器介绍APlayer 是一个简洁漂亮、功能强大的 Html5 音乐播放器MetingJS 是为 APlayer 添加网易云、QQ音乐、酷狗音乐等支持的插件安装教程安装很简单,一共需要调用三个文件:APlayer.min.js APlayer.min.css Meting.min.js你可以使用 CDN 调用,只需要在 <head> 里面插入:<link href="https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.css" rel="stylesheet"> <script src="https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>在 footer 里面插入:<script src="https://cdn.bootcdn.net/ajax/libs/meting/2.0.1/Meting.min.js"></script>当然,你可以将这些文件托管在自己的服务器,把上面的调用链接改成自己的就行了使用方法APlayer 原生用法先看一个最简单的例子:<div id="aplayer"></div> <script type="text/javascript"> const ap = new APlayer({ container: document.getElementById('aplayer'), audio: [{ name: '你从未离去', artist: '白挺', url: 'https://doge.ottoli.cn/你从未离去.mp3', cover: 'https://doge.ottoli.cn/你从未离去.jpg' }] }); </script>在js 代码中:参数 container 值为 document.getElementById('aplayer') 意思是定义当前播放器容器 id 为 aplayer参数 audio 中有 4 个子参数,定义关于音频的相关参数:参数 name 定义音频名称参数 artist 定义艺术家名参数 url 指向音频文件的地址参数 cover 指向音频封面的地址然后,在需要使用播放器的地方,将容器 <div> 的 id 设置为参数 container 中设定的值即可MetingJS 的用法前面已经看到,APlayer 原生用法设置参数十分繁琐,而且只能调用音频文件直链,增加服务器开销。而使用 MetingJS 就很好地解决了这个问题先看一个最简单的例子: 对应的代码为:<meting-js server="netease" type="song" id="31365604" > </meting-js>一个 MetingJS 播放器至少需要三个参数:server 指定调用的 API ,可选 netease, tencent, kugou, xiami, baidu ,分别对应网易云音乐、QQ音乐、酷狗音乐、虾米音乐、百度音乐type 指定调用类型,可选 song, playlist, album, search, artist ,分别对应单曲、歌单、专辑、搜索结果、艺术家id 指定调用的 id ,一般可以在地址栏中找到当 type 选择的是个播放列表时,生成的播放器是这样的: 播放列表默认是打开的,你可以使用参数 listFolded="true" 使其默认折叠当你设定 fixed="true" ,会生成一个吸附在页面左下角的播放器,就像我的博客左下角那个当你设定 mini="true" ,会生成一个 mini 播放器: 值得注意的是:除了 mini 模式,MetingJS 生成的播放器默认是带有歌词的(而且关不掉)全部参数说明请查阅 MetingJS 官方文档(其实除了三个必要参数其余都和 APlayer 原生参数一样)
2022年11月21日
472 阅读
1 评论
5 点赞