如何在hexo博客添加音频

本文最后更新于：2 年前

在博客中插入音频，处于音频播放顺畅和音乐版权考虑，我们一般选择各个平台的在线音频，使用播放器进行在线播放，本地加载的话，github服务器缓存可能较慢

一、使用官方网站上获取的音频外链播放器

音乐网站一般会提供自家的音频外链播放器，便于其他平台集成，例如网易云音乐，在官网上搜索需要的音乐

image_1.png

点击音乐头像下面的生成外链播放器

image_2.png

将拿到的代码直接放入博文中即可，如下

1
2
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=28815250&auto=0&height=66">
</iframe>

这种方式简单快捷，但是iframe在iOS设备上效果不好，而且平台也会限制版权，有些版权存在争议的音频是不提供外链播放的，如果遇到的话，建议把对应的音频下载后上传到个人歌单，重新生成外链。

二、使用开源插件hexo-tag-aplayer

详细使用请参考插件文档，地址https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md

1
npm install --save hexo-tag-aplayer

三、使用播放器APlayer和插件APlayer-Typecho

方法一受限于音乐平台版权限制，方法二必须要直接调用音乐的播放url，而一般从音乐平台的页面上我们无法获取音频地址，所以方法三我们借助插件APlayer-Typecho来解析各大音乐平台的音频的地址

  1. 进入theme/主题/source目录下，新建文件夹dist

  2. 访问开源框架APlayer，地址https://github.com/MoePlayer/APlayer，下载源码将APlayer-master/dist目录下APlayer.min.css和APlayer.min.js文件拷贝到第一步新建的dist目录下

  3. 访问开源框架APlayer-Typecho，地址https://github.com/MoePlayer/APlayer-Typecho，下载源码，将APlayer-Typecho-master/assets目录下Meting.min.js文件拷贝到第一步的目录下

此时文件准备已完成，在博文中相应位置进行调用

1
2
3
4
5
6
<link rel="stylesheet" href="/dist/APlayer.min.css">
<script src="/dist/APlayer.min.js"></script>

<div class="aplayer" data-id="496298744" data-server="netease" data-type="song"></div>

<script src="/dist/Meting.min.js"></script>

其中div样式中的参数为需要展示的音频的参数，说明如下：

  1. class：播放器样式，指定固定值aplayer

  2. data-id：各平台对应的歌曲id值

  3. data-server：平台标识

  • netease：网易云
  • tencent：QQ
  • xiami：虾米
  • kugou：酷狗
  • baidu：百度
  1. data-type：音乐类型
  • song：单曲
  • album：专辑
  • playlist：歌单
  • search：搜索

更多参数说明请参考APlayer和APlayer-Typecho文档

当然，如果你不想每次重新引入js，你也可以找到主题中博文开始和结束的地方，修改博客源文件，将方法的引入放在博客框架中完成。