1.手机摇一摇效果实现
2.播放声音
<!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 id="musicBox" preload="metadata" controls src="5018.mp3" autostart="0"> </audio> <div id="btn" class="btn">点击播放</div> <script type="text/javascript"> var SHAKE_THRESHOLD = 3000; var last_update = 0; var media = document.getElementById("musicBox"); var btn = document.getElementById("btn"); 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) { //media.setAttribute("autostart", 1); //media.setAttribute("src", "5018.mp3"); //media.load(); media.play();
alert("弹窗了"); } last_x = x; last_y = y; last_z = z; } } </script> </body> </html>
IOS 测试：Safari 弹框不播放音乐, Chroma 弹框不播放音乐,UC弹框不播放音乐
Andriod 测试：UC弹框播放音乐,Chroma 弹框播放音乐,内置浏览器 弹框播放音乐 红米note 自带浏览器 弹窗/不播放