Hexo博客添加背景音乐

最新推荐文章于 2025-01-17 15:21:34 发布
原创 最新推荐文章于 2025-01-17 15:21:34 发布 · 3.6k 阅读 · 12 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了在Hexo博客中添加背景音乐的多种方法，包括直接使用iframe或JavaScript标签插入音乐，安装Hexo-tag-Aplayer插件实现单篇文章内播放，以及通过修改配置文件在所有界面部署自动播放的音乐播放器。还详细讲解了如何创建歌单页面，并提供了配置示例和最终效果展示。

更好的阅读体验

Hexo添加音乐的方式有很多种，可供使用的插件也不少。NexT主题下内置音乐应该算比较简便的一种了

下面我将会提到数种方法，选择一种最合适的即可

1.直接插入到某一篇文章

iframe \text{iframe} iframe标签

相当的简单

先到网易云音乐中中搜出你想要的音乐，然后点击生成外链播放器

所需要的所有代码都在这个框框内了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4Gz2ZvWI-1599749872629)(https://s1.ax1x.com/2020/07/11/UQzKDs.png)]

然后把这个代码粘贴到你的文章的 .md \text{.md} .md文件中，就可以显示了

大概就是......这个样子的

JavaScript \text{JavaScript}

最低0.47元/天 解锁文章
Hexo博客中插入音乐
Aileen-zl技术博客
07-01 1万+
1. 前言     正所谓没有逼格的博客不是好博客，而在自己搭建的博客里插入音乐或者视频能秒秒钟拉高博客的格调。Hexo作为一款优秀的静态博客生成器，当然也少不了这些吊炸天的功能。2. 准备工作     准备工作当然是你得把自己的博客得搭建好了。3. 装插件     首先我们需要通过命令行安装以下两款插件（当然装一个就可以了，如果一个实现不了再装另一个），这两款插件我们都可以从hexo的官方网站上查
Hexo博客技巧：为博客插入音乐
Amnesia-Fu的博客
05-10 6795
前言 想要给博客添加音乐，最简单的方法便是利用第三方音乐平台提供的外链播放器，可是效果并不好，外观丑没歌词且体验极差。 如果使用Hexo-Tag-Aplayer插件的话这个问题就能很好地解决了。 原先 hexo-tag-aplayer 不支持 MetingJS，使得需要图片url，音乐url等等参数，操作起来都很麻烦，需要去音乐网站扒音乐播放链接或者下载下来存储在七牛云或本地。 但是3.0新版本的Aplayer已经支持MeingJS了，MetingJS 是基于Meting API 的 APlayer 衍生
Hexo + Next 主题实现全局播放背景音乐
Luis
04-09 5689
欢迎访问我的博客：https://iluis.cn/ 第一种方式：使用网易云音乐插件 此种方式特点： 十分方便快捷 有版权保护的歌无法播放 1. 生成网易云歌单插件 为什么要创建歌单外链而不是创建歌曲外链：以后添加或者删除歌曲不用修改代码，直接在网易云歌单中操作即可。 步骤一：创建歌单并添加自己喜爱的歌曲 小贴士：若我们的歌单中添加了受网易云版权保护的歌，在博客中我们的歌单就GG了，要避...
hexo插入背景音乐
Alex的博客
09-25 1392
hexo插入音乐 可以到我的博客参考一下样式 两种方式： 单个音乐 歌单 第一种： 这种方式比较简单，直接到网易云搜索需要添加的背景音乐然后生成外链，将外链粘贴到sidebar.swig里边，可以切换粘贴位置以达到自己需要的效果。 这里随便找了首歌的外链粘了进去 vim /blog/themes/next/layout/_macro/sidebar.swig <iframe frameborder="no" border="0" marginwidth="0" marginheight="0"
hexo中插入音乐
thewindkee的博客
02-14 5049
前言从用QQ空间开始就喜欢插入背景音乐，如今自己管理自己的博客，当然也要插入音乐，不用开绿钻哈哈哈哈。关于主题我用的是yilia。添加音乐添加的网易云音乐，很方便。 打开网易云音乐某首歌详情页，点击生成外链播放器，选择iframe插件。选择好尺寸。复制html代码。如：<iframe frameborder="no" border="0" marginwidth="0" marginheight=
hexo博客中添加音乐播放器
买烤麸烤饼儿的博客
02-18 2133
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-Fluid主题添加音乐页面
林慕凡的博客
11-19 2980
效果预览：https://bynote.cn/playlist/ 如果你想使用音乐页面，很多人都会推荐安装hexo-tag-aplayer这款插件。 这款插件通过Hexo独有的标签外挂，我们可以很方便的写入一些参数，插件就会帮我们生成对应的html。 例如 ： 如果使用插件，在markdown中要这样写 {% meting "000PeZCQ1i4XVs" "tencent" "artist" "theme:#3F51B5" "mutex:true" "preload:auto" %} 其会被渲染为 &.
Hexo博客设置背景音乐
qq_39800978的博客
10-31 3598
本文讲解如何给HEXO的Next主题添加背景音乐，主要有以下应用场景： 在单篇博文中添加音乐播放器 在Next菜单栏添加一个全局的背景音乐播放器 下面详细展开…… 1 网易云生成HTML代码 HEXO支持Markdown语法下直接解析HTML代码，故我们可以考虑利用网易云Iframe插件生成播放器 第一步，在网页版网易云找到你想要的音乐，这里我以《The Fight Song》举例 第二步，点击《生成外链播放器》按钮并跳转，设置好高宽后复制粘贴HTML代码即可 注：网易云现在只支持一首歌
给hexo博客next主题添加背景音乐
热门推荐
sourcod的博客
07-03 1万+
请访问我的个人博客 sourcod 我的hexo博客使用的是next主题所有次教程在next主题上修改。 修改 themes/next/layout/_macro/sidebar.swig 文件 添加音乐播放器内容 在 themes/next/_config.yml 配置文件中添加歌单地址配置 background_music: //music.163.com...
Hexo博客yilia主题添加背景音乐 （网易云音乐）
AomanHao的博客
03-08 4302
添加背景音乐 1、 打开网易云音乐首页，然后搜索你要添加的背景音乐 http://music.163.com/ 2、 搜索到歌曲点击生成外链播放器，进去下一个界面 3、 复制外链播放器的代码 打开yilia主题下的_partial文件夹下的left-col.ejs文件 复制文件内容到最下端 红线内的iframe框为复制的...
为Hexo添加音乐
foradawn的博客
12-31 3453
为Hexo添加音乐本来打算自己写个插件，无奈有点费时间，主要是后天要考试试啦，头有点大。于是使用了音乐外链播放器。一开始直接用的网易云单首歌曲的播放器,但是只能播放同一首歌曲，而且切换歌曲很麻烦，想着加个音乐搜索功能，然后发现有个更好的方式——使用歌单外链。但是打开网易云歌单会发现找不到歌单的外链，不过仔细看源码会发现有个歌单id，这样就够了 转自https://www.tiexo.cn/apl
hexo yilia主题添加音乐
枫之木落的博客
12-09 1382
1、生成网易云音乐外链播放器登录网页版网易云音乐，打开一首歌，点击 ”生成外链播放器“生产外链播放器代码，把代码粘贴到你想放的位置。 2、侧栏添加背景音乐打开/hexo/themes/yilia/layout/_partial/left-col.ejs文件，把音乐HTML代码粘贴进去，可以添加样式，改变大小，这是我的代码：<nav class="header-nav"> <div clas
Hexo+Butterfly主题博客添加音乐播放器的简单版教程
weixin_63549044的博客
03-04 3397
教你如何快速添加并使用博客音乐播放器
【自搭博客系统篇四】：给博客添加音乐功能 hexo-tag-aplayer
ygxyvip的博客
02-27 3024
该操作针对hexo butterfly主题，其他主题可能有所不同至此，添加播放器成功，尽情享受吧。
Hexo添加可控制网易云音乐播放器
weixin_46972634的博客
04-20 1220
1. 打开网易云网站音乐首页，复制选择的背景音乐分享外链网易云音乐 2. 引入播放器代码 在 themes/yilia/layout/_partial/left-col.ejs 文件nav标签中添加代码 注：放在<nav class="header-nav">和</nav>之内 这里添加了一些判断和表达式 <!-- 网易云音乐插件 --> <% if (theme.music && theme.music.enable){ %> <d
HexoNext添加网易云音乐
尘的博客
07-17 1116
添加网易云音乐 生成外链 修改模板文件 就是这个themes\next\layout\_macro\sidebar.swig 自己找个位置复制粘贴进去 我是放在那个最下面
Butterfly主题的hexo博客添加全局吸底的aplayer，并主要实现播放网页服务器本地音乐的功能
qq_60666531的博客
01-17 2250
本人的个人博客最近已经正式完成icp备案与公安备案，成功拿到域名并完成解析。这是本人博客的实际显示效果（包含播放器实现效果）：关于hexo博客添加aplayer的教程其实网上有很多，但基本都是连接到腾讯或者网易云平台的音源，导致付费VIP歌曲只能播放30秒，令我非常难受。我就希望能够实现aplayer播放我网页服务器本地上传上去的音乐mp3文件，但是网上相关教程非常少而且不明晰，或者是针对其他主题，又或者是无法实现这种简洁好看的全局吸底效果。
hexo 配置音乐播放器
Anubis
10-26 747
要支持音乐播放，在主题的 _config.yml 配置文件中激活 music 配置即可：# 是否在首页显示音乐 music: enable: true title: # 非吸底模式有效 enable: true show: 听听音乐 server: netease # require music platform: netease, tencent...
NexT主题添加音乐
DonLex 的博客
09-24 2491
在Hexo博客中添加音乐，有三种方式可以插入音乐 预览效果：https://donlex.cn/archives/bda67445.html 一、使用html标签 写法如下： &lt;audio src="https://什么什么什么.mp3" style="max-height :100%; max-width: 100%; display: block; margin-left: auto; ...
hexo 背景音乐多平台
最新发布
03-16
### Hexo 中实现背景音乐并多平台兼容的方法 要在 Hexo 博客中实现背景音乐并确保其在多个平台上具有良好的兼容性，可以通过以下方式完成： #### 使用 APlayer 和 MetingJS 插件 Hexo 提供了一个名为 `hexo-tag-aplayer` 的插件[^2]，该插件基于 APlayer 库开发，能够方便地将音乐播放器嵌入到博客的文章或页面中。APlayer 支持多种自定义选项，而 MetingJS 则可以从多个主流音乐平台（如网易云音乐、QQ 音乐等）获取歌曲数据。 安装此插件后，可以在 `_config.yml` 文件中配置全局参数或者通过 YAML Front Matter 设置特定页面的背景音乐。以下是具体操作步骤及相关代码示例： #### 安装必要的工具和库 1. **安装 hexo-tag-aplayer** 运行以下命令来安装插件： ```bash npm install --save hexo-tag-aplayer ``` 2. **引入 CDN 加速服务** 为了提升加载速度和减少服务器压力，推荐使用 jsDelivr 或其他类似的 CDN 来托管外部资源[^1]。修改主题布局文件中的 `<head>` 部分以包含如下脚本链接： ```html <!-- 引入 APlayer CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css"> <!-- 引入 APlayer JS --> <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script> <!-- 如果需要支持歌词显示，则还需加入 LRC 工具包 --> <script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script> ``` #### 添加背景音乐功能 编辑模板文件，在适当位置插入 APlayer 初始化代码片段。例如，如果希望整个网站都有统一的背景音效，可在 footer.ejs 中写入类似下面的内容： ```javascript var ap = new APlayer({ container: document.getElementById('aplayer'), // DOM容器ID fixed: true, // 是否固定悬浮窗模式 mini: false, // 启动迷你模式 autoplay: true, // 自动播放开关 (注意移动端浏览器通常禁用此项) theme: '#b7dbff', // 主题颜色 loop: 'all', // 循环模式(all/single/none) order: 'random', // 播放顺序(random/list) volume: 0.8, // 默认音量大小(范围0~1之间的小数形式表示百分比) listFolded: false, // 歌曲列表折叠状态(true/false) mutex: true, // 页面上只有一个实例可运行互斥机制生效 lrcType: 3, // 字幕类型编号说明见官方文档 audio: [ { name: '歌名', artist: '歌手名字', url: '/path/to/audio.mp3', // 替换为实际音频路径地址 cover: '/cover.jpg' // 可选封面图URL } ] }); ``` > 注意事项：由于部分手机端浏览器出于省电考虑会默认阻止网页内的媒体自动播放行为，因此即使设置了 `autoplay=true` 参数也可能无法正常工作。此时需引导访问者手动点击启动按钮触发首次播放动作。 另外还可以利用 Markdown 文档内部标记语法快速生成单条记录式的简单版播放控件: ```markdown {% aplayer "歌名" "/url/to/file.mp3" "/image/url.png" %} ``` 最后记得调整好合适的分辨率适配方案以便适应不同尺寸屏幕下的展示效果[^3]^。 --- ###
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值