• 微信网页背景音乐及互动音乐自动播放


    因为移动端的普及,在制作微信 H5 及微信互动如:摇一摇时,会涉及到页面中添加音乐,然后现在在手机中,为了避免流量流失情况,安卓和苹果系统都已禁止视频的自动播放了,

    解决方案:

        监听 DOM 加载,在DOM 加载之后来监听微信的 WeixinJSBridgeReady ,代码如下:

          document.addEventListener('DOMContentLoaded',function (){
            function audioAutoPlay(){
              var audioElem = document.getElementById('mail');
              audioElem .play();
              document.addEventListener("WeixinJSBridgeReady", function () {

                // 可在这里对 audioElem 进行 src 赋值   

                audioElem .play();
              }, false);
            }
              audioAutoPlay();
          });

    摇一摇:

      var SHAKE_THRESHOLD = 300,

      last_update = 0,

      x = y = z = last_x = last_y = last_z = 0,

      function deviceMotionHandler(eventData) {
        var acceleration = eventData.accelerationIncludingGravity;
        var curTime = new Date().getTime();

        if ((curTime - last_update) > 500) { //多次移动事件中取两个点的事件间隔
          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 * 1000);

          var dist = Math.sqrt((x-last_x)*(x-last_x)+(y-last_y)*(y-last_y)+(z-last_y)*(z-last_y))
          var speed = dist/diffTime*10000;

          if (speed > SHAKE_THRESHOLD) { 
            alert('摇一摇显示');

            audioAutoPlay();
          }
          last_x = x;
          last_y = y;
          last_z = z;
        }
      }

  • 相关阅读:
    JAVA写入文本文件
    oracle误删数据闪回
    Myeclipese :Creation of element failed解决方法
    Hibernate的四种状态
    java中list、set和map 的区别<转>
    C#操作mysql中临时表不自动删除
    WPF 实现地图的移动和滚动放大
    c# 将十六进制字符串写入注册表
    ASP.NET 视图状态概述:初步了解
    vs好用插件
  • 原文地址:https://www.cnblogs.com/xqmyhome/p/10108720.html
Copyright © 2020-2023  润新知