在notion中内嵌音乐 | VenDream’s Blog

type

status

date

May 26, 2023 07:04 AM

slug

summary

背景

目前，notion支持通过embed的方式内嵌网页，通过此方式可以在文章中引入各种各样的小挂件，其中便包括内嵌背景音乐。

遗憾的是，notion embed对国内音乐平台的支持不太友好（参考此issue），这时就需要借助第三方工具了。

基于上述问题，目前比较推荐的第三方工具是APlayer与Meting的组合。

项目	Github	简述
APlayer	https://github.com/DIYgod/APlayer	支持丰富选项的H5音频播放器
Meting	https://github.com/metowolf/Meting	基于PHP实现，支持多平台的音乐API框架
MetingJS	https://github.com/metowolf/MetingJS	连接`APlayer`与`Meting`的插件

综合分析上述项目功能可知，我们可以实现一个简易的页面，通过url传参的方式，调用MetingAPI获取指定平台的歌曲信息（包含歌曲链接、歌曲封面、歌词等），再传递给APlayer进行播放器UI渲染与音频播放。

大概的流程如下：

在了解了大概的实现原理后，我们还需要实现上图中的webview以串联各个依赖项。

可以考虑使用github上现有的实现：

支持vercel一键部署，得到具体的vercel域名后就可以接入使用。

点击展开

💡

这里使用了我自己部署的vercel域名与injahow部署的MetingAPI服务。

另外，指的注意的是，目前MetingAPI暂不支持解析付费歌曲与VIP歌曲，需要额外的cookie配置。