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

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

在线演示

如果你希望开发一款支持响应式的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