APlayer是一个非常漂亮的HTML5音频播放器，UI 参考自网易云音乐外链播放器。它将audio标签封装，并结合CSS制作出漂亮的播放器UI，它支持设置歌名、歌手和歌词，可以设置是否自动播放，支持缩略图，支持播放进度以及设置播放源。 >>> DEMO is Here!!!<<< HTML 首先是要加载播放器样式文件，这个播放器的样式酷似网易云音乐播放器。接着载入APlayer.js文件。然后在body中加入播放器div#player1，用于显示播放。 <link rel="stylesheet" href="APlayer.min.css"> <!-- body --> <div id="player1" class="aplayer"></div> <!-- /body --> <script src="APlayer.min.js"></script> JS 现在我们来调用APlayer，首先new一个对象，绑定播放器元素，设置各种选项，最后使用ap.init();载入播放器。注意APlayer不依赖诸如jQuery或Zepto等第三方JS库，它直接将html5中的audio标签封装起来，所以开发者只需简单几句代码就可在页面上呈现漂亮的音乐播放器了。 var ap = new APlayer({ element: document.getElementById('player1'), narrow: false, autoplay: true, showlrc: false, music: { title: 'Preparation', author: 'Hans Zimmer/Richard Harvey', url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3', pic: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.jpg' } }); ap.init(); 选项 { element: document.getElementById('player1'), // 可选, 绑定的播放器元素 narrow: false, // 可选, 窄屏样式，即只显示缩略图和播放按钮，请看演示demo中的样式3 autoplay: true, // 可选, 自动播放，注意这个在移动端手机上不支持自动播放的 showlrc: false, // 可选, 展示歌词，请看演示demo中的样式1 music: { // 必需, 音乐相关信息设置 title:...

不知大家有没类似这样的经历：一天忙到晚，一会被PM叫去确认需求，一会被设计拉去确认UI是否能实现，一会又被测试叫去确认bug，然后貌似做了很多事，但好像工作进度也没什么进展。然后，只能晚上加班，在夜深人静时还得敲代码，苦逼。。。 如果我们的工作效率能高一点 ，那也就不会那边的苦逼了。下面是我的总结的一些提高前端工作效率的方法： 管理时间 所谓时间管理，就是关于如何高效的使用时间。如果要详细的聊如何做好时间管理，那足够写一本书了，呵呵。我就简要谈谈我的一点经验吧 做好计划。在自己效率高的时候，做一些难的事情；效率低的时候，做一些简单的事。 专注。在我们专注工作时，如果有人来打扰，可以和他沟通，如果事情不紧急，可以稍后来处理他的事情。 一段时间只做一件事情。当一件事做的告一段落，再做另外一件事，而不是穿插着做。比如，写页面时，我会先写 HTML ，再写 CSS ，再切图，再写js。 善用工具 善用工具，就是选择一个好用的工具，并且好好利用它。 善用工具可以 减少一些重复劳动。如 Compass 可以自动生成图片精灵(CSS Sprites ) 减少做一件事情的路径。如 cutterman 是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出，以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程。 从而提高我们的工作效率。下面具体的聊聊： 编辑器 在我看来好用的编辑器至少有以下功能 语法高亮 括号匹配 能快速定位 快速打开文件 在文件中查找 在文件夹中查找 跳至某一行 能安装插件 熟练用浏览器进行调试 主要包括 审查元素 打断点和条件断点 改变元素的状态，例如：hover,focus 熟练的使用浏览器的控制台 移动端调试:用PC浏览器模拟手机浏览器；在PC上远程调试手机页面的工具，推荐用Weinre 想了解更多好用的软件见这里。 项目模板 项目模板包括一个项目的文件结构，公共的一些资源，一些第三方的插件，构建工具等等。一个好的项目模板，能帮助我们进行快速高质量的开发。 推荐在 HTML5 BOILERPLATE 上做一些自己的定制。 如果是移动端的项目，推荐用 MOBILE BOILERPLATE。 我的项目模板,见这里,仍在完善中~ 快速的生成模板项目，推荐使用 Yo。 项目的组件页 创建一个项目的组件页，以便查阅参考。 可以参考bootstrap的。见这里 积累高质量的常用第三方组件，并自己写一些使用组件的demo 网上总是不缺各种第三方组件。其中不乏很多带很多坑的组件。所以，发现高质量的组件，那就赶紧mark吧。我积累了一些，见这里。 虽然很多组件都有官方写的demo。但看官方的demo总是需要花一些时间去理解。我的做法是，理解了官方的demo后，自己也写一些demo。那以后再次使用时，就可以看自己写的demo了。 积累些常用的代码片段 类似 http://css-tricks.com/snippets/ 。 如果编辑器是用的sublime的话，可以创建代码片段(snippets)。要再用的时候，只需输入几个键，就可以将代码片段输出。 最后，欢迎大家来补充~

