当前位置: 首页 > news >正文

关于如何通过APlayer+MetingJS为自己的wordpress博客网页添加网易音乐播放器(无需插件)

本文转自博主的个人博客:https://blog.zhumengmeng.work,欢迎大家前往查看。
原文链接:点我访问

在这里插入图片描述

序言:最近在网上冲浪,发现大家的博客大部分都有一个音乐播放器能够播放音乐,随机我也开始寻找解决方法。可是找来找去我却发现在wordpress上的大部分音乐播放器插件无法实现播放网易云歌单,但是皇天不负苦心人,我找到了APlayer和MetingJS。

一、介绍

  • Aplayer是一个简洁漂亮、功能强大的 Html5 音乐播放器,支持音乐信息、歌词、进度条、音量、顺序模式、循环模式,可以使用三方音乐外链,也可以使用自己的音乐链接。开源地址:https://github.com/DIYgod/APlayer
  • MetingJS 扩展了 APlayer.js 的功能,能够使 APlayer.js 加载网易云音乐、QQ 音乐、虾米音乐中的歌单。
    开源地址:https://github.com/metowolf/MetingJS

二、使用方法

打开wordpress后台管理页面,依次点击外观-小工具-添加-自定义HTML。

在这里插入图片描述

在编辑栏复制粘贴如下代码:

在这里插入图片描述

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
<meting-js style="color: #2980b9"class="meting"server="netease"type="playlist"volume="0.5"id="7723752305"autoplay="false"loop="all"order="list"preload="auto"list-folded="true"list-max-height="200px"lrc-type="0">
</meting-js>
</body>
</html>

效果如下图所示:

在这里插入图片描述

三、参数说明

参数默认值描述
idrequire歌曲 ID/歌单 ID/专辑 ID/搜索关键字
serverrequire音乐平台: netease, tencent, kugou, xiami, baidu
typerequire类型:song, playlist, album, search, artist
autooptions音乐链接,支持: netease, tencent, xiami
fixedfalse开启吸底模式
minifalse开启迷你模式
autoplayfalse自动播放,一般浏览器默认会阻止音频自动播放
theme#2980b9主题色
loopall音频循环播放,值:’all’、’one’、’none’
orderlist音频循环顺序,值:’list’,’random’
preloadauto音频预加载,值: ‘none’, ‘metadata’, ‘auto’
volume0.7默认音量,播放器会记住用户设置,用户自己设置音量后默认音量将失效
mutextrue防止同时播放多个播放器,当该播放器开始播放时暂停其他播放器
lrc-type0歌词类型
list-foldedfalse列表是否先折叠
list-max-height340px音频列表最大高度

大家可能会问一个问题,歌单 id 怎么找?浏览器里打开网易云官网并登录,找到自己的歌单,点击进去后,链接后面那串数字就是ID。

比如:https://music.163.com/#/my/m/music/playlist?id=7723752305,7723752305就是ID.

http://www.lryc.cn/news/360019.html

相关文章:

  • 架构师如何以打游戏的心态做开发?
  • 【WP|6】WordPress 主题开发详解
  • Kivy.garden.NavigationDrawer 后续学习
  • 【CVE-2021-3156】——漏洞复现、原理分析以及漏洞修复
  • Github 2024-05-31 Java开源项目日报 Top10
  • 【上海大学计算机组成原理实验报告】六、内存系统实验
  • C++:细谈Sleep和_sleep
  • CORS前端:深度解析跨域资源共享机制及其前端应用
  • React@16.x(15)PureComponent 和 memo
  • [C++11/14新特性] tuple元组介绍
  • 小熊家务帮day8-day9 客户管理模块2 (用户定位,地址簿,实名认证,银行卡信息上传等功能)
  • amis 事件动作 和 行为按钮 常用用法
  • 4K高刷显示器 - 蚂蚁电竞ANT27VU
  • 图解支付系统的渠道路由设计
  • Leecode---347:输出前k个高频元素(使用unordered_map)
  • k8s ceph(静态pvc)
  • Qt QScript 之 C++/JavaScript相互调用
  • 可能会引起空指针
  • Linux input输入子系统
  • dataworks调度参数
  • JavaScript第五讲:事件,条件循环语句,错误处理
  • BrainGPT1,一个帮你b站点歌放视频的多模态多轮对话模型
  • 带DSP音效处理D类数字功放TAS5805M中文资料
  • java中BigDecimal的比较
  • 张大哥笔记:你卖什么,就反着来卖
  • Nginx(openresty) 开启gzip压缩功能 提高web网站传输速度
  • nn.Embedding使用
  • Qt6 mathgl数学函数绘图
  • Nginx配置文件中静态资源文件禁止通过目录查看
  • 力扣Hot100-有效的括号(栈stack)