在Notion博客中插入音乐

type

Post

status

Published

date

Oct 29, 2022

slug

how-to-add-music-in-notion

summary

利用simple-notion-widgets在notion 博客中插入音乐

category

技术分享

icon

password

Property

Oct 29, 2022 02:05 PM

最近想在博客中插入音乐。用 NotionNext 搭建博客有个好处，得益于 Notion 本身的强大 Embed 功能，可以直接插入 Spotfiy 的音乐。在 Spotify 中复制歌曲链接后，notion 输入/embed 粘贴链接即可。

插入 Spotify 音乐的效果，不一定显示的出来

不过在实际使用过程中，有两个问题：一是 Spotify 播放器界面在非科学上网情况下，显示不出来；二是可能出于版权保护，每首歌都不是完整版，只能 preview 20-30s。所以即使我是尊贵的 Spotify 会员🤪也只好作罢。

后来不经意发现有个大佬做了notion 上的音乐小组件，基于 Aplayer & MetingJS，支持网易云音乐和 QQ 音乐的免费歌曲，完美解决了上面的两个问题。除此之外，该小组件还支持列表、专辑、歌手、搜索播放，暗黑模式，调整色调，调整组件尺寸等功能。

使用方法也是在 notion 中 embed 链接，只是这个链接无法直接从QQ/网音乐播放器中直接复制，需要手动调整一些内容。

以网易云音乐上的陈奕迅《Solidays 新曲+精选》专辑为例👇

🎶

https://notion.busiyi.world/music-player/?server=netease&type=album&id=6394&list-max-height=96

https://notion.busiyi.world/music-player/? 这部分保持不变，server= 后填入tencent或者netease，取决于你的音乐来源于哪个平台，前者代表 QQ 音乐，后者代表网易云音乐。type= 后填入类型👉song, playlist, album, search, artist ，取决于你想插入的是歌曲、播放列表、专辑、搜素结果还是歌手。id= 后面填入音乐平台链接中对应的 ID，例子中的专辑页面链接为https://music.163.com/#/album?id=6394 这里的 id 应该填 6394 。后面的list-max-height 属性表示列表最大高度，播放列表中的一首歌高度大约 32，所以上面的案例中仅显示了三首歌。还有更多属性可以自行设置👇

option	default	description
server	require	音乐平台 `netease`, `tencent`
type	require	类型 `song`, `playlist`, `album`, `search`, `artist`
id	require	`song id` `playlist id` `album id` `search keyword` `artist`
dark	`false`	黑暗模式，加上 `dark` 就会生效，不用 `dark=true`
theme	`#2980b9`	主色调，不包括背景色
loop	`all`	循环模式 `all`, `one`, `none`
order	`list`	播放顺序 `list`, `random`
preload	`auto`	预加载 `none`, `metadata`, `auto`
volume	`0.7`	默认音量，如果手动修改了音量，则该设置无效
list-folded	`false`	列表默认折叠
list-max-height	`340px`	列表最大高度
storage-name	`metingjs`	存储播放器设置的 localStorage key

更多的使用介绍详见原作者页面👉