支持触摸设备的响应式HTML5音频播放器 - AudioPlayer.js

标签: 设备 响应式 html5 | 发表时间:2013-05-22 08:48 | 作者:
出处:http://www.iteye.com

日期:2013-5-22  来源: GBin1.com

支持触摸设备的响应式HTML5音频播放器 - AudioPlayer.js

在线演示

如果你希望开发一款支持响应式的HTML5播放器的话, AudioPlayer.js是一个不错的选择。它使用HTML5的audio标签帮助你生成一个支持响应式的音频播放器,不使用任何embed代码,图片或者flash,完全使用CSS定义界面。压缩后的大小只有4KB。

主要特性

  • 响应式
  • 触摸式
  • 自适应
  • HTML5音频的本地支持
  • 易用性.
  • 无图片
  • 无flash
  • 轻量级,压缩后4KB

如何使用

HTML

    <audio preload="auto" controls>
    <source src="audio.wav" />
    <source src="audio.mp3" />
    <source src="audio.ogg" />
    </audio>

Javascript

    <script src="jquery.js"></script>
    <script src="audioplayer.js"></script>
    <script>
    $( function()
    {
    $( 'audio' ).audioPlayer();
    });
    </script>

是不是非常简单,当插件调用后,audio标签会被解析成如下HTML元素:

    <div class="audioplayer audioplayer-stopped">
    <audio src="audio.wav" preload="auto" controls></audio>
    <div class="audioplayer-playpause" title="Play"><a href="#">Play</a></div>
    <div class="audioplayer-time audioplayer-time-current">00:00</div>
    <div class="audioplayer-bar">
    <div class="audioplayer-bar-loaded"></div>
    <div class="audioplayer-bar-played"></div>
    </div>
    <div class="audioplayer-time audioplayer-time-duration">&hellip;</div>
    <div class="audioplayer-volume">
    <div class="audioplayer-volume-button" title="Volume"><a href="#">Volume</a></div>
    <div class="audioplayer-volume-adjust"><div><div></div></div></div>
    </div>
    </div>

希望大家喜欢这款音频插件。

友情提示:因为本文在线演示中没有包含wave格式音乐,所以不支持IE,请使用Firefox和Chrome来播放音乐。

来源: 支持触摸设备的响应式HTML5音频播放器 - AudioPlayer.js



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [设备 响应式 html5] 推荐:

支持触摸设备的响应式HTML5音频播放器 - AudioPlayer.js

- - ITeye博客
日期:2013-5-22  来源: GBin1.com. 如果你希望开发一款支持响应式的HTML5播放器的话,. AudioPlayer.js是一个不错的选择. 它使用HTML5的audio标签帮助你生成一个支持响应式的音频播放器,不使用任何embed代码,图片或者flash,完全使用CSS定义界面.

Groundwork:响应式 HTML5,CSS & JavaScript 工具包

- - 博客园_梦想天空
  Groundwork 是基于强大的 CSS 预处理器 Sass & Compass 的响应式 HTML5,CSS & JavaScript 工具包. 使用 Groundwork,您可以快速构建 Web 应用程序. Groundwork 拥有一个令人难以置信的灵活,可嵌套,流体的网格系统,是 Github 上的开源项目.

CSS 与 HTML5 响应式图片

- - TaoBaoUED
 随着  Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高. 如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种现状. 响应式图片是指: 用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成带宽的浪费.

高品质免费响应式HTML5模板下载

- - Jackchen Design 1984
对于网页设计人员和前端开发人员来说这两年HTML5的技术更新可以说是革命性的. 不管之前你对于HTML5的意见是如何,现在你一定不会忽略这个技术带来的改变. 几乎没多长的时间,这个技术就被几乎所有网站所普及更新和深入使用. 这也让网站前端有了更多的可能和更好的功能. 随着这个技术的普及,连普通的建站者都开始尝试使用这个新技术.

30 个免费的响应式 HTML5 CSS3 网站模板

- - 开源中国社区最新新闻
网站模板这种东西根本无需任何文字介绍,有图才是真相.

Responsive Nav:用于小屏幕设备的响应式导航

- - 博客园_梦想天空
  Responsive Nav 是一个很小的. JavaScript 插件,压缩后只有 1.7 KB,可以帮助您实现小屏幕导航切换功能. CSS3 过渡提供最佳性能,它还包含一个“聪明”的解决方法,借助 CSS3 transitions 特性使高度从height: 0 过渡到 height: auto.

响应式新首页设备适配(Device Adaptation)小结

- - ria之家--RIA三部曲:jquery、ext、flex
由于用户浏览器分辨率分布、运营维护成本、全站页面宽度规范等原因,2012年末一淘新首页对1200px、990px、750px(for ipad)这3个尺寸的响应不同布局,期望在ipad下横屏显示990px版本,竖版显示750版本,iphone下显示750版本. 不同设备尺寸的不同显示自然少不了viewport设置,目前 W3C针对viewport的规范还处于草案阶段,有2种方式可以设置页面的viewport,viewport meta标签和@viewport css方式.

提升移动设备响应式设计的8个建议

- - 199IT互联网TMT数据
现在,对于任何种类的网站开发来说,响应式Web设计都不能再局限于纸上谈兵,其是开发阶段的一个关键步骤. 作为设计师和开发人员,我们必须要了解有效响应式设计的重要性以及其在保证优秀终端用户体验方面的作用. 随着web向着移动端逐步发展,现在响应能力对于网站来说已经必不可少. 很多人没能在移动用户兴起时抓住时机进行顺应潮流,因此现在难以保证网站在移动设备上的体验流畅性.

响应式的WEB设计(三)- 桌面及移动设备的网页性能

- - 博客园_首页
移动设备由于受到带宽、处理器运算速度的限制,因而对网页的性能有更高的要求. 究竟是网页中的何种元素拉低了网页在移动设备中加载的速度呢. 这些元素应该做何处理以提升页面在移动设备中的整体性能. 是否存在一种设计模式可以同时满足移动端及桌面端的页面设计呢. 2、移动设备中网页的性能检测. 3、移动设备网页的性能瓶颈.

面向移动设备的HTML5开发框架梳理

- - 标点符
很久以前整理了篇将 手机网站做成手机应用的JS框架. 时隔一年多,很多新的技术已经出现,下面再来总结下还有哪些框架是适合面向手机设备的开发的. jQuery Mobile 是 jQuery 在手机上和平板设备上的版本. jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架.