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

绝地灬酷狼 2022-02-13 05:55 96阅读 0赞

日期：2013-5-22  来源：[GBin1.com][]

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

**[在线演示][Link 1]**

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

## 主要特性 ##

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

## 如何使用 ##

HTML

Javascript

是不是非常简单，当插件调用后，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">…</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][GBin1.com]

[GBin1.com]: http://www.gbin1.com/technology/html/20130522-responsive-audio-player/
[HTML5_ - AudioPlayer.js]: http://www.gbin1.com/technology/html/20130522-responsive-audio-player/title.jpg
[Link 1]: http://www.gbtags.com/gb/ajaxautologon.htm
[AudioPlayer.js]: http://osvaldas.info/audio-player-responsive-and-touch-friendly