1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>摇一摇功能</title> 7 </head> 8 <body onload="init()"> 9 <p>用力摇一摇你手机</p> 10 <audio id="musicBox" controls src=""/> 11 </body> 12 </html> 13 <script type="text/javascript"> 14 //Javascript 15 var SHAKE_THRESHOLD = 3000; 16 var last_update = 0; 17 var x = y = z = last_x = last_y = last_z = 0; 18 function init() { 19 if (window.DeviceMotionEvent) { 20 window.addEventListener('devicemotion', deviceMotionHandler, false); 21 } else { 22 alert('not support mobile event'); 23 } 24 } 25 function deviceMotionHandler(eventData) { 26 var acceleration = eventData.accelerationIncludingGravity; 27 var curTime = new Date().getTime(); 28 if ((curTime - last_update) > 100) { 29 var diffTime = curTime - last_update; 30 last_update = curTime; 31 x = acceleration.x; 32 y = acceleration.y; 33 z = acceleration.z; 34 var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000; 35 36 if (speed > SHAKE_THRESHOLD) { 37 alert("摇动了，播放"); 38 var media=document.getElementById("musicBox");//获取音频控件 39 media.setAttribute("src","http://1.html5weby1y.sinaapp.com/2.mp3"); 40 media.load();//加载音频 41 media.play();//播放音频 42 } 43 last_x = x; 44 last_y = y; 45 last_z = z; 46 } 47 } 48 </script>