当前位置: 首页 > 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.

相关文章:

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

本文转自博主的个人博客&#xff1a;https://blog.zhumengmeng.work,欢迎大家前往查看。 原文链接&#xff1a;点我访问 序言&#xff1a;最近在网上冲浪&#xff0c;发现大家的博客大部分都有一个音乐播放器能够播放音乐&#xff0c;随机我也开始寻找解决方法。可是找来找去我…...

架构师如何以打游戏的心态做开发?

为什么打游戏可以很好玩&#xff0c;能够自发学习&#xff0c;从青铜到黄金很简单。换个角度思考&#x1f914;&#xff0c;以打游戏的心态如何进行架构开发&#xff0c;可以采用以下策略&#xff1a; 设定目标和里程碑&#xff1a; 就像游戏中的任务和关卡一样&#xff0c;为…...

【WP|6】WordPress 主题开发详解

WordPress主题开发是打造独特、功能强大的网站的重要途径。无论是创建全新的主题还是对现有主题进行自定义&#xff0c;掌握主题开发技能都是非常重要的。本文将详细讲解 WordPress 主题开发的基本步骤、文件结构、模板层次以及一些高级技巧&#xff0c;帮助你从零开始创建一个…...

Kivy.garden.NavigationDrawer 后续学习

如百词斩部分代码 MRWord\pages\infopage\info.kv <InfoPage>:anim_type: slide_above_simpleid: main_winbox_button_anchor: box_button_anchor.__self__three_labels_box: three_labels_box.__self__box_phonetic: box_phonetic.__self__BoxLayout:BoxLayout:id: ma…...

【CVE-2021-3156】——漏洞复现、原理分析以及漏洞修复

文章目录 前言1、漏洞概述2、漏洞复现2.1、漏洞复现测试环境2.2、漏洞复现具体步骤 3、漏洞原理3.1、前置知识3.1.1、sudo3.1.2、sudoedit3.1.3、转义字符 3.2、漏洞分析 4、漏洞修复5、参考文献总结 前言 2021年01月27日&#xff0c;RedHat官方发布了Sudo缓冲区/栈溢出漏洞的风…...

Github 2024-05-31 Java开源项目日报 Top10

