在IOS中第一次调用play方法播放音频会被阻止，必须得等用户有交互动作，比如touchstart，click后才能正常调用，所以可以在摇一摇之前提醒用户点击一下开始游戏的按钮或者给用户一个弹窗，用户点击的时候播放一个超级短的无声音文件，之后替换src，这样再调用play方法就可以了。

代码如下如：

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Document</title>

</head>

<body>

 <button>开始游戏</button>

  <audio src="https://daoket.github.io/img/load.mp3" id="audio"></audio>

  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

  <script type="text/javascript">

    $('button').one('touchstart', function () {

        var audio = document.getElementById("audio");

        audio.play();

        audio.setAttribute('src', 'https://daoket.github.io/img/shake.mp3');

        audio.load();

        $(this).text('游戏进行中');

    })

    /**

     * 移动端摇一摇

     * @params devicemotion 提供设备加速度信息

     */

    window.addEventListener('devicemotion', devicemotionHandler, false);

    var x,

        y,

        z,

        last_x,

        last_y,

        last_z,

        last_time = 0,

        SHAKE_SPEED = 4000;

   function devicemotionHandler (evet) {

       var acc = event.accelerationIncludingGravity,

           curTime = new Date().getTime(),

           diffTime = curTime - last_time;

        if (diffTime > 100) {

              last_time = curTime;

              x = acc.x;

              y = acc.y;

              z = acc.z;

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

              if (speed > SHAKE_SPEED) {

                document.getElementById("audio").play()

              }

              last_x = x;

              last_y = y;

              last_z = z;

        }

   }

  </script>

</body>

</html>

IOS中微信摇一摇声音无法播放解决办法的更多相关文章

  1. 在ios中微信video和audio无法自动播放解决方案

    WeixinJSBridgeReady页面初始化的时候会执行 document.addEventListener("WeixinJSBridgeReady", function ( ...

  2. 微信公众平台Token验证失败的解决办法

    微信公众平台Token验证失败的解决办法 1.可查看url和token是否正确 2.查看服务器端口是否为80端口 3.你可以通过记录log日志来判断是否接受到微信提交过来的信息 1.$fp=fopen ...

  3. iOS9中关于 NSURLSession/NSURLConnection HTTP load failed 的解决办法

    最近为了新的存管app上线,忙了近一个月,重新过了一段996的日子,今天终于可以喘口气,继续更新博客了.本文记录一下在iOS 9中发送https请求遇到的问题及解决办法,希望通过本文,可以对ATS的配 ...

  4. jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法

    jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法   在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们 ...

  5. 5个Android开发中比较常见的内存泄漏问题及解决办法

    android中一个对象已经不需要了,但是其他对象还持有他的引用,导致他不能回收,导致这个对象暂存在内存中,这样内存泄漏就出现了.   内存泄漏出现多了,会是应用占用过多的没存,当占用的内存超过了系统 ...

  6. eclipse中运行出错:无法初始化主类的解决办法

    问题描述:eclipse中运行程序时,出现如下错误 解决办法: 出现此类:无法初始化主类有可能是因为eclipse中Java的版本与JDK的版本不匹配,我开始用的时候eclipse中用的是Java s ...

  7. Ubuntu 14.04 LTS 火狐浏览器中，鼠标选择文字被删除的解决办法

    这篇文章主要介绍了Ubuntu 火狐浏览器中,鼠标选择文字被删除的解决办法,需要的朋友可以参考下在终端中输入命令: ibus-setup将 “在应用程序窗口中启用内嵌编辑模式“ 选项取消

  8. Linux下Oracle中SqlPlus时上下左右键乱码问题的解决办法

    window下的sqlplus可以通过箭头键,来回看历史命令,用起来非常的方便. 但是在Linux下,会出现各种乱码,非常不方便,如下图所示,每次打错一个字符就需要重新打一遍. 解决办法:rlwrap ...

  9. ios下元素溢出设置 overflow:auto; 不能滑动解决办法

    ios下元素溢出设置 overflow:auto; 不能滑动解决办法: overflow:auto; overflow-y:scroll; -webkit-overflow-scrolling:tou ...

随机推荐

  1. day 93 Restframwork

    苑昊博客: http://www.cnblogs.com/yuanchenqi/articles/7570003.html  一.queryset 特性 from django.db import m ...

  2. day 64 Django 第五天 多表对多表的对应关系ORM

     一.查 设置 Author表  在 views文件中 # 作者表 class Author(models.Model): id =models.AutoField(primary_key=True) ...

  3. [USACO06DEC] 牛奶模式Milk Patterns

    题目链接:戳我 我们知道后缀数组的h数组记录的是后缀i和后缀i-1的最长公共前缀长度,后缀的前缀其实就是子串. 因为是可以重复出现的子串,所以我们只要计算哪些h数组的长度大于等于x即可.这一步操作我们 ...

  4. TOJ_12470

    #include <stdio.h> struct node{ int x; int y; int step;}first; int zx[4]={-1,0,1,0};int zy[4]= ...

  5. django 使用其自带的验证系统 进行用户名有效性验证 登录状态验证 登入操作 登出操作

    from django.shortcuts import render, redirect from django.contrib.auth import authenticate, login, l ...

  6. 教你利用Node.js漏洞搞事情

    PentestingNode.js Application : Nodejs Application Security 原文地址:http://www.websecgeeks.com/2017/04/ ...

  7. Exploit之初识Linux下缓冲区溢出

    本文的目的不是为了介绍如何进行恶意的破坏性活动,而是为了教会你如何去防御此类破坏性活动,以帮助你扩大知识范围,完善自己的技能,如有读者运用本文所学技术从事破坏性活动,本人概不负责. 0×01 前言 1 ...

  8. 《JAVA与模式》之适配器模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述适配器(Adapter)模式的: 适配器模式把一个类的接口变换成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能 ...

  9. Swift 里字符串（一）概览

    感受一下字符串相关的源文件个数  String 概览 是一个结构体 只有一个变量,类型是 _StringGuts  如上所示,String 真正的内容在__StringStorage或者__Sha ...

  10. git 忽略某些文件的命令

    正常的,我们在提交项目版本的时候,经常会存在一些需要忽略的文件或者文件夹,那这个时候,我们就可以通过git的一些操作命令来实现! vim .gitignore 通过上面一句话进入编辑忽略文件/文件夹的 ...