AudioPlayer.js是一个响应式、支持触摸操作的HTML5 的音乐播放器。本文是对其官网的说用说明文档得翻译,博主第一次翻译外文。不到之处还请谅解、之处。

JS文件地址:http://osvaldas.info/examples/audio-player-responsive-and-touch-friendly/audioplayer.js

你可以在右键点击上面的地址,然后选择另存为把JS文件保存到本地。

英文原文地址:http://osvaldas.info/audio-player-responsive-and-touch-friendly

Audio Player:响应式且支持触摸操作

几个月前,我做了一个Jquery插件,用自定义的HTMl代码来取代<audio>标签。通过写一些css你可以得到一个全新的、个性化的并且和功能和默认一样强大的播放器。没有办法直接修改元素的样式。但是html5文档模型中的元素有方法、属性、和事件,这样就可以很容易实现了。由DragonDean翻译,首发于码农自留地

总而言之,这个插件就是允许你自定义样式<audio>元素的样式。这就是为什么我制作了这个插件的原因。我希望播放器可以适应我门前的一个项目(商用IP电话-VOIP)的主题。audio元素提供IVR(交互式语音响应)功能,客户们可以建立自己的声音响应程序/菜单,记录、回放音频。

几个星期之前,我就这个插件为Codrops写了一篇深入介绍的文章,我推荐给那些在这个领域经验较少的人。收到了一些很有帮助的反馈,帮助我改进这个播放器。很明显,这还不是结尾,我希望在这也能收到您的反馈信息。由DragonDean翻译,首发于码农自留地

特点

在决定自己做这个插件之前,我对现有的可选方案做了一些小的调查。我有明确和严格的要求:(1)必须是轻量级的、可定制的、正确的。(2)必须能解决当前的问题,比如响应式的、支持触摸操作的。(3)必须解决了我目前没解决的问题。然而,没有一个通过筛选。事实上重点是我做的这个播放器是:

响应式的

为达到这个要求,所有的责任都在你的CSS。我的例子是响应式的,你也可以做一个非响应式的,虽然我不推荐这样做。响应式是好的网页体验的一个标志。

    可触摸操作

支持触摸操作也是好的网页体验的一个标志。有了这两项你就从设备和屏幕中独立出来了。工作已经完成了一半。

    自适应的

当浏览器完全不支持audio元素或是音频文件的时候,播放器自动更改为一个基于使用第三方插件的播放器(基本上是在mac上市quickTime,在windows上就是windows media player)单按钮(只有播放/暂停按钮)<embed/>的元素来播放因为文件。还有一种情况就是不支持javascript的浏览器。然后就调用浏览器的默认播放器。这也挺好的。

    原生的

播放器没办法直接就是原生的。插件支持audio元素的属性(src,autoplay,loop,preload)和标签(<sorce>)。基于这几点,“autoplay”和“loop”属性继承于刚提到了情况。

    实用的

关键的播放/暂停和回放进度控制,开关,增减控制以及音频的加载进度(缓存)等。

    无图

这个也依赖于你的css,我做的播放器完全使用css的,一个图片文件都没有用到。做这个以及改变大小都用了em元素。让播放器可以缩放,拉伸。

    无Flash

再见,flash。我现在不需要你。

轻量级的

压缩版的插件只有4KB大小。

使用方法

添加一个audio元素,设置你需要的属性并添加资源。你添加的资源越多就有越多的用户可以听到你的音频(因为没有一种音频格式支持所有的刘拉你)。由DragonDean翻译,首发于码农自留地

三个例子:

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

这个只加载audio.wav文件并且在点击播放按钮之前不会播放。另一个加载值(none,metadata)不会加载文件。

加载后自动循环播放文件可以采用这种方式:

<audio src="audio.wav" preload="auto" controls autoplay loop></audio>

指定多个音频格式来解决之前提到的问题(译者注:没有一种音频文件支持所有的浏览器):、

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

神秘的控件?这是一个任何方式都不能影响插件的布尔属性,但是确保了不支持javascript时浏览器的默认播放器被显示且显示出控件。

最后一步-在audio元素上调用插件(如果之前没有引入jquery和插件文件的话,先引入):

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

插件有一些可选的参数。最重要的就是classPrefix。传递的值会成为父元素的类名和子元素的类前缀名。其他参数可能只对非英语有利。举个默认值得例子:

$( 'audio' ).audioPlayer(
{
classPrefix: 'audioplayer',
strPlay: 'Play',
strPause: 'Pause',
strVolume: 'Volume'
});

HTML

在开始第一段提到的,插件被调用的时候,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>

当发生下列情况时会有一些类被分配给父元素:

  • 播放器播放时-音频正在播放
<div class="audioplayer audioplayer-playing">
  • 播放器停止-音频播放已经停止
<div class="audioplayer audioplayer-stopped">
  • 播放器静音-声音静音状态
<div class="audioplayer audioplayer-muted">
  • 播放器没有音量-音量调节不可用:
<div class="audioplayer audioplayer-novolume">

注意:当浏览器不支持audio元素或者不支持给出的音频文件时,播放器转为最小化模式,只显示播放器的播放/暂停按钮(因为embed元素在操作上是受限制的):

<div class="audioplayer audioplayer-stopped audioplayer-mini">
<embed src="audio.wav" width="0" height="0" volume="100" autostart="false" loop="false" />
<div class="audioplayer-playpause" title="Play"><a href="#">Play</a></div>
</div>

提示:在插件初始化时使用classPrefix参数,你就可以在html中用你自己的值来替换每个音频播放器外观,这样就可以在一个网站里有多个不同外观的多媒体播放器了。

