[微信音频播放器] html5 audio 制作的微信播放器

weixinAudio.js

一个简单的微信样式播放器

播放器DOM及CSS是微信里内置的音频播放器的样式，重新创建了控制层js，方便在在公众号，APP等场景使用。

例子

demo

地址

github

如何使用

通过以下demo来实现

HTML模板

@H_301_26@<p class="weixinAudo"> <audio src="../sound/sound.mp3" id="media" width="1" height="1" preload></audio> <span id="audio_area" class="db audio_area"> <span class="audio_wrp db"> <span class="audio_play_area"> <i class="icon_audio_default"></i> <i class="icon_audio_playing"></i> </span> <span id="audio_length" class="audio_length tips_global">3:07</span> <span class="db audio_info_area"> <strong class="db audio_title">标题</strong> <span class="audio_source tips_global">来源</span> </span> <span id="audio_progress" class="progress_bar" style="width: 0%;"></span> </span> </span> </p>

Js调用

@H_301_26@//你需要先引入一个jQuery <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="js/weixinAudip.js"></script> <script> $('.weixinAudo').weixinAudio(options); </script>

options/初始化参数

Option	Type	Default	Description
autoplay	Boolean	false	播放器是否在初始化时自动播放
src	String	—	如果audio标签上没设定src属性，可在初始化时设置

API/执行方法

@H_596_73@method

Parameters	Description
play()	—	播放方法
pause()	—	暂停方法
changsrc()	src,callBACk	src:播放的地址;callBACk:回调函数