Hexo博客设置背景音乐

最新推荐文章于 2024-02-27 13:32:18 发布
最新推荐文章于 2024-02-27 13:32:18 发布
阅读量3.5k 收藏 16
点赞数 4
CC 4.0 BY-SA版权
分类专栏： 博客效果增强 文章标签： hexo
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_39800978/article/details/109407258
本文详细介绍了如何在HEXO的Next主题中添加背景音乐，包括在单篇博文中插入音乐播放器和创建全局菜单栏播放器。主要涉及使用网易云音乐HTML代码和Metingjs插件，以及如何获取歌单外链ID。此外，还提到了实现全局播放的步骤，并建议使用QQ音乐以支持全局跳转。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

本文讲解如何给HEXO的Next主题添加背景音乐，主要有以下应用场景：

  • 在单篇博文中添加音乐播放器
  • 在Next菜单栏添加一个全局的背景音乐播放器

下面详细展开……

1 网易云生成HTML代码

  • HEXO支持Markdown语法下直接解析HTML代码，故我们可以考虑利用网易云Iframe插件生成播放器
  • 第一步，在网页版网易云找到你想要的音乐，这里我以《The Fight Song》举例
image-20201030203523725
  • 第二步，点击《生成外链播放器》按钮并跳转，设置好高宽后复制粘贴HTML代码即可
image-20201030203811073

注：网易云现在只支持一首歌的外链播放器，一键式的歌单外链播放器被禁用了。

2 歌单外链播放器

  • 用Aplayer搭配Metingjs音乐插件生成歌单外链播放器

  • Aplayer是一个功能强大的HTML5音乐播放器，Metingjs基于Aplayer插件封装好的插件

  • 直接复制以下代码，更改里面的server、type、id等个性化配置参数即可

<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">

<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
<!-- require MetingJS-->

<script src=
最低0.47元/天 解锁文章

