如何在hexo中播放音乐

发表于 2022-09-14 更新于 2022-09-15 分类于 hexo Waline：本文字数： 1.5k 阅读时长 ≈ 1 分钟

之前一直觉得自己会不需要音乐播放这个功能，觉得太鸡肋了，但某一天又想加上，所以也配置上来了。

我这里用的是 APlayer播放器的 Hexo 标签插件hexo-tag-aplayer

example

meting 引用：

aplayer 引用：

### 食用方法

安装和配置官方文档里已经说的很清楚了，我就不赘述了

meting 的配置：

选项	默认值	描述
id	必须值	歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server	必须值	音乐平台: `netease` , `tencent` , `kugou` , `xiami` , `baidu`
type	必须值	`song` , `playlist` , `album` , `search` , `artist`

高级配置需要去看 aplayer说明文档！

这里有几点需要说明：

{% aplayer %} 和 {% meting %} 在一个页面中不可以同时使用，如果需要同时使用直接 {% aplayer %} 替换成 html+js代码

<div id='demo1'></div>
<script> 
    const ap = new APlayer({
    container: document.getElementById('demo1'),
    audio: [{
        name: '给我一首歌的时间',
        artist: '周杰伦',
        url: 'https://echeverra.cn/wp-content/uploads/2021/06/周杰伦-给我一首歌的时间.mp3',
        cover: 'https://echeverra.cn/wp-content/uploads/2021/06/周杰伦-给我一首歌的时间-mp3-image.png'
    }]
});
</script>

{% meting %} 适用于在大平台可以免费听的曲子，当涉及到一些付费歌曲，就不好使了
{% aplayer %} 则支持自己配置歌曲的URL，所以可以将一些付费歌曲上传到自己的服务器
- https://www.hifini.com/ 这是一个强大的下歌网站

为了在目录页也可以正常显示歌曲，需要在配置项添加

# 音乐播放器
aplayer:
  meting: true       # MetingJS 支持
  asset_inject: false

在本地部署时，偶尔会出现页面没有播放器的情况，刷新一下就好了，上线之后这种情况就不会出现了

当我配置完以上这些，追本溯源才发现 APlayer 竟然是DIYgod开发的，这是我从RSSHub的使用开始关注的一个技术博主，真是巧了。

看到大佬在开源社区做的东西能够被广泛使用，希望后面自己也有能力为开源社区做一份贡献~~

example

参考资料