流芳

导航

微信浏览器摇一摇播放音频

 1 <audio id="chatAudio" src="__STATIC__/wweb/img/red-01.mp3" style="display:none;"></audio>
 2 <audio id="openAudio" src="__STATIC__/wweb/img/red-02.mp3" style="display:none;"></audio>
 3 
 4 <div id="yyy" class="animated"><img src="__STATIC__/wweb/img/yy.png" /></div>
 5 
 6 <div id="qian" class="animated"><a href="/wweb/index/qian?id=4"><img src="__STATIC__/wweb/img/qian.png" /></a></div>
 7 
 8 
 9 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
10 <script type="text/javascript">
11 <!--
12     var yyck = true;
13     var audio=document.getElementById("chatAudio");
14     var openAudio=document.getElementById("openAudio");
15     document.addEventListener("WeixinJSBridgeReady", function () {    
16         audio.load();
17         openAudio.load();
18     }, false);
19 
20 //运动事件监听
21 if (window.DeviceMotionEvent) {
22     window.addEventListener('devicemotion',deviceMotionHandler,false);
23 }
24 //获取加速度信息
25 //通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率,进行设备是否有进行晃动的判断。
26 //而为了防止正常移动的误判,需要给该变化率设置一个合适的临界值。
27 var SHAKE_THRESHOLD = 4000;
28 var last_update = 0;
29 var x, y, z, last_x = 0, last_y = 0, last_z = 0;
30 function deviceMotionHandler(eventData) {
31         var acceleration =eventData.accelerationIncludingGravity;
32         var curTime = new Date().getTime();
33         if ((curTime-last_update)> 10) {
34             var diffTime = curTime -last_update;
35             last_update = curTime;
36             x = acceleration.x;
37             y = acceleration.y;
38             z = acceleration.z;
39             var speed = Math.abs(x +y + z - last_x - last_y - last_z) / diffTime * 10000;
40             if (speed > SHAKE_THRESHOLD) {
41                 if(!yyck){return false;}
42                 audio.play();
43                 $('#yyy').addClass('wobble');
44                 setTimeout(function(){
45                     audio.pause();
46                     openAudio.play();
47                     $('#yyy').removeClass('wobble');
48                     $('#qian').css('display','block');
49                     yyck = false;
50                 }, 1500);
51             }
52             last_x = x;
53             last_y = y;
54             last_z = z;
55         }
56 }
57 //-->
58 </script>

 

posted on 2018-07-20 15:55  流芳  阅读(303)  评论(0编辑  收藏  举报