利用html5实现类似微信的手机摇一摇功能，并播放音乐。

1、  deviceOrientation：封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据，例如手机所处角度、方位、朝向等。

2、  deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。

不多说直接上代码

var SHAKE_THRESHOLD = 3000; 
        var last_update = 0; 
        var x = y = z = last_x = last_y = last_z = 0; 
        function init() { 
            if (window.DeviceMotionEvent) { 
                window.addEventListener('devicemotion', deviceMotionHandler, false); 
            } else { 
                alert('not support mobile event'); 
            } 
        } 
        function deviceMotionHandler(eventData) { 
            var acceleration = eventData.accelerationIncludingGravity; 
            var curTime = new Date().getTime(); 
            if ((curTime - last_update) > 100) { 
                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; 
   
                if (speed > SHAKE_THRESHOLD) { 
                    alert("摇动了"); 
                    media.setAttribute("src", "http://211.148.5.228:8002/Pages/test/Kalimba.mp3"); 
                    media.load(); 
                    media.play();   
                } 
                last_x = x; 
                last_y = y; 
                last_z = z; 
            } 
        }

　　

<!DOCTYPE html> 
   
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>摇一摇功能</title> 
    <script type="text/javascript"> 
        //Javascript 
    </script> 
</head> 
<body onload="init()"> 
<p>用力摇一摇你手机</p> 
<audio style="display:hiden" id="musicBox" preload="metadata" controls src="http://211.148.5.228:8002/Pages/test/Kalimba.mp3" autoplay="false"> 
</audio> 
</body> 
</html>