Back

Hugo|添加音频内容

Spotify / APlayer / SoundCloud

Spotify

本来想学一下Shortcode来嵌入Spotify的,然后发现,Spotify自己就有提供嵌入代码,复制粘贴就可以嵌入了,非常方便,但是有一点丑,而且不能听完整曲(播客除外)。

可以嵌入单曲、博客、专辑等,意思就是都可以嵌入,

嵌入

  • 方法:左键点击专辑封面 ‣ 分享 ‣ 嵌入曲目 ‣ 复制Embed Code
  • 有两种样式,紧凑的(80px)和普通的(380px)

示例

  • 单曲
  • 专辑
  • 播客 (最有用的)

APlayer

需要用到APlayerMetingJs,参考hugo搭建个人博客3-进阶设置中的设置方法。

添加依赖

路径:/layouts/partials/head/head.html

编辑head.html文件,添加下列代码

<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

似乎也可以在/data/external.yaml中直接增加,但是我没有加成功

设置Shortcode

/layouts/shortcodes 里创建music.html,贴入下面的代码:

<meting-js auto={{ .Get 0 }}></meting-js>

然后写文章的时候就可以通过这样来引入:

两个大括号<music  "https://music.163.com/song?id=30841781&">两个大括号

大括号:{{}}

链接支持网易云、QQ音乐等,网易云的链接需要删掉分享后面的userid,QQ音乐需要在官网搜索了之后复制,把songDetail改为song,然后添加后缀.html。其他具体的可以看MetingJs的Readme

示例

10/30 其实这里是有东西的。但是我今天发现在head.html里面加了依赖链接后,TOC就不能点击跳转了,于是删掉了。

  • 单曲

一首歌

  • 专辑/歌单

一个专辑

Soundcloud

刚又发现一个平台SoundCloud,可以听完整个曲子,有地区限制,而且样子不是很好看,一些网易云/QQ音乐没有的歌可以在这里找找看。

嵌入

通过iframe嵌入,在Share里面获得Embed code,有很多样式可选

示例

  • 单曲
Susceptible Cat · My little airport - 九龍公園游泳池
Susceptible Cat · My little airport - 九龍公園游泳池
  • 歌单
tammanching · My little airport
Last updated on Feb 06, 2022 12:30 UTC