最近开发微信公众号时碰到这样一个需求：

用户触发摇手机事件，页面产生动画效果，同时播放一段音效

我是用audio标签来做的，但是发现：在加载完页面并首次触发事件后，音效总是要比动画慢，于是我尝试调用audio对象的方法来做判断，如果在事件触发时音频已加载完毕，则开始动画并播放音效；如果触发事件的当下音频没有加载完毕，则只让动画播放，音频不播放。代码如下：

 var shakerFlag=0;
var shaker=document.getElementsByTagName("audio")[0];
shaker.load();
shaker.oncanplay=function(){
    shakerFlag=1;
}
window.addEventListener('devicemotion', function(){ 
    if(/*一些判断手机摇动的参数*/){  
        if(shakerFlag==1){
            shaker.play();
        }
        openUp();//执行动画
    }
},false)

这种方法在iphone版微信浏览器下没有问题，但是在安卓4.4.2版微信浏览器下，shakerFlag始终为0，似乎是oncanplay方法在安卓微信下不起作用，导致始终没有音效。好吧，于是我换了另一种思路：

 var shaker=document.getElementsByTagName("audio")[0];
shaker.load();
window.addEventListener('devicemotion', function(){ 
    if(/*一些判断手机摇动的参数*/){  
        if(shaker.readyState==4){//4 = HAVE_ENOUGH_DATA: 可用数据足以开始播放
            shaker.play();
        }
        openUp();//执行动画
    }
},false)

这个思路在iphone版微信下依然好使，而在安卓微信下，shaker.readyState似乎并不准确，从而又出现了动画执行一段时间后音频才播放的效果。。。

心好累，想追求一个有品(bi)质(ge)的页面真的那么难吗？还是微信页面的开发本身就是一个坑？

希望大神指点一二，能帮忙解决一下这个问题，并讲解一下audio对象在移动端浏览器里的支持情况是最好的，如果不能，就科普一下微信页面开发中的常见坑吧^_^