AudioPlayer.js，一个响应式且支持触摸操作的jquery音频插件

2023-01-02 15:07:43

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翻译，首发于码农自留地，转载请注明出处！

码农公寓

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

特点

轻量级的

使用方法

HTML

Demo：

相关文章