200万优质内容无限畅学
Hexo博客添加背景音乐
UstinianX的博客
09-10 3620
更好的阅读体验 Hexo添加音乐的方式有很多种，可供使用的插件也不少。NexT主题下内置音乐应该算比较简便的一种了 下面我将会提到数种方法，选择一种最合适的即可 1.直接插入到某一篇文章 iframe\text{iframe}iframe标签 相当的简单 先到网易云音乐中中搜出你想要的音乐，然后点击生成外链播放器 所需要的所有代码都在这个框框内了 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4Gz2ZvWI-1599749872629)(https://s1.ax1x.c
Hexo博客技巧：为博客插入音乐
Amnesia-Fu的博客
05-10 6687
前言 想要给博客添加音乐，最简单的方法便是利用第三方音乐平台提供的外链播放器，可是效果并不好，外观丑没歌词且体验极差。 如果使用Hexo-Tag-Aplayer插件的话这个问题就能很好地解决了。 原先 hexo-tag-aplayer 不支持 MetingJS，使得需要图片url，音乐url等等参数，操作起来都很麻烦，需要去音乐网站扒音乐播放链接或者下载下来存储在七牛云或本地。 但是3.0新版本的Aplayer已经支持MeingJS了，MetingJS 是基于Meting API 的 APlayer 衍生
【自搭博客系统篇四】：给博客添加音乐功能 hexo-tag-aplayer
ygxyvip的博客
02-27 2448
该操作针对hexo butterfly主题，其他主题可能有所不同至此，添加播放器成功，尽情享受吧。
hexo插入背景音乐
Alex的博客
09-25 1359
hexo插入音乐 可以到我的博客参考一下样式 两种方式： 单个音乐 歌单 第一种： 这种方式比较简单，直接到网易云搜索需要添加的背景音乐然后生成外链，将外链粘贴到sidebar.swig里边，可以切换粘贴位置以达到自己需要的效果。 这里随便找了首歌的外链粘了进去 vim /blog/themes/next/layout/_macro/sidebar.swig <iframe frameborder="no" border="0" marginwidth="0" marginheight="0"
hexo中插入音乐
thewindkee的博客
02-14 5006
前言从用QQ空间开始就喜欢插入背景音乐，如今自己管理自己的博客，当然也要插入音乐，不用开绿钻哈哈哈哈。关于主题我用的是yilia。添加音乐添加的网易云音乐，很方便。 打开网易云音乐某首歌详情页，点击生成外链播放器，选择iframe插件。选择好尺寸。复制html代码。如：<iframe frameborder="no" border="0" marginwidth="0" marginheight=
hexo 配置音乐播放器
Anubis
10-26 693
要支持音乐播放，在主题的 _config.yml 配置文件中激活 music 配置即可：# 是否在首页显示音乐 music: enable: true title: # 非吸底模式有效 enable: true show: 听听音乐 server: netease # require music platform: netease, tencent...
hexo博客中添加音乐播放器
买烤麸烤饼儿的博客
02-18 2082
1. 简介 本篇文章是介绍基于网易云iframe插件在hexo博客中加装音乐播放器的方法，无需安装任何额外插件。 2.安装步骤 在网易云音乐中打开你想要插入的音乐页面，点击 生成外联播放器。 在网页中调整好播放器插件后，复制下方的HTML代码。 如： <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/play
Hexo博客中插入音乐
热门推荐
Aileen-zl技术博客
07-01 1万+
1. 前言     正所谓没有逼格的博客不是好博客，而在自己搭建的博客里插入音乐或者视频能秒秒钟拉高博客的格调。Hexo作为一款优秀的静态博客生成器，当然也少不了这些吊炸天的功能。2. 准备工作     准备工作当然是你得把自己的博客得搭建好了。3. 装插件     首先我们需要通过命令行安装以下两款插件（当然装一个就可以了，如果一个实现不了再装另一个），这两款插件我们都可以从hexo的官方网站上查
hexo博客插入音乐播放器
soul7y的博客
04-26 2426
搭建好自己的博客之后，想要在博客中添加音乐播放器。需要hexo-tag-aplayer插件。 使用Git Bash进入本地hexo的文件夹。输入以下命令（异常或网络太慢可以考虑将npm换成cnpm） npm install --save hexo-tag-aplayer 然后在 Hexo 配置文件 _config.yml 中添加设置： 然后输入hexo new page playlist创建一...
Hexo博客yilia主题添加背景音乐 （网易云音乐）
AomanHao的博客
03-08 4243
添加背景音乐 1、 打开网易云音乐首页，然后搜索你要添加的背景音乐 http://music.163.com/ 2、 搜索到歌曲点击生成外链播放器，进去下一个界面 3、 复制外链播放器的代码 打开yilia主题下的_partial文件夹下的left-col.ejs文件 复制文件内容到最下端 红线内的iframe框为复制的...
hexo博客添加音乐 --- MetingJS
weixin_43405525的博客
08-18 4106
看一些比较长的博文的时候是不是感觉比较安静、枯燥呢？这时候如果能来一首音乐会不会更好？ 我们可以考虑给自己的博客添加一些音乐、歌单或专辑，让我们学习的同时还能放松自己! 给大家推荐几种方法哈 一、利用hexo-tag-aplayer插件 首先下载 hexo-tag-aplayer ,打开cmd运行下面指令 $ npm install hexo-tag-aplayer 安装完后，在你文章需要的地方加...
Hexo-Fluid主题添加音乐页面
林慕凡的博客
11-19 2917
效果预览：https://bynote.cn/playlist/ 如果你想使用音乐页面，很多人都会推荐安装hexo-tag-aplayer这款插件。 这款插件通过Hexo独有的标签外挂，我们可以很方便的写入一些参数，插件就会帮我们生成对应的html。 例如 ： 如果使用插件，在markdown中要这样写 {% meting "000PeZCQ1i4XVs" "tencent" "artist" "theme:#3F51B5" "mutex:true" "preload:auto" %} 其会被渲染为 &.
hexo+yilia添加背景音乐
荷塘月色
11-13 1496
介绍了2中背景音乐
踩坑记--hexo中加入音乐
Green523的博客
11-14 2625
我一直都想要做一个人博客。不久前，朋友推荐我来玩玩hexo，之后我就开始了自己的踩坑之旅……其实我用github+hexo搭建个人网站的时候挺顺利的，重在我修改next主题的默认样式以及加入小功能的时候，感觉有点费力。今天呢，我想讲讲我昨天是怎么把音乐给折腾出来的。 在我想要给我的博客加入音乐的时候，就搜罗了网上的解决办法，一种是用网易云音乐生成iframe插件,直接复制对应歌曲下方的html代...
给BLOG加入了“背景音乐”！
相忘江湖
07-03 3623
还是闲来无事，便想在BLOG的页面里加入背景音乐了。可是又不能上传背景音乐，只能引用别处的文件了。直接添加语句，在SRC里引用远程路径，不行！郁闷啊。无奈之时灵机一动，想到了我的个人主页空间，个人主页的首页便有背景音乐，既然有背景音乐的文件（.mid）存在免费空间上，那还不赶紧利用。于是写了一个极简单的页面上传到主页空间上，避免等会引用时，下载速度过慢，里面只有一行HTML语句：然后再在BLOG里
hexo插入音乐
weixin_40842539的博客
02-18 942
什么是APlayer https://aplayer.js.org/#/zh-Hans/ 安装 npm install aplayer --save 使用 找到node_modules下的aplayer 点进去，复制他的dist文件夹 复制到F:\blog\themes\yelee\source下 在dist文件夹下新建music.js music.js 代码 const ap = new...
hexo添加音乐
qq_35859750的博客
06-11 2683
前言：网易云音乐上有很多不错的歌曲，但是因为版权问题部分不能生成外链接。aplayer是github上的开源项目，最新的支持了MetingJS，强力推荐aplayer+MetingJS，支持多个平台。 网易云 生成音乐链接 打开
Hexo + Next 主题实现全局播放背景音乐
Luis
04-09 5586
欢迎访问我的博客：https://iluis.cn/ 第一种方式：使用网易云音乐插件 此种方式特点： 十分方便快捷 有版权保护的歌无法播放 1. 生成网易云歌单插件 为什么要创建歌单外链而不是创建歌曲外链：以后添加或者删除歌曲不用修改代码，直接在网易云歌单中操作即可。 步骤一：创建歌单并添加自己喜爱的歌曲 小贴士：若我们的歌单中添加了受网易云版权保护的歌，在博客中我们的歌单就GG了，要避...
Hexo中添加音乐（列表）、视频的代码
LXl491214的博客
07-14 760
Hexo中添加音乐（列表）、视频的代码
hexo 背景音乐多平台
最新发布
03-16
要在 Hexo 博客中实现背景音乐并确保其在多个平台上具有良好的兼容性，可以通过以下方式完成： #### 使用 APlayer 和 MetingJS 插件 Hexo 提供了一个名为 `hexo-tag-aplayer` 的插件[^2]，该插件基于 APlayer 库...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值