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

本文主要是介绍关于如何通过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博客网页添加网易音乐播放器(无需插件)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1011206

相关文章

问题-windows-VPN不正确关闭导致网页打不开

为什么会发生这类事情呢? 主要原因是关机之前vpn没有关掉导致的。 至于为什么没关掉vpn会导致网页打不开,我猜测是因为vpn建立的链接没被更改。 正确关掉vpn的时候,会把ip链接断掉,如果你不正确关掉,ip链接没有断掉,此时你vpn又是没启动的,没有域名解析,所以就打不开网站。 你可以在打不开网页的时候,把vpn打开,你会发现网络又可以登录了。 方法一 注意:方法一虽然方便,但是可能会有

人工智能做音乐

0 别人做的音乐demo https://yun.baidu.com/share/link?shareid=1799925478&uk=840708891 1 为什么人工智能能做音乐? 最下面蓝色的部分是你输入的音乐。 从上图可以看出,input是一个个的点,然后通过input来相互结合生成灰色的点,经过几层的连接之后,最后的Output就是新生成的音乐,也就是黄色的点。 把黄色的点

WordPress网创自动采集并发布插件

网创教程:WordPress插件网创自动采集并发布 阅读更新:随机添加文章的阅读数量,购买数量,喜欢数量。 使用插件注意事项 如果遇到404错误,请先检查并调整网站的伪静态设置,这是最常见的问题。需要定制化服务,请随时联系我。 本次更新内容 我们进行了多项更新和优化,主要包括: 界面设置:用户现在可以更便捷地设置文章分类和发布金额。代码优化:改进了采集和发布代码,提高了插件的稳定

vscode-创建vue3项目-修改暗黑主题-常见错误-element插件标签-用法涉及问题

文章目录 1.vscode创建运行编译vue3项目2.添加项目资源3.添加element-plus元素4.修改为暗黑主题4.1.在main.js主文件中引入暗黑样式4.2.添加自定义样式文件4.3.html页面html标签添加样式 5.常见错误5.1.未使用变量5.2.关闭typescript检查5.3.调试器支持5.4.允许未到达代码和未定义代码 6.element常用标签6.1.下拉列表

ROS2从入门到精通4-4:局部控制插件开发案例(以PID算法为例)

目录 0 专栏介绍1 控制插件编写模板1.1 构造控制插件类1.2 注册并导出插件1.3 编译与使用插件 2 基于PID的路径跟踪原理3 控制插件开发案例(PID算法)常见问题 0 专栏介绍 本专栏旨在通过对ROS2的系统学习,掌握ROS2底层基本分布式原理,并具有机器人建模和应用ROS2进行实际项目的开发和调试的工程能力。 🚀详情:《ROS2从入门到精通》 1 控制插

网页脚本输入这么简单

如何在网页中进行脚本操作呢? 研究了一下,很简单,用google浏览器的Console直接操作javaScript。思路: Created with Raphaël 2.1.0 开始 输入(如何输入) 点击(如何点击) 结束 下面是,通过脚本刷直播屏的实现,直接在Console输入即可 var words=new Arra

个人博客文章目录索引(持续更新中...)

文章目录 一、Java基础二、Java相关三、MySql基础四、Mybatis基础及源码五、MybatisPlus基础六、Spring基础及源码七、Tomcat源码八、SpringMVC基础及源码   随着文章数量多起来,每次着急翻找半天,而是新申请的域名下来了,决定整理下最近几年的文章目录索引。(红色标记为常检索文章) 一、Java基础 1、Java基础(一):语言概述2、J

做为技术人员为什么要写博客

原文链接:http://lusongsong.com/info/post/565.html

AI与音乐:当技术与艺术发生冲突

AI在创造还是毁掉音乐? 在科技日新月异的今天,人工智能(AI)已经渗透到了我们生活的方方面面,音乐领域也不例外。然而,尽管AI为音乐创作带来了前所未有的便利,我却深感其正在毁掉音乐的本质。 首先,AI的介入使得音乐创作过程变得过于机械化。传统的音乐创作往往需要音乐家们经过长时间的思考、尝试和修改,最终才能创作出触动人心的作品。这一过程不仅体现了音乐家的才华和技艺,更蕴含了他们对生活的感悟和对

uniapp 使用uview 插件

看创建项目版本vue2 、 vue3 Button 按钮 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架 1.  npm install uview-ui@2.0.36 2. // main.js,注意要在use方法之后执行import uView from 'uview-ui'Vue.use(uView)// 如此