1. Mobile phone shake shake effect to achieve
2. Play sound
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "Utf-8" /> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0" /> <title>Shake a shake function</title> <Scripttype= "Text/javascript"> //Javascript </Script></Head><Bodyonload= "init ()"><P>Shake your phone hard</P><AudioID= "MusicBox"preload= "metadata"Controls SRC= "5018.mp3"autostart= "0"></Audio><DivID= "BTN"class= "BTN">Click Play</Div><Scripttype= "Text/javascript"> varShake_threshold= the; varlast_update= 0; varMedia=document.getElementById ("MusicBox"); varbtn=document.getElementById ("btn"); varx=y=Z=last_x=last_y=last_z= 0; functioninit () {if(window. Devicemotionevent) {Window.addeventlistener ('devicemotion', Devicemotionhandler,false); } Else{alert ('Not support Mobile event'); } } functionDevicemotionhandler (eventData) {varAcceleration=eventdata.accelerationincludinggravity; varCurtime= NewDate (). GetTime (); if((Curtime-last_update)> -) { varDifftime=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 ("Pop-up Window"); } last_x=x; Last_y=y; Last_z=Z; } }</Script></Body></HTML>
IOS test: Safari pinball \ No music, Chroma/not playing music, UC pinball \ No music playing
Andriod test: UC pinball \ Play music, Chroma frame \ Play music, built-in browser pinball \ Play Music red rice note comes with browser popup/No Play
File Download: Http://files.cnblogs.com/zhidong123/yao-yao.rar
Mobile phone shake shake effect-HTML5
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
