手工打造HTML5网易云音乐播放器

手工打造HTML5网易云音乐播放器

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:...
优秀前端工程师是如何炼成的

优秀前端工程师是如何炼成的

很多刚入门的前端攻城师会有一个疑问:如何才能成为一名优秀的前端工程师呢?其实这个问题说大也大,说小也小,展开了说可以写一本书。当然我相信大部分人并不希望去读一本厚厚的书,大道至简,下面总结的几条方法或许能成为走向优秀前端的进阶之路。 1. 多写。很多问题都是积累得来的。写了,遇到了,才能去真正理解解决方案,才会随着自己的不断成长而有进步。别人问我为什么知道那么多 CSS 兼容解决方案,为什么一看就出的时候,我只能告诉他,我写了 20 几个 Wordpress 主题。 2. 看书。看 Blog 或者一些网上的教程,都很难让你系统全面理解一个东西的。坚持看书,至少前端相关的语言都看一本。入门强烈推荐Head First系列,CSS 的推荐 《精通CSS》,JS 推荐 《Javascript 高级程序设计》。 3. 读 Blog。最后你会发现,很多东西大家都会。但只有某些人才解决得了某些细节性的东西,这些人就是我们所谓的高手。很多大牛在 Blog 不会写一些简单的 List, 而是针对某个问题深入研究。这时看 Blog 对于进阶非常有帮助。 推荐几个不错前端博客(不定期更新,欢迎推荐或自荐): http://zmingcx.com/ 知更鸟前端(WordPress)博客 http://www.w3cplus.com/ 前端爱好者的家园 http://www.w3cfuns.com/ 前端网 http://www.smashingmagazine.com/ 多是精品 http://www.webresourcesdepot.com/  很多前端资源 http://meyerweb.com/ Web标准推广人 http://www.nczonline.net High Performance JavaScript 作者 http://dailyjs.com/ 业界新闻博客 4. 学一门后端语言。怎么说呢,实际用到会很少。但会很有利于一些问题的理解。比如 Ajax。还有 HTML5 中像 Web sockets、post message 之类的 API。 5. 去用很多产品,至少去爱一个产品。你不止是一个前端,你还应该是一个设计者,去用很多产品,你才会发现技术为什么有用,去爱一个产品,你才会把技术用得更好。 推荐几个不错产品/设计站点(不定期更新,欢迎推荐或自荐): http://www.woshipm.com/ 人人都是产品经理 http://www.uisdc.com/ 优秀网页设计联盟(SDC)