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

weixinAudio.js

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

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

例子

demo

地址

github

如何使用

通过以下demo来实现

HTML模板

<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调用

//你需要先引入一个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/执行方法

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

相关文章

• 1. html5，audio音乐播放器
• 2. HTML5音频播放器
• 3. 音频播放器
• 4. 微信小程序：音乐播放器
• 5. 微信视频播放
• 6. HTML5音频播放
• 7. IOS微信音乐播放问题
• 8. 用HTML5实现音乐播放器和视频播放器
• 9. js仿微信语音播放
• 10. html5---音频视频播放