之前在文章中插入示例DEMO是通过异步加载codepen来实现的，但是受制于网络条件，有时候加载缓慢，甚至无法加载。就想着将一些简单的示例直接在Markdown中写为HTML代码输出到前端页面运行，可是这样一来，不仅让Markdown失去了严谨性和优美性，而且如果不小心写了一个可能污染全局的样式或者脚本，那就翻船咯~
但是Markdown最终是要转换成HTML的，因此只要在Markdown的转换过程中做点手脚，再配合上Shadow DOM这个魔法盒子将示例代码运行在一个沙箱中，问题就能得到解决。

前段时间写过一篇介绍简单音乐播放器效果开发的博文《为你的博客添加简单的CSS3音乐播放器》，实现了单曲循环播放效果，这个效果也是我的博客首页一直有的效果，同时文中也介绍了一些简单的HTML5 Audio标签的属性和方法，如 play() , paused()等。当然，之前的效果只适合诸如博客或者某个单页面（如专题页面）使用。而现在的可以称之为完整版的播放器弥补了之前的不足，增加了列表播放，音量控制，播放进度，播放时间以及播放模式，上一曲，下一曲等功能，除了歌词外，基本就是个播放器了（本来就是播放器）。

有网友@she在留言中询问本站音乐播放器如何实现，博客也好久没更新了，趁着清明放假有点时间，分享一下实现过程。这是一个很简单的播放器效果，界面主要利用CSS3的一些属性，如animation、translate、transform等，效果则利用Html5 Audio属性配合JS实现。播放器相对简洁且未实现列表播放、音量控制、歌词展示等相对复杂的功能，如需实现诸如酷狗音乐的播放器效果，请深入研究Audio。个人认为，该播放器足以满足博客等非音乐网站的需求。当然，诸如以往，以上包括这句都是废话：）