根据Github Trendings的统计,今日(2024-05-31统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Java项目10TypeScript项目1JavaGuide - Java 程序员学习和面试指南 创建周期:2118 天开发语言:Java协议类型:Apache License 2.0Star数量:1…...

【上海大学计算机组成原理实验报告】六、内存系统实验

一、实验目的 学习内存访问机制。理解代码和数据的分区存放原理和技术。 二、实验原理 根据实验指导书的相关内容&#xff0c;地址寄存器MAR用来存放要进行读或写的存储器EM的地址。其内容经数据总线DBUS写入&#xff0c;因此必须在数据总线上具有数据后&#xff0c;配合MAR允…...

C++:细谈Sleep和_sleep

ZINCFFO的提醒 还记得上上上上上上上上上上上上上上上上上上&#xff08;上的个数是真实的&#xff09;篇文章吗&#xff1f; 随机应变——Sleep()和_sleep() 但在ZINCFFO的C怪谈-02中&#xff1a; 我不喜欢Sleep...... 奤&#xff1f;媜煞鷥&#xff01; 整活&#xff01;…...

CORS前端:深度解析跨域资源共享机制及其前端应用

CORS前端&#xff1a;深度解析跨域资源共享机制及其前端应用 在前端开发领域&#xff0c;CORS&#xff08;跨源资源共享&#xff09;是一个不可或缺的概念。它允许网页应用在不同的源&#xff08;域、协议或端口&#xff09;之间进行资源请求和共享&#xff0c;从而打破了同源…...

React@16.x(15)PureComponent 和 memo

目录 1&#xff0c;什么是 PureComponent2&#xff0c;什么是 memo3&#xff0c;举例3.2&#xff0c;优化13.1&#xff0c;优化2-函数位置 4&#xff0c;注意点4.1&#xff0c;为了提升效率&#xff0c;应该尽量使用 PureComponent4.2&#xff0c;不要直接改变之前的状态&#…...

[C++11/14新特性] tuple元组介绍

C11 标准新引入了一种类模板&#xff0c;命名为 tuple&#xff08;中文可直译为元组&#xff09;。tuple 最大的特点是&#xff1a;实例化的对象可以存储任意数量、任意类型的数据。tuple 的应用场景很广泛&#xff0c;例如当需要存储多个不同类型的元素时&#xff0c;可以使用…...

小熊家务帮day8-day9 客户管理模块2 (用户定位,地址簿,实名认证,银行卡信息上传等功能)

客户管理模块 0.用户定位功能0.1 需求0.2 接口分析0.3 接口开发Controller层开发Service层开发 1.我的地址簿功能1.1 需求1.2 数据库设计1.3 新增地址簿1.3.1 接口设计1.3.2 接口开发Controller层开发Service层开发测试功能 1.4 地址簿查询1.4.1 接口设计1.4.2 接口开发Control…...

amis 事件动作 和 行为按钮 常用用法

行为按钮 action &#xff08;仅是对click事件的处理&#xff09; actionType&#xff1a;这是 action 最核心的配置&#xff0c;来指定该 action 的作用类型&#xff0c;支持&#xff1a;ajax、link、url、drawer、dialog、confirm、cancel、prev、next、copy、close。 Butt…...

4K高刷显示器 - 蚂蚁电竞ANT27VU

可以毫不夸张地说&#xff0c;每一局游戏最终能够取得胜利&#xff0c;实际上都与一套极为优秀的电竞 PC 有着紧密的关联&#xff0c;因为其能够提供强大的性能支持与流畅的体验。同样的道理&#xff0c;一套优秀的电竞 PC 若想发挥出最佳的效果&#xff0c;那也都离不开一台能…...

图解支付系统的渠道路由设计

大家好&#xff0c;我是隐墨星辰&#xff0c;今天和大家聊聊渠道路由设计。 这篇文章主要讲清楚&#xff1a;渠道路由是什么&#xff0c;为什么需要渠道路由&#xff0c;渠道路由的几种形态&#xff0c;一个简洁而实用的基于规则的渠道路由设计。 注&#xff1a;有些公司称渠…...

Leecode---347:输出前k个高频元素(使用unordered_map)

题目&#xff1a; 给你一个整数数组 nums 和一个整数 k &#xff0c;请你返回其中出现频率前 k 高的元素。你可以按 任意顺序 返回答案。 思路&#xff1a; 三步&#xff1a; 1、用map来记录每个元素出现的次数 2、按map中的值大小排序&#xff0c;先让其有序&#xff0c;再逆…...

k8s ceph(静态pvc)

1.在 Kubernetes 节点上安装ceph-common 包。这个包包含了连接到 Ceph 集群所需的工具和库。可以使用以下命令在每个节点上安装&#xff1a; sudo apt-get install ceph-common2.在 Kubernetes 中创建一个 Secret 对象&#xff0c;用于存储连接到 Ceph 集群所需的密钥和配置信息…...

Qt QScript 之 C++/JavaScript相互调用

文章目录 Qt Script什么是ECMAScriptQt 中JavaScriptclass 详解Basic UsageQObject对脚本引擎可用使用信号槽connect 三种模式访问属性, 子对象使c++对象可用于用Qt Script编写的脚本C++ 类成员函数可用于脚本C++ 类属性可用于脚本对脚本中的c++对象信号的反应函数对象和本机函…...

可能会引起空指针

PreparedStatement preparedStatement null; preparedStatement conn.prepareStatement(sql); 如果直接下面这个可能会赋值给空指针 因为要在try{}和catch{}里面都用,所以要定义在try外面为null //如果只是测试,可以PreparedStatement preparedStatement conn.prepareSta…...

Linux input输入子系统

Linux input 更多内容可以查看我的github Linux输入子系统框架 Linux输入子系统由驱动层、核心层、事件处理层三部分组成。 驱动层&#xff1a;输入设备的具体驱动程序&#xff0c;负责与具体的硬件设备进行交互&#xff0c;并将底层的硬件输入转化为统一的事件形式&#xff…...

SNAP小白必看:哨兵1 SLC数据预处理全流程详解(附避坑指南)

SNAP小白必看&#xff1a;哨兵1 SLC数据预处理全流程详解&#xff08;附避坑指南&#xff09; 在遥感数据处理领域&#xff0c;哨兵1号卫星提供的SLC&#xff08;Single Look Complex&#xff09;数据因其高分辨率和极化信息&#xff0c;成为地表监测、灾害评估等领域的重要数据…...

Apache Arrow Rust社区与生态:参与开源项目的最佳路径

Apache Arrow Rust社区与生态&#xff1a;参与开源项目的最佳路径 【免费下载链接】arrow-rs Apache Arrow Rust: 一个Rust语言实现的Apache Arrow数据交换格式&#xff0c;可用于高效地在不同计算引擎之间传输和操作大规模数据。它支持多种数据类型和编码方式&#xff0c;并提…...

突破透明动画性能瓶颈:VAP引擎实现移动端高效视觉体验

突破透明动画性能瓶颈&#xff1a;VAP引擎实现移动端高效视觉体验 【免费下载链接】vap VAP是企鹅电竞开发&#xff0c;用于播放特效动画的实现方案。具有高压缩率、硬件解码等优点。同时支持 iOS,Android,Web 平台。 项目地址: https://gitcode.com/gh_mirrors/va/vap …...

OpenClaw性能调优:Qwen3-32B镜像的批处理与并发控制

OpenClaw性能调优&#xff1a;Qwen3-32B镜像的批处理与并发控制 1. 为什么需要性能调优 当我第一次在RTX4090D上部署Qwen3-32B模型并接入OpenClaw时&#xff0c;本以为24GB显存足以应对各种任务。但现实很快给了我一记重拳——当我尝试批量处理100个文档时&#xff0c;系统不…...

CentOS7 下 Go 多版本管理与无缝升级指南

1. 为什么需要Go多版本管理&#xff1f; 在CentOS7系统上开发Go项目时&#xff0c;经常会遇到这样的尴尬&#xff1a;新项目需要用最新版Go的特性&#xff0c;而老项目必须跑在特定旧版本上才能兼容。我去年就踩过这个坑——用Go 1.21写完的微服务&#xff0c;部署到生产环境发…...

手柄硬件校准与操控优化:从故障排查到竞技级设置的实战手册

手柄硬件校准与操控优化&#xff1a;从故障排查到竞技级设置的实战手册 【免费下载链接】DS4Windows Like those other ds4tools, but sexier 项目地址: https://gitcode.com/gh_mirrors/ds/DS4Windows 在《艾尔登法环》的 boss 战中&#xff0c;角色总是不受控制地缓慢…...

Windows Server远程管理新选择:一键脚本部署noVNC服务端(含开机自启配置)

Windows Server远程管理新选择&#xff1a;一键脚本部署noVNC服务端&#xff08;含开机自启配置&#xff09; 对于需要管理Windows Server的系统管理员来说&#xff0c;远程访问是不可或缺的功能。传统的RDP虽然稳定&#xff0c;但在某些场景下可能受限&#xff0c;比如网络环境…...

探索Unity全功能的开源方案:UniHacker跨平台功能扩展工具深度指南

探索Unity全功能的开源方案&#xff1a;UniHacker跨平台功能扩展工具深度指南 【免费下载链接】UniHacker 为Windows、MacOS、Linux和Docker修补所有版本的Unity3D和UnityHub 项目地址: https://gitcode.com/GitHub_Trending/un/UniHacker Unity作为游戏开发领域的行业标…...

AI虚拟员工平台完整搭建教程:从源码获取到正式上线,全流程记录

温馨提示&#xff1a;文末有资源获取方式最近AI赛道又火了一个新方向&#xff0c;很多人都在讨论&#xff0c;但真正能用起来的没几个。技术门槛摆在那&#xff0c;普通用户想上手确实不容易。今天这篇教程&#xff0c;我把从源码部署到正式上线的完整过程整理出来&#xff0c;…...

Multisim电路设计避坑指南:红绿灯项目里那些容易忽略的时序与驱动问题

Multisim电路设计避坑指南&#xff1a;红绿灯项目里那些容易忽略的时序与驱动问题 当你第一次在Multisim中完成红绿灯控制电路的设计时&#xff0c;那种成就感确实令人兴奋。但很快&#xff0c;你可能就会遇到一些令人头疼的问题&#xff1a;黄灯闪烁频率不稳定、倒计时显示乱跳…...