昨晚，小编在朋友的推荐下，偶然得知一款HTML5可视化游戏开发神器：Egret Wing，因为小编也是不折不扣的HTML5迷，所以特此撰文力荐给钟爱HTML5的开发者朋友们，尤其是移动游戏开发者朋友们。下面先看下官网的介绍： 又是一年尾声，进入12月份，白鹭引擎以及行业的伙伴很快就会和2014年说声再见。这一年中，白鹭进行了Egret Engine内测，发布了Egret Engine1.0。不仅如此，Egret产品也收到广大HTML5游戏开发者的热捧，不少开发者用灵巧的双手，借助Egret引擎和工具，制作出数款深受大家喜爱的HTML5移动游戏。 Egret Wing让开发者彻底告别手写代码 现在，HTML5移动游戏在行业一致助推的大环境下，即将迎来市场爆发。作为开发者的你，是否已经做好准备，让HTML5移动游戏拥有更为丰富的内容，更具可玩性，甚至让HTML5移动游戏成为具备一流的中度，重度化体验？ 在中度游戏和重度游戏开发中，开发者朋友必不可少的要制作大量游戏界面。根据行业者反馈的保守估计，这些界面制作时间会占用游戏开发中近50%的工作量。其中要面对的问题不仅仅是多种多样的界面元素，例如按钮，菜单等，更令人头疼的是大量分辨率适配和令人烦躁的反复修改的工作。 为了解决开发者面对GUI开发的难题，经过半年的准备和近两个月的内测活动，Egret 官方GUI可视化编辑器Egret Wing 1.0 Final正式和广大开发者正式见面。Egret Wing的正式版的发布，不但奏响了Egret即将以全新面貌走向2015年的号角，同时也标志着HTML5移动游戏开发，在未来将彻底告别枯燥的手写代码，迎来高效开发的全新时代。 Egret Wing全新功能助开发者实现高效开发 那么此次Egret Wing 1.0 Final为广大开发者带来了什么新奇的功能，它又是如何帮助开发者，实现高效开发的呢？ 首先，Egret Wing 1.0 Final独创的可视化操作，让产品的GUI制作变得更加简单。Egret Wing采用全程可视化操作模式，将原有传统的GUI代码编辑操作转变为可视化操作模式，同时支持实时效果预览，让你在改变的同时看见最终的画面效果。借助Egret Wing，开发者可在GUI开发阶段提升数倍工作效率，让GUI开发不在成为枯燥无味的机械化工作。 其次，Egret Wing能够放手让策划与美术把控一切，让艺术更加艺术。Egret Wing开发团队针对界面交互体验反复优化，力争让用户交互变得更加简单、人性化。经过几个月不懈的努力，我们已经在用户交互体验上进行了大量创新性修改。普通策划人员，于美术人员，经过简单的培训即可上手使用Egret Wing。 再次，应用Egret Wing制作GUI，代码可以统统抛掉，让开发者着眼于界面与设计。与以往开发模式不同，Egret Wing致力于让界面制作可视化，模块化，无代码化。在Egret Wing中，你可以放心的使用可视化方式制作游戏界面，无需关心代码编写。所有制作好的界面，均会保存为exml格式文件，用户无需关心界面代码如何修改。最终制作后的界面文件交于开发人员与逻辑合并即可。 最后，Egret Wing强大的分辨率自适应布局，使得分辨率兼容不再是问题，大屏小屏横屏竖屏，对于应用Egret Wing的开发者来说都不叫事。面对各种分辨率的移动设备，不同的类型的游戏，开发者往往会在界面制作上耗费大量时间，解决分辨率兼容问题，现在，这些通通成为过去。Egret GUI中包含一套完整的自适应流式布局（Adaptive Fluid Layout）解决方案。有了它会让你的界面可大可小，可宽可窄。为了能让用户更快的理解自适应流式布局，Egret Wing团队在软件中隐藏了底层晦涩难懂的概念，并提出了组件对齐约束概念。让非开发人员可以非常直接的理解界面元素布局概念，让屏幕自适应处理更加简单高效。 此次Egret Wing 1.0 Final我们更新了大量功能，进行了200多项修改，力求为开发者打造最好用的GUI可视化编辑器。 轻微编后语：相较于传统的游戏开发工具，譬如小编曾用过的Unity 3D，毋庸置疑，Egret Wing是非常符合我个人喜好的，不知电脑前的开发者/程序员朋友们是否也和我一样钟情于她并按捺不住激动的心情呢，如果答案是肯定的，那就赶快行动起来吧！ 不过值得注意的是，Egret Wing依赖于其自身的游戏引擎Egret Engine（白鹭引擎），所以在只安装了Egret Wing就启动工具的情况下，系统会弹窗提示需要下载安装Egret Engine才能正常启动工具进入操作界面。因而必须同时安装Wing+Engine！ Egret 产品白皮书官网预览地址：http://www.egret.com/images/egretbaipishuv1.1.pdf Egret Wing（白鹭之翼）官网下载地址：http://www.egret-labs.org/egretwing Egret Engine（白鹭引擎）官网下载地址：http://www.egret-labs.org/egretengine Egret Wing+Engine套装百度网盘高速下载地址：http://pan.baidu.com/s/1gdDybVd