warpcgd / webchataudio

a simple webchat AudioPlayer(from weixin of china)

中文 | English

##weixinAudio.js ####一个简单的微信样式播放器

---

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

###例子

demo

###如何使用

通过以下demo来实现

###HTML模板

<p class="weixinAudo">
	<audio src="../sound/sound1.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">标题1</strong>
                <span class="audio_source tips_global">来源1</span>
			</span>
			<span id="audio_progress" class="progress_bar" style="width: 0%;"></span>
	 	</span>
	</span>
</p>
<!-- 也可以多音频使用 -->
<!-- 注意使用同一类名，在js中进行初始化 -->
<p class="weixinAudo">
  <audio src="../sound/sound2.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">标题2</strong>
                <span class="audio_source tips_global">来源2</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/weixinAudio.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:回调函数

webchataudio's Issues

如何在微信ios端实现连续播放

ios的微信浏览器阻止自动播放，必须手动播放，这个插件如何实现播放完毕自动播放下一段音频呢？

我在ios中访问（在pc浏览器中正常），有样式没有声音，是什么原因呢？（iphone5se，iphone7）

我在ios中访问（在pc浏览器中正常），有样式没有声音，是什么原因呢？（iphone5se，iphone7）

如何通过控制音频的进度条来实现任意时间段音频的播放呢？

您好，如果给这个插件做个拓展，拖动进度条实现任意时间段音频的播放该如何去实现呢？

提供了一个写法解决该库初始化语音为00:00的bug

var it = setInterval(function() {
var updateTime = self.updateTotalTime();
if (updateTime !== '00:00') {
clearInterval(it);
}
}, 100);
这样写可以解决一下bug

初始化时音频的总长度为什么是00:00呢？

您好，页面打开时音频的总长度是00:00，点击播放时才显示音频总长度是不是有点不合理的呢？
这是怎样造成的？