IOS中微信摇一摇声音无法播放解决办法
在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中微信摇一摇声音无法播放解决办法的更多相关文章
- 在ios中微信video和audio无法自动播放解决方案
WeixinJSBridgeReady页面初始化的时候会执行 document.addEventListener("WeixinJSBridgeReady", function ( ...
- 微信公众平台Token验证失败的解决办法
微信公众平台Token验证失败的解决办法 1.可查看url和token是否正确 2.查看服务器端口是否为80端口 3.你可以通过记录log日志来判断是否接受到微信提交过来的信息 1.$fp=fopen ...
- iOS9中关于 NSURLSession/NSURLConnection HTTP load failed 的解决办法
最近为了新的存管app上线,忙了近一个月,重新过了一段996的日子,今天终于可以喘口气,继续更新博客了.本文记录一下在iOS 9中发送https请求遇到的问题及解决办法,希望通过本文,可以对ATS的配 ...
- jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法
jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法 在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们 ...
- 5个Android开发中比较常见的内存泄漏问题及解决办法
android中一个对象已经不需要了,但是其他对象还持有他的引用,导致他不能回收,导致这个对象暂存在内存中,这样内存泄漏就出现了. 内存泄漏出现多了,会是应用占用过多的没存,当占用的内存超过了系统 ...
- eclipse中运行出错:无法初始化主类的解决办法
问题描述:eclipse中运行程序时,出现如下错误 解决办法: 出现此类:无法初始化主类有可能是因为eclipse中Java的版本与JDK的版本不匹配,我开始用的时候eclipse中用的是Java s ...
- Ubuntu 14.04 LTS 火狐浏览器中，鼠标选择文字被删除的解决办法
这篇文章主要介绍了Ubuntu 火狐浏览器中,鼠标选择文字被删除的解决办法,需要的朋友可以参考下在终端中输入命令: ibus-setup将 “在应用程序窗口中启用内嵌编辑模式“ 选项取消
- Linux下Oracle中SqlPlus时上下左右键乱码问题的解决办法
window下的sqlplus可以通过箭头键,来回看历史命令,用起来非常的方便. 但是在Linux下,会出现各种乱码,非常不方便,如下图所示,每次打错一个字符就需要重新打一遍. 解决办法:rlwrap ...
- ios下元素溢出设置 overflow:auto; 不能滑动解决办法
ios下元素溢出设置 overflow:auto; 不能滑动解决办法: overflow:auto; overflow-y:scroll; -webkit-overflow-scrolling:tou ...
随机推荐
- BitAdminCore框架更新日志20180519
20180519更新内容 昨天更新的版本,早上自己下载下来发现创建项目不成功. 这个问题已经多次出现,主要是cookiecutter编码问题,项目引用大量外部js文件,部分文件在复制的时候编码较验不通 ...
- SHT20 IIC 寄存器概述
** 注:部分内容来自SHT20芯片手册翻译 ** 1.寄存器列表 名称 指令(bin) 寄存器内容(hex) 主机模式(Trigger T measurement hold master) 1110 ...
- android界面
自定义控件EditText 在src中的drawable新建myeditext.xml文件<?xml version="1.0" encoding="utf-8&q ...
- IDEA批量修改变量名操作
批量修改变量名操作:shift+F6选中变量---->修改变量---->Enter回车
- bzoj 3027: [Ceoi2004]Sweet （生成函数）
题目传送门:https://www.lydsy.com/JudgeOnline/problem.php?id=3027. 题目大意:有$n$种数,每种有$C_i$个,问你在这些数中取出$[l,r]$个 ...
- iOS 获取设备的各种信息的方法
一.目录结构: 获取屏幕宽度与高度 获取设备版本号 获取iPhone名称 获取app版本号 获取电池电量 获取当前系统名称 获取当前系统版本号 获取通用的唯一识别码UUID 获取当前设备IP 获取总内 ...
- linux下安装mysql-5.7.20
1.下载地址 https://downloads.mysql.com/archives/community/ 2.安装步骤 解压: groupadd mysql useradd -r -g mysql ...
- keepalived安装配置实战心得(实现高可用保证网络服务不间断)
keepalived安装配置实战心得(实现高可用保证网络服务不间断) 一.准备2台虚拟机 安装的系统是:centos-release-7-1.1503.el7.centos.2.8.x86_6 ...
- IO概述、异常、File文件类_DAY19
IO概述: 操作数据的工具 IO流,即数据流,数据像水流一样通过IO工具进行传输. 程序 <IO> 硬盘 绝对路径与相对路径 1:异常(理解) (1)就是程序的非正常情况. 异常相关 ...
- https数字证书交换过程介绍
文章转自:https://www.2cto.com/kf/201804/739010.html,感谢原作者的辛苦整理,讲解的很清楚,谢谢. [https数字证书交换过程介绍] 注意:该问的背景用到了非 ...