日期: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插件实现的响应式触摸音频播放器特效源码.zip
jQuery音频播放器AUDIOPLAYER.JS免费重量轻、 移动首先 浏览器兼容要求ie9以上,演示地址:http://www.jq22.com/jquery-info419
AudioPlayer.js
有兴趣刚需的可以自己下载,非常实用的特效代码,可以完美运行,有能力的还可以二次修改!
这是一个用android环境开发的音乐播放器,可以实现来电停止播放等
音频播放器AUDIOPLAYER.JS免费重量轻、 移动首先
html5响应式触摸音频播放插件——AUDIOPLAYER,对于做音频播放的希望这个对你有用
EDA硬件乐曲播放实验工程文件,多模块设计。。。。。
这是一款使用audioplayer.js插件的html5音频播放器。这款html5音频播放器使用html5的Audio制作并用jQuery来控制播放器的播放和暂停。整个插件代码简洁高效。
AudioPlayer-PluginLight-AudioPlayer For Typecho.##使用方法插件文件夹名字可能必须为LightAudioPlayer在文章内输入[mp3]文件地址|参数1|参数2[/mp3]即可可附带参数autoplay 自动播放,loop 循环播放采用为播放器.
HTML5手机音频播放器 HTML5手机音频播放器 HTML5手机音频播放器
audioplayer, 用于Nextcloud和ownCloud的音频播放器 音频播放器 FLAC,MP3,MP4,流的音乐播放器,以及更多的播放列表支持和共享播放器。 特性多个视图( 包含封面和更多内容的相册)使用命令行和浏览器进行库扫描和...
A Light AudioPlayer with HTML5, jQuery and CSS3. | Music: See you again - Wiz Khalifa ##特点 ###轻量级 整个插件在JS、CSS压缩后最小只有4KB ###快速响应 采用CSS3特性,自适应各种屏幕,使Light ...
小型音频播放器库,用于本地响应 ##安装 首先,您需要安装react-native-audioplayer: npm install react - native - audioplayer -- save 安装(iOS) 在XCode中,在项目导航器中,右键单击“库”➜将文件添加...
audioplayer,支持MP3,ogg,wav等格式
nextcloud 18.x.x音乐播放插件 安装方法: 1.解压 2.复制文件夹audiplayer到apps里面, 3.然后进入应用管理启用audioplaye插件 4.刷新页面
电子-stm32f405audioplayer.rar,单片机/嵌入式STM32-F3/F4/F7/H7
AudioPlayer.java
音频播放解决方案,内含demo,基于audioplayer开发,无其他依赖库,js源生开发,代码简洁易懂,欢迎大家下载使用。
角度音频播放器AngularJS 的 HTML 5 音频播放器服务和播放器控制指令