H5页面仿微信摇一摇及音频(安卓和苹果)

H5页面仿微信摇一摇，动作以及音频的知识点和代码，在Android和IOS的兼容问题

测试环境：微信浏览器

一、摇一摇：

1.知识点

涉及事件DeviceMotionEvent，该事件返回设备有关于加速度和旋转的相关信息。加速度包括X、Y、Z轴

X轴横穿屏幕，Y轴纵穿过屏幕，Z轴垂直于屏幕。

如下图：

                         

一般情况下，摇一摇动作仅会用到X轴和Y轴，但写判断算法时仍要考虑。

包含加速度的返回值有两个：accelerationIncludeingGravity(包含重力的加速度) 和 acceleration(加速度)，

通常使用前者。

如何判断，是否是用户摇晃手机：

①用户大多数按照同一方向摇