移动端audio自动播及获取audio.duration

最新推荐文章于 2024-08-21 16:59:08 发布

dong-v

最新推荐文章于 2024-08-21 16:59:08 发布

阅读量3.7k

点赞数

CC 4.0 BY-SA版权

文章标签： audio audio播放 duration

本文链接：https://blog.youkuaiyun.com/weixin_42018790/article/details/80001861

最近需要在微信公众号上使用audio标签，在模拟器中测试没问题，放到手机端一看，坑啊，不会自动播放，且获取不到duration值，自制进度条没效果，于是从网上查看各大神博客，终于解决了这个问题，代码如下：

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
		<script type="text/javascript">
			var audio = $('#audio')[0];
			document.addEventListener("WeixinJSBridgeReady", function() {
				audio.play();
			}, false);
		    $(audio).on('canplay',function(){
		    	alert(audio.duration)
		    })
		</script>

因为是在微信公众号开发，借助了微信SDK方法，需要引包，监听了微信的状态让audio自动播放，解决了ios无法自动播放的问题

通过绑定 canplay事件来获取到audio的duration