HTML5播放器[续]

假期哪也没去,宅在寝室实现了两个播放器实例,基于HTML5的,一个是播放单一歌曲的,为博客文章内嵌音乐准备的;另一个是列表播放器,完全就是要拿来替代桌面播放器的(虽然还远没有达到目标)。单曲版播放器的Demo已经放出,地址在:http://mynook.info/try/yplayer/,另一个播放器的Demo我会尽快放出。现在先贴完整版播放器的代码。写得比较粗糙,高手见笑了。因为没有地方可以抓取ogg格式的音乐,所以这个实例只支持Chrome和Safari(只在Chrome测试过。)。(音乐从点点网抓取,可能需要先在浏览器上登录点点网才能获取读权限。)

阅读剩余部分 -

HTML5播放器

放假我也没什么好说的,不过是在写代码之余多了些看电影的时间罢了。本着钻研的精神也就写了个HTML5的音乐播放器。关于HTML5的audio标签已经有很多资料了,实在不了解的可以看这里:HTML5多媒体组件的使用——第二部分:音频,或者这里:HTML5: Audio & Video API,或者这里:Html5 audio标签(属性)的使用详解,在W3SCHOOL也有关于audio标签的讲解。当然浏览器默认的播放界面是很难看的,所以才需要自己写播放器,其实就是使用自己的样式、自己的脚本来掩盖并驱动默认的播放器。

<input id="volumeBar" type="range" />

首先使用js将audio的controls设置为false,这样就去掉了默认的控制界面。不要直接在audio里禁用controls,否则禁用了浏览器Javascript功能的用户就没有办法控制音乐的播放了。

var player = document.getElementById('player');
player.controls = false;

然后添加播放和暂停功能。

var playerPlay = document.getElementById('playBtn');
var playerMuteBtn = document.getElementById('muteBtn');
var playerVol = document.getElementById('volumeBar');
var playerPro = document.getElementById('audioProgress');
var playerProVal;
playerPlay.addEventListener('click',function(){
  if(player.paused || player.ended){
    player.play();
  }else{
    player.pause();
  }
});

解释一下,audio的事件和方法,具体可以参考这里:HTML5 Audio/Video 标签,属性,方法,事件汇总。实际上我们就是通过这些事件和方法来控制audio标签的。上面一段代码的作用,是给播放按钮绑定click事件,当音乐播放完毕或者处于暂停状态时,点击按钮播放;否则,点击按钮暂停。然后添加静音功能,用到muted属性。

playerMuteBtn.addEventListener('click',function(){
player.muted = !player.muted;
});

简单地说,是点击静音按钮后把muted属性值反转。添加音量控制。

playerVol.addEventListener('change',function(){
playerObj.volume = playerVol.value;
});

