category
tags
type
status
slug
date
summary
icon
password
嵌入网页播放器
notion支持嵌入一切在线网页,所以您只需嵌入一个可自动播放的网页就可以了
下面选择的是网易云音乐生成外链播放器方式嵌入notion
- 选择喜欢的音乐或歌单,点击生成外链播放器
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F71db2c29-4aa0-4eed-b8b6-40707045edda%2FUntitled.png?table=block&id=0355c592-5063-4892-ae15-fee37f144131&t=0355c592-5063-4892-ae15-fee37f144131&width=432&cache=v2)
![勾选自动播放](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F36ac9fdf-0760-46a3-ba31-3ef6ccf9242f%2FUntitled.png?table=block&id=b4e3453b-a5d3-4426-b70f-0b5bd3249c32&t=b4e3453b-a5d3-4426-b70f-0b5bd3249c32&width=432&cache=v2)
自动播放
- 得到嵌入代码,拷贝src
- 链接嵌入notion,选择Create Embed
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fd377a5a7-915e-4f43-b784-206cbea5cac8%2FUntitled.png?table=block&id=a3efe8b0-330a-4ca9-8bcf-c04017602845&t=a3efe8b0-330a-4ca9-8bcf-c04017602845&width=930&cache=v2)
兼容性问题
测试后发现,嵌入后无法显示一个播放器,而是显示一个无法被读取的网页,如下图:
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Faf81582b-60a9-42b4-b241-a3a7a209a167%2FUntitled.png?table=block&id=0f5e0054-f537-49e4-b6ca-f9d7c6774177&t=0f5e0054-f537-49e4-b6ca-f9d7c6774177&width=1596&cache=v2)
原因:Notion有强大且开放的 Embed 功能,但是并没有针对国内的音乐平台、视频平台进行优化,使得无法嵌入其中。
快速解决
为了解决这个问题,我们可以使用simple-notion-widgets工具,该项目作者基于 Aplayer 和 Dplayer 做了两个小组件,可以自动解析 QQ 音乐,网易云音乐的歌曲,专辑,以及歌单,还可以解析 B 站 1080P 的视频,并提供了众多设置选项(视频播放器暂时不开放)。
使用方法
找到qq音乐网页浏览器中的链接,将网址后的一串ID粘贴其后,注意加上.html
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fecc52e17-e3e4-4dd3-a390-c3d3364584af%2FUntitled.png?table=block&id=4ec65200-ca6b-4018-9599-4e91ff203591&t=4ec65200-ca6b-4018-9599-4e91ff203591&width=336&cache=v2)
这样音乐就嵌入成功了。
按照官方文档的方式,也可以使用id作为参数拼接效果也是一样的:示例:https://simple-notion-widgets.vercel.app/music-player/index.html?id=
001RGrEX3ija5X
&server=tencent&type=song&autoplay=true- 更多调用方式,参考原网站
- 作者:Tangly
- 链接:https://blog.tangly1024.com/article/notion-embed-background-music
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。