关于如何通过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.mzph.cn/diannao/20924.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

设计模式基础知识点(七大原则、UML类图)

Java设计模式&#xff08;设计模式七大原则、UML类图&#xff09; 设计模式的目的设计模式七大原则单一职能原则&#xff08;SingleResponsibility&#xff09;接口隔离原则&#xff08;InterfaceSegreation&#xff09;依赖倒转原则&#xff08;DependenceInversion&#xff0…

R语言绘图 --- 柱状图(Biorplot 开发日志 --- 3)

「写在前面」 在科研数据分析中我们会重复地绘制一些图形&#xff0c;如果代码管理不当经常就会忘记之前绘图的代码。于是我计划开发一个 R 包&#xff08;Biorplot&#xff09;&#xff0c;用来管理自己 R 语言绘图的代码。本系列文章用于记录 Biorplot 包开发日志。 相关链接…

目标检测——农业障碍物检测数据集

引言 亲爱的读者们&#xff0c;您是否在寻找某个特定的数据集&#xff0c;用于研究或项目实践&#xff1f;欢迎您在评论区留言&#xff0c;或者通过公众号私信告诉我&#xff0c;您想要的数据集的类型主题。小编会竭尽全力为您寻找&#xff0c;并在找到后第一时间与您分享。 …

Kubernetes——YAML文件编写

目录 一、创建Kubernetes对象YAML文件必备字段 1.apiVersion 2.kind 3.metadata 4.spec 二、YAML格式基本规范 1.结构表示 2.键值对 3.列表&#xff08;数组&#xff09; 4.字典&#xff08;映射&#xff09; 5.数据类型 6.注释 7.多文档支持 8.复杂结构 9.示例 …

Vuex 的安装与配置

聚沙成塔每天进步一点点 本文内容 ⭐ 专栏简介Vuex 的安装与配置1. 安装 Vuex使用 npm 安装使用 yarn 安装 2. 配置 Vuex创建和配置 store将 store 注入到 Vue 实例中 3. 在组件中使用 Vuex访问 State提交 Mutation分发 Action使用 Getter 原理解析小结 ⭐ 写在最后 ⭐ 专栏简介…

Proxmox 虚拟环境下1Panel Linux 服务器运维管理面板的安装

简介 以前安装服务器管理面板用的都是宝塔&#xff0c;今天发现 1Panel Linux 服务器运维管理面板也很好&#xff0c;面板清晰整洁&#xff0c;使用的技术比较先进&#xff0c;所以我决定亲自安装一下看看效果就竟如何&#xff1f; 1Panel Linux 服务器运维管理面板是一个开源…

vulhub中Jenkins CLI 接口任意文件读取漏洞复现(CVE-2024-23897)

Jenkins是一个开源的自动化服务器。 Jenkins使用[args4j](https://github.com/kohsuke/args4j)来解析命令行输入&#xff0c;并支持通过HTTP、Websocket等协议远程传入命令行参数。args4j中用户可以通过字符来加载任意文件&#xff0c;这导致攻击者可以通过该特性来读取服务器…

目标检测——植物幼种数据集

引言 亲爱的读者们&#xff0c;您是否在寻找某个特定的数据集&#xff0c;用于研究或项目实践&#xff1f;欢迎您在评论区留言&#xff0c;或者通过公众号私信告诉我&#xff0c;您想要的数据集的类型主题。小编会竭尽全力为您寻找&#xff0c;并在找到后第一时间与您分享。 …

推荐网站(19)anytools图片分辨率处理网站

今天&#xff0c;我要向您推荐一个非常实用的在线图片处理工具网站——AnyTools。这个网站提供了一站式的图片分辨率处理服务&#xff0c;并且具备添加各种过滤器的功能&#xff0c;非常适合需要快速调整图片大小和风格优化的场合。 多分辨率支持&#xff1a;用户可以自定义图片…

人工智能与【肿瘤免疫微环境】结合,探索免疫治疗的新方向|24年6月·顶刊速递·06-02

罗小罗同学说 24-06-02&#xff5c;文献速递 今天分享的文章&#xff0c;主题是——人工智能&肿瘤免疫微环境。解释一下这张图&#xff0c;左列是文献标题&#xff0c;右侧是发表的年月&#xff0c;放心&#xff0c;都是顶刊&#xff0c;不然我也不会选的。 PS&#xff1a…

力扣刷题--2085. 统计出现过一次的公共字符串【简单】

题目描述 给你两个字符串数组 words1 和 words2 &#xff0c;请你返回在两个字符串数组中 都恰好出现一次 的字符串的数目。 示例 1&#xff1a; 输入&#xff1a;words1 [“leetcode”,“is”,“amazing”,“as”,“is”], words2 [“amazing”,“leetcode”,“is”] 输出…

一键实现文件夹批量高效重命名:轻松运用随机一个字母命名,让文件管理焕然一新!

在数字化时代&#xff0c;文件夹管理是我们日常生活和工作中不可或缺的一部分。然而&#xff0c;随着文件数量的不断增加&#xff0c;文件夹命名的繁琐和重复成为了一个让人头疼的问题。你是否曾因为手动一个个重命名文件夹而感到枯燥乏味&#xff1f;你是否曾渴望有一种方法能…

开发一个comfyui的自定义节点-支持输入中文prompt

文章目录 目标功能开发环境实现过程翻译中文CLIP编码拓展仓库地址完整代码目标功能 目前comfyui的prompt提示词输入节点 CLIP Text Encode 只支持输入英文的prompt,而有时候我们需要自己制定一些prompt,所以就得将我们想要的提示词翻译为英文后再复制粘贴到该节点的输入框中…

RTA GMH系列 SERIE MOTION电机驱动板手侧 英文版

RTA GMH系列 SERIE MOTION电机驱动板手侧 英文版

【Python系列】Python的多返回值

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

C51学习归纳1 --- led点亮、led闪烁、led流水灯

第一节主要是针对LED的控制学习。这个过程中我们需要掌握的&#xff1a;1、控制的实现方法&#xff0c;控制实现的方法在后续的学习中是通用的。2、如何知道谁控制谁&#xff0c;通过查找开发板原理图获取&#xff0c;原理图的阅读的能力&#xff0c;在日后也是非常常用的。 一…

关于 c++ cout << endl; 的源码解释

这行语句非常常用。以前在王老师课上&#xff0c;老师提到过 endl 是一个函数模板。现给出这行语句的相关源码&#xff1a; 反汇编的依据如下&#xff1a; 接着是 谢谢

yolov8使用:数据格式转换(目标检测、图像分类)多目标跟踪

安装 yolov8地址&#xff1a;https://github.com/ultralytics/ultralytics git clone https://github.com/ultralytics/ultralytics.git安装环境&#xff1a; pip install ultralytics -i https://pypi.tuna.tsinghua.edu.cn/simple目标检测 标注格式转换 若使用 labelimg…

【PPT】根据字体大小自动缩放文本框大小

【PPT】根据字体大小自动缩放文本框大小 一般我们新建文本框输入文字后&#xff0c;文本框的大小是不会自动缩放的&#xff0c;是根据你一开始拖动的尺寸固定的 你可以设置文本框的长度随着文字的变化而自动调整。这样&#xff0c;无论你输入多少文字&#xff0c;文本框都会自…

pqgrid的使用

npm安装pqgrid npm install pqgridf --registryhttps://registry.npmmirror.com npm install jquery-ui --registryhttps://registry.npmmirror.comvue文件 <template><div><div id"grid_json"></div></div> </template><s…