在 markdown blog 里添加网易云音乐 iframe 播放器

Add a Netease Cloud Music iframe player to your markdown-based blog

Posted by Kowalski Dark on July 18, 2018

最近听到这首很棒的 宇宙を見上げて 想写到 blog 里。

这个站点基于 Jekyll 框架,blog 用 markdown 语法书写,记录一下如何向博文中添加网易云音乐的外链播放器。

本质上是用了 markdown 语法支持内嵌 HTML 这一特性。

网易云音乐 iframe 播放器

iframe 是一个 HTML 标签,网易云同时提供基于 HTML 和 flash 的外链播放器。

img1

生成外链播放器

img2

复制代码


	<iframe 
	 frameborder="no" 	
	 border="0" 
	 marginwidth="0" 
	 marginheight="0" 
	 width=330 
	 height=86 
	 src="//music.163.com/outchain/player?type=2&id=536624496&auto=1&height=66">
	</iframe>

改为


	<iframe 
	 frameborder="no" 	
	 border="0" 
	 marginwidth="0" 
	 marginheight="0" 
	 width="330" 
	 height="86" 
	 src="//music.163.com/outchain/player?type=2&id=536624496&auto=1&height=66">
	</iframe>

嵌入 markdown 文件,效果如下:

iframe 属性可自行更改。

其他

如有需要也可以直接向 HTML 网页中添加代码。

或者结合 JavaScript 写一个从 array 中获取 MusicID 的函数实现随机播放一组音乐中某一个的效果。

比如 Szhshp’s Code-3 Limbic Laboratory 中的 index.js