https://imnerd.org/tags/html.htmlRecent content in Html on 怡红院落zh-CN© 2021Sat, 16 Nov 2013 20:23:00 +0800https://imnerd.org/originaleditor-plugin-for-typecho.html2013-08-16https://imnerd.org/originaleditor-plugin-for-typecho.htmlTypecho升级到0.9改用Markdown作为编辑器是一件令人高兴的事情。但是有些事情总是不能两全其美，一部分人正在高兴的同时，也有一小撮同志在埋怨Markdown编辑器怎么怎么不好用，怎么怎么难用，怎么怎么多的BUG。介于官方众口难调的情况，我就答应论坛的@sujianlin 做了这款插件。 插件的作用插件名字已经表达的非常明白了：让编辑器回归原始。说白了就是去除了0.9版的Markdown编辑器（包括后台的编辑器和前台网页的解析），回到0.8以前的HTML MODEL。插件没有多做测试，如果有问题的话请及时反馈。 最后说一句，我爱Markdown，你们根本不知道Markdown配上快捷键是有多么的好用！以上！ toc: true authors: [’lizheming'] 本插件紧急升级至1.0.1版，修复插件无法安装的问题。实践告诉我们，千万别手贱啊！ 下载地址：BOX | 百度云https://imnerd.org/pmblog.html2013-03-15https://imnerd.org/pmblog.html PMBlog是我最近写个一个markdown静态化输出的小程序。目前能够实现发布文章和页面，自定义模板等基本功能。虽然PHP干这活可能亚历山大，不过PHP搭配起来简单而且做中小型博客的话应该是没有问题的。 目前更新到4.0版，采用权限的模板引擎Twig，并更换仓库到Github上，欢迎大家继续使用。 官方站点：http://lizheming.github.io/PMBlog 项目地址：http://github.com/lizheming/PMBlog 官方站点：http://lizheming.gitcafe.com 项目地址：HTTPS://GitCafe.com/lizheming/PMBlog 安装方法 搭配本地PHP环境 下载代码并修改config.php 访问index.php即会在html目录生成静态文件 Markdown文件书写规则 默认文件名是输出的静态页面的文件名，即'hello-world.md'将会生成'hello-world.html'。另外不推荐使用中文名作为文件名。 markdown(以下简称md）文件支持一些自定义字段。 文件开头输入"title: Hello World"即可自定义文章标题为"Hello World"（必写字段） "date: 2013年2月11日"即可自定义文章发布时间，如果不定义此字段程序会返回文件的创建时间为文章发布时间（可选字段） "type: page"即可自定义本篇文章为页面，此字段只接受page/post两个参数，不定义此字段默认返回为post（可选字段） "status: draft"即可自定义本篇文章为草稿，定义为草稿的文章将不被程序输出。此字段只接受draft一个参数，非该参数无效。不定义此字段则默认该文章为发布状态（可选字段） "tags: tag1, tag2"即可自定义该文章的关键词，各个关键词之间使用半角逗号分开（可选字段） 也就是说目前最简单的写法就是只要定义一个"title:"字段然后开始正文就好了。https://imnerd.org/@player-lyric-by-audio.html2013-10-29https://imnerd.org/@player-lyric-by-audio.html今天群里的小胖说用<audio>标签写了个听评书的网页给父母用，技术实在是低级真心非常有孝心的说！然后我也顺带去了解了一下audio标签现在的支持情况，一不小心就脑补了一些新知识。看到了audio标签有duration属性和currentTime属性，分别用来读取歌曲总时间和当前播放时间，正好弥补了我之前想写播放器同步显示歌词一直卡在的如何获取播放时间的问题上。所以就开始操刀了。 歌曲和歌词的准备 我暂时是写到了之前的虾米搜索页面里面，实现搜索获得歌曲用audio标签播放并显示歌词。所以歌曲和歌词文件自然就来自盗版帝国虾米了。由于虾米的歌曲文件都是MP3格式的，所以悲剧如FireFox等虽然支持了HTML5但是不支持MP3格式的文件这让我也是感到很捉急的，所以暂时是推荐大家使用Chrome浏览器制作并访问的。关于目前各浏览器的支持情况可以看这里：居然连IE都支持了！这里利用了一下虾米的API：http://www.xiami.com/song/playlist/id/歌曲ID 获取歌曲的相关信息，其中就有歌曲地址和歌词。获取到的XML文件中，歌曲地址是加密放置的，至于解析原理，大家可以参见虾米音乐文件绝对地址解析。详细的解释一下就是： 获取到的字符串第一个字母是矩阵的行数，除去第一个字母的字符总数除以行数得到的整数是每行放置多少个字符，余数则是前余数行要在末尾多放置一个字符。这样就能组成引文中的矩阵了。按照竖行读取，^替换为0的处理后就可以获得绝对地址了。 懒惰如我为了方便自己，我把解析的过程写成了函数。最开始我是将字符串打散成为二维数组，然后嵌套循环连接字符串。后来觉得打散成一位数组应该会更方便一点，所以为了算获取数组索引顺序的规律，死了好多个脑细胞啊，果然数学已经忘到姥姥家了。 歌词由于后期要用js处理，js又不能跨域获取什么的。所以只能劳烦PHP获取到歌词地址后远程抓取过来了。以上解析得到绝对地址和歌词都是在服务器端完成的。我写成了API的形式，https://imnerd.org/lab/search/api.php?id=歌曲ID可以查看获取到的内容格式。 audio歌曲播放与暂停 果然我还是对解码什么的比较感兴趣，一不小心就偏题了呢。好啦好啦，以上都不应该是本文的重点啦，下面我们开始好好的蹂躏学习一下audio标签啦。audio标签的简单写法为 <audio src="歌曲地址"></audio> 控制歌曲的播放和暂停也是非常简单的，只要利用play()和pause()事件就好了，代码如下： m = document.getElementsByTagName('audio')[0]; m.play(); //歌曲的播放 m.pause(); //歌曲的暂停 想要了解更多audio标签的属性和事件的话可以点击这里：HTML 5 视频/音频参考手册 同步显示歌词的实现 我在开头已经讲了，audio的currentTime属性可以获取当前播放时间。又如果你刚才有去点击上面的参考手册的链接的话，你就会发现audio还有一个神奇的timeupdate事件，目的是当目前的播放位置已更改时做出动作。也就是说我们可以利用timeupdate事件在currentTime变化的时候做出判断，然后放置相应的歌词。 基本方法大概就是这个样子，播放器的当前播放时间我们已经获取到了，剩下的就是获取歌词的播放时间的问题了。由于标准的歌词每行应该是“[你好我是播放时间，我的格式是分:秒]你好我是该播放时间下的歌词”这种格式的，想必大家早就了解了吧。利用正则获取split分割等一系列方法将歌词分割成一个二维数组，一纬为每行歌词，二维为每行歌词的时间和每行歌词的内容。其中歌词的时间由于是分钟：秒的形式，需要转化为单位为秒的数字。下面给出歌词转化为二维数组的方法。方法可能坑爹不是最好的，但是基本凑合，这一部分大家可以随意发挥： //写成函数的形式大家可能会更好理解一点 function parseLyric(text) { lyric = text.split('\r\n'); //先按行分割 var _l = lyric.length; //获取歌词行数 lrc = new Array(); //新建一个数组存放最后结果 for(i=0;i<_l;i++) { var d = lyric[i].match(/\[\d{2}:\d{2}((\.|\:)\d{2})\]/g); //正则匹配播放时间 var t = lyric[i].split(d); //以时间为分割点分割每行歌词，数组最后一个为歌词正文 if(d != null) { //过滤掉空行等非歌词正文部分 //换算时间，保留两位小数 var dt = String(d).split(':'); //不知道为什么一定要转换时间为字符串之后才能split，难道之前正则获取的时间已经不是字符串了么？ var _t = Math.round(parseInt(dt[0].split('[')[1])*60+parseFloat(dt[1].split(']')[0])*100)/100; //这一步我自己都觉得甚是坑爹啊！ lrc.push([_t, t[1]]); } return lrc; } 这样我们只要匹配歌词每行的时间和crrentTime就行了，如果当前播放时间超过了这一句歌词的时间，则显示这一句歌词，否则不显示。这是我们下面代码的关键判断。另外，这里我使用了一个自我感觉还不错的小技巧：显示完歌词之后立即将这行歌词从歌词数组中剔除出去，这样我们就永远只要将currentTime和lrc[1][0]比较就好了，而不用麻烦的去每个都去比较一下。 m.addEventListener('timeupdate', function() { if(audio.currentTime > lrc[1][0]) { document.getElementById('lrc').innerHTML = lrc[1][1]; lrc.shift(); } },false); //addEventListener等同于m.timeupdate(function() {...}); 歌曲播放并显示歌词的思路大概就这个样子了，具体的代码可以去看我的DEMO。DEMO只是给出了大概的功能，UI方面都还木有美化，大家习惯就好，这个是在是力不从心啊！本人一向也不是很在意UI的。最后的最后，感谢一下Jclyn帮我做了测试并推荐了本文开头的歌曲。哦，又突然想起来了，DEMO的范例是用JQuery操作的，虽然跟Javascript有些不同，但是对于思路什么的是没有问题的，有不懂的可以留言提问哦，我会看心情耐心解答的。