????eviceMotionEvent???豸?????????????豸?й??????????????????????????????????????????x??y??z???????????? ???x????????????????????????y???????????????????????z????????????????????????????Щ?豸????????????????????? ?????????????????????accelerationIncludingGravity?????????????????acceleration?????????????? ??????????????
?????漰????????μ???????????????????????????????￡?
????1??  ????????????????????????ζ???????????????
????2??  ??ζ?????????????????????????仯??
????3??  ???????????????????????????????????????????????????·???????м????????仯??
??????????????????????????????????м?????????????????????????????????仯??????????????????????????????????
????????html5?????????????????????????????????
????1??  deviceOrientation?????????????????????????????????????????μ??????????????????????????λ????????
????2??  deviceMotion?????????????????????????????????????????μ???????????????
??????????????弸??????????????x??y??z??????????????δ????????????????????????￡?
????Javascript??
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://www.XXX.com/Pages/test/Kalimba.mp3");
media.load();
media.play();
}
last_x = x;
last_y = y;
last_z = z;
}
}
????Html??
<!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>
??????????????????DeviceOrientation?????????
????IOS ?????Safari ????????????? Chroma ?????????????UC????????????
????Andriod ?????UC???????????Chroma ???????????????????? ??????????
??????????????????ios????safari?????????????????????js???????????android????android os ???????????????????????????????????opera??chrome???????????????????js?????????