进度条的添加。(progress元素可能没有得到充分的浏览器支持,如果要做跨浏览器的兼容,建议使用span#progress。)

player.addEventListener('timeupdate',function(){
(player.currentTime > 0 && player.currentTime < player.duration) ? playerProVal = Math.floor((1000 / player.duration) * player.currentTime) : playerProVal = 0;
playerPro.setAttribute('value',playerProVal);
});

这里夹杂了Javascript里 if...else... 语句的一个简写: (a)?b:c; 若a为真则b,否则c。 如果你使用 span#progress 作为进度条的话,就应当将 playerProVal 的值赋给 span#progresswidth 。剩下的就是样式以及一些额外功能和优化了。以下是我做的播放器的截图。HTML5播放器-YPlayer

第一次写技术文,也不太会表达,见谅。

Learning HTML&CSS in 30 days

30天学会HTML和CSS!

这个教程存在我电脑里有些时间了,以致于我忘记了最初是从哪里看到的消息,作者名字和网站也完全没有映象,如果有哪位知道,请告知我一声,我好把作者信息加上。

Update:此教程来自http://learncss.tutsplus.com/,原标题是 **30 Days to Learn HTML & CSS: A Free Tuts+ Premium Course **,作者为Jeffrey Way 。
视频是无字幕及水印的。最近在听译视频内容,争取把外挂字幕做出来。

好了,直接放地址。

阅读剩余部分 -

开学什么的

开学很久了都没有想起来要写点东西,记忆力和执行力都退化到一个不像样的档次了么。这学期的课貌似很满,没有大块的时间来堆砌代码了,不过这样也好,可以从另一个方面锻炼自己对零碎时间的利用。

阅读剩余部分 -

速度啊,速度啊魂淡!!!

换了个主机,然后优化了一堆东西,好不容易速度有点比原来快了,结果Cloudflare的CDN加速各种不稳定啊。。。

然后各种扯淡的事情都发生了啊有木有!!!坑爹啊!!

然后我在一些技术大牛的博客底下偶然发现居然写着“powerd by Typecho”,瞬间我就不淡定了啊,原来还有如此轻量级的博客程序啊!!为神马木有人早点告诉哥啊!!!

然后哥以迅雷不及就掩耳盗铃儿响叮当之势在本地搭了个Typecho博客啊,然后等哥跑到后台看一下,尼玛啊,神马基本功能都木有,果然是速度。。。

然后哥好不容易把wordpress的数据导入进去,想想看要肿么把Typecho数据导出来给wordpress,这样两个系统互为备份,岂不和谐?然后哥挨了个五雷轰顶。。。。

没错,哥找了一圈,全特么是wordpress数据导入Typecho的教程,居然木有Typecho数据导入wordpress的教程。。。尼玛啊,对等性你知不知道,你这样让人没了后路,人家能安心用么。。。

想给博客提速一下还真特么闹心。

主要就是吐一下这几天的苦水,没什么别的意思,不要围观,不要介意,貌似我也没说到谁。

致我的朋友们

题外话,这几天一直很闹心,折腾服务器折腾了好久,最后还是狠下心来买了一年最便宜的主机,在美国东海岸,速度一般,算上免费的CDN加速,也比原来的博客强了一点,最重要的是没有广告,服务态度好。

因为折腾服务器以及博客主题的修改,还有临近期末时生理性的烦躁感,最近老是一团怒火过一天,朋友们的忙也帮不上。这大概是最令人沮丧的事了。帮朋友找电影,找不到,烦。朋友的电脑出了问题,只能干着急,也帮不上忙。

其实想想,有这么几个朋友,真的很感激。像我这种没有明确目标,懒惰又自私的家伙,居然有人对我如此友善,真的很感激,也在努力的改变自己。

依然没有明确的方向。但是最近的心情真的要平静下来了。丰子恺有题字云,“宠辱不惊过一生”,我想这可能是我潜意识的一种向往吧。可能有人会说我胸无大志,无所谓,只要我自己理解就行,只要你们理解就行。

真的很感谢你们一路陪伴我,走过最清新,最热烈,最美好的青春。

樱花抄

我又进步了,看这部电影的时候没有想起你呢。

真的,只是全身心地沉浸到里面去,感受到主人公淡淡的悲伤。

最喜欢的是《樱花抄》。

最近恢复了好多 ,想起你的时候,大多是想起高三争论学习的场景。

又语无伦次了。

只能说好美好美。

终于发现我喜欢的不是一个具体的人,而是某一种类型。而你正好在那个季节成为了唯一人选。

最近好像有点分不清楚喜欢和爱了,可能是看了这部电影的缘故。

生日快乐。我又一次没有送礼物给你。

真的,生日快乐。

“什么时候,能再一次一起赏樱花。”

纯吐槽

“确实佩服专业人才的编程水平,人家十分钟可以写出高效简练的程式,而我写代码是一个字一个字的凑,一个小时过去了,调试一下,没有动静,一看CPU都是百分之百的,原来是个死循环,再试一下,还不行,赶紧去问奶瓶,奶瓶不耐烦的说:这里有问题,应该如何如何;让我伤感的是哪个台湾的工程师直接跟我说:你别问了,你掏钱我给你写,我看着你这样写程序我就难过…唉,没办法啊,谁叫我又穷又笨……”