现在一切取决于你怎么用css来定义你的播放器样式。我将跳过这部分,直接举例,你可以随时查阅我在Codrops上关于怎么定义样式的文章。由DragonDean翻译,首发于码农自留地

Demo:

之前提到过很多次,我的播放器是响应式的,甚至不依赖媒体查询。我有一个安排来解释布局:

父元素.audioplayer是position: relative;子元素.audioplayer-*是position: absolute;

demo链接http://osvaldas.info/examples/audio-player-responsive-and-touch-friendly/  (译者注:由于是国外网站,加载时间可能稍微长点)

获取audioplayer.js(未压缩版:8KB),audioplayer.min.js (压缩版; 4KB).

本文由DragonDean翻译,首发于码农自留地,转载请注明出处!

AudioPlayer.js,一个响应式且支持触摸操作的jquery音频插件的更多相关文章

  1. Wrangle – 响应式的,触摸友好的多选插件

    Wrangle 是一个响应式,触摸友好的选择插件,支持 jQuery 以及 Zepto.Wrangle 为多项选择提供了一个独特的方法:通过画一条贯穿项目的线条来选择项目.它给你的应用程序的一种新的方 ...

  2. Glide.js:响应式 & 触摸友好的 jQuery 滑块插件

    Glide.js 是一款响应式和对触摸友好的 jQuery 滑块.基于 CSS3 转换实现,并在低版本浏览器降级处理.Glide.js 简单,重量轻,快速,适用于智能手机,平板电脑和台式机.它支持 s ...

  3. 使用jQuery开发一个响应式超酷整合RSS信息阅读杂志

    在线演示1 本地下载     申请达人,去除赞助商链接 如果大家喜欢阅读博客文章的话,可能都会使用RSS阅读器,今天这里我们将使用jQuery来开发一个响应式的RSS信息阅读应用,使用它你可以将你喜欢 ...

  4. 一个响应式框架——agera

    Google在上周开源了一个响应式框架——agera,相信它会慢慢地被广大程序员所熟知.我个人对这样的技术是很感兴趣的,在这之前也研究过RxJava,所以在得知Google开源了这样的框架之后第一时间 ...

  5. 25款响应式,支持视网膜显示的 Wordpress 主题

    响应式和现代设计风格的多用途 WordPress 主题与能够非常灵活的适应所有设备.而高级主题能够更大可能性的轻松定制.所有的主题是完全响应式的,您可以从主题选项中禁用/启用响应模式. 多用途的响应式 ...

  6. 使用media Queries实现一个响应式的菜单

    Media queries是CSS3引入的一个特性,使用它可以方便的实现各种响应式效果.在这个示例中我们将会使用media queries实现一个响应式的菜单.这个菜单会根据当前浏览器屏幕的大小变化而 ...

  7. 一个响应式数据库框架SQLBrite,完美解决数据库和UI的同步更新!

    相信小伙伴们在开发中或多或少都可能遇到过这样的问题:打开一个应用后,为了快速响应,先将数据库中的数据呈现给用户,然后再去网络上请求数据,请求成功之后将数据缓存至数据库,同时更新UI,但是我们经常会这样 ...

  8. media Queries实现一个响应式的菜单

    使用media Queries实现一个响应式的菜单   Media queries是CSS3引入的一个特性,使用它可以方便的实现各种响应式效果.在这个示例中我们将会使用media queries实现一 ...

  9. 利用JS去做响应式布局

    利用JS去做响应式布局 js动态改变布局方式 // 取浏览器可视区高宽 var lw = $(window).width(); var lh = $(window).height();// 页面加载完 ...

随机推荐

  1. 解决方案:将已存在的项目 添加到 tfs解决方案中的时候 出现:新项目不能成功加入源码控制

    遇到此问题 可能是因为你的 解决方案文件 没有正确与 tfs服务器绑定导致的 解决方式是: 在打开任意一个源码文件的时候,打开 vs2013的 文件>> Go to File->So ...

  2. Spring实战2:装配bean—依赖注入的本质

    主要内容 Spring的配置方法概览 自动装配bean 基于Java配置文件装配bean 控制bean的创建和销毁 任何一个成功的应用都是由多个为了实现某个业务目标而相互协作的组件构成的,这些组件必须 ...

  3. MIT牛人解说数学体系(转载)

    原文网址:http://www.guokr.com/post/442622/ 在过去的一年中,我一直在数学的海洋中游荡,research进展不多,对于数学世界的阅历算是有了一些长进. 为什么要深入数学 ...

  4. SVN 分支及合并的介绍和实践---命令行

    写在前面 一些相关的概念和原理 进行分支开发的最佳实践 合并的分类 在 Eclipse 中进行合并操作 相关资源 写在前面 本文是由演讲整理而来的,介绍了 SVN 分支与合并的概念.流程和一些实际操作 ...

  5. CSS3字体图标

    网址:http://icomoon.io/http://iconfont.cn/  阿里巴巴字体库 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  6. 黄聪:PHP使用Simple_HTML_DOM遍历、过滤及保留指定属性

    <? /* * 参考资料: * http://www.phpddt.com/manual/simplehtmldom_1_5/manual_api.htm * http://www.phpddt ...

  7. C产品狗

    作者:郭琦链接:https://www.zhihu.com/question/29342383/answer/110823046来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  8. Segment fault及LINUX core dump详解

    源自:http://andyniu.iteye.com/blog/1965571 core dump的概念: A core dump is the recorded state of the work ...

  9. BIP_开发案例09_结合JavaCP通过BIP API输出报表dataprocess / rtfprocess / foprocess(案例)

    20150814 Created By BaoXinjian

  10. CSU 1809 Parenthesis(线段树+前缀和)

    Parenthesis Problem Description: Bobo has a balanced parenthesis sequence P=p1 p2-pn of length n and ...