如何在hexo中播放音乐

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

我这里用的是 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代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <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,所以可以将一些付费歌曲上传到自己的服务器

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

    1
    2
    3
    4
    # 音乐播放器
    aplayer:
    meting: true # MetingJS 支持
    asset_inject: false
  • 在本地部署时,偶尔会出现页面没有播放器的情况,刷新一下就好了,上线之后这种情况就不会出现了

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

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

参考资料