您的位置:首页 > Web前端 > JavaScript

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

2013-05-22 08:42 686 查看
日期: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">…</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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: