HTML5摇一摇以及音频播放问题优化总结

最新推荐文章于 2024-08-28 14:08:47 发布

jason09527

最新推荐文章于 2024-08-28 14:08:47 发布

阅读量4.5w

点赞数 2

分类专栏： web 文章标签： HTML5 摇一摇 audio

本文链接：https://blog.csdn.net/zhuizhuziwo/article/details/51852799

版权

本文主要总结了在HTML5中遇到的摇一摇事件不灵敏、devicemotion警告、audio播放错误、安卓微信浏览器音频问题以及延迟计时器警告的优化方法，提供了相应的解决方案和代码示例。

摘要由CSDN通过智能技术生成

前言感想：不放过任何一个WARNING、ERROR或者不够好的体验点，持续不断优化，精益求精，我们就能够得到提高。

1. 摇一摇不够灵敏、摇动很多次没有响应的问题、

原来摇一摇代码是从网络Copy的，活动上线后，发现部分手机摇一摇监测效果不够灵敏，摇动很多次都没有响应，恨不得把手机砸了，于是优化。

原摇一摇代码：

var SHAKE_THRESHOLD = 800;      
var last_update = 0;        
var x = y = z = last_x = last_y = last_z = 0;

function deviceMotionHandler(eventData) {
          
    var acceleration = eventData.accelerationIncludingGravity;      
    var curTime = new Date().getTime();     

    if ((curTime - last_update) > 500) {        
        var diffTime = curTime - last_update;       
        last_update = curTime;      
        x = acceleration.x;     
        y = acceleration.y;     
        z = acceleration.z;     
        var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;      
        var status = document.getElementById("status");     

        if (speed > SHAKE_THRESHOLD) {  
          alert('摇一摇显示');
        }

        last_x = x;     
        last_y = y;     
        last_z = z;     
    }       
}

if(window.DeviceMotionEvent) {
    // Mobile browser support motion sensing events
    window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
    // Mobile browser does not support the motion sensing events
}

于是开始研究起上面的代码不够灵敏的原因，发现：

The device motion event is a superset of the device orientation event; it returns data about the rotation information and also acceleration information about the device. The acceleration data is returned in three axes: x, y and z. The