zoukankan      html  css  js  c++  java
  • 微信浏览器摇一摇播放音频

     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>
  • 相关阅读:
    【理论基础】ContentProvider的简要概述
    【实用篇】获取Android通讯录中联系人信息
    【转】Android应用底部导航栏(选项卡)实例
    【引用】Android程序实现完全退出
    【实用篇】Android之应用程序实现自动更新功能
    【基础篇】DatePickerDialog日期控件的基本使用(二) ——分别获取年、月、日、时、分
    练习1-13 打印水平或垂直直方图
    练习1-10
    练习1-9
    360前端面试题
  • 原文地址:https://www.cnblogs.com/lijea/p/9341923.html
Copyright © 2011-2022 走看看