今天同事测试活动的时候,背景音效(多个)苹果机无法发出声音,几个手机都试过,没什么用。不过安卓机上倒是没这个问题,正常。

最开始以为是js冲突问题,将页面上所有的东西进行加处理(清空,一个个加进来),为了测试方便,在页面上加了个按钮,进行点击播放。

加到最后,都没有什么问题。

突然想到之前百度查找答案的一个说法:需要触摸触发。反正大概就是必须是人为去触发,而不是我们js进行调用click事件。

如此,我们就在原有页面上增加了一个按钮,当点击时,声音出来了。

到这一步,声音播放问题解决。

下一步就是解决初始的时候,点击时放出的声音。至于原先的按钮操作就由页面本身的一个开始按钮进行,幸亏页面最开始还有个开始按钮,要不然,这触发问题还得继续想(最外面加个蒙版,然后用户一点击,就触发,然后去除蒙版,或者将点击事件至于其他会点击的按钮处)。

audio有个属性是volume,用来控制音量的,1.0是最高的,0.0是静音。只是这个值,不能<audio volume="0.0" id="test">这么写。而是需要使用js进行设置document.getElementById("test").volume=0.0才行。而js初始设置,对于苹果机来说,最开始也是无效的,安卓倒是没事。

既然不能volume着手,只能换一个方式了。

突然想到,如果开始的时候play(),马上就parse(),我们人应该是捕捉不到的。就让同事去试了。

结果是成功。

所以暂时解决方式就是,点击开始按钮的时候,立马调用几个audio的play()方法,然后马上pause()。

还有个其他办法,是针对微信的,在ready的时候,就进行调起。

    <script type="text/javascript" src="js/jquery-1-6.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script> function autoPlayAudio1() {
wx.ready(function() {
document.getElementById('audio').play();
});
wx.config({
// 配置信息, 即使不正确也能使用 wx.ready
debug: false,
appId: '',
timestamp:1,
nonceStr: '',
signature: '',
jsApiList: []
}); }
autoPlayAudio1();
// 方法2: "野生"方法, 借用原来老的 WeixinJSBridge
function autoPlayAudio2() {
window.onload = function() {
// alert(typeof WeixinJSBridge);
WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
// 在这里拿到 e.err_msg, 这里面就包含了所有的网络类型
document.getElementById('audio').play();
});
};
}
function playbox(){
var audio=document.getElementById("audio");
if(audio!==null){
//检测播放是否已暂停.audio.paused 在播放器播放时返回false.
//alert(audio.paused);
if(audio.paused) {
audio.play();//audio.play();// 这个就是播放
}else{
audio.pause();// 这个就是暂停
}
}
}
</script>

微信-苹果机无法播放声音Audio的更多相关文章

  1. html5 微信真机调试方法vConsole

    html5 微信真机调试方法 vConsolehttps://blog.csdn.net/weixin_36934930/article/details/79870240

  2. html5 audio play()方法部分ios机不能播放声音

    前几天遇到了一个很奇葩的问题:执行audio.play方法,浏览器.安卓.部分ios可正常播放,部分ios不能播放部分声音,这就奇怪了. 我的第一反应是: 音频文件有问题  -- 写了一个domo验证 ...

  3. 摇一摇—微信7.0.8版本audio无法自动播放问题

    近日有一个项目出现audio无法自动播放,查看原因才发现是微信版本更新为7.0.8版本,需要有交互行为,第一次播放需要用户手动点击一下,无法使用DOM中的play()进行直接播放操作,那怎么办呢? 通 ...

  4. ios苹果机系统的1px显示解决方案

    1px边框在iPhone高清屏下,其实会变成2个物理像素的边框. /* 解决一像素问题 */ .navigation:before{ content: ""; pointer-ev ...

  5. picker组件,mode=date,苹果机年份从1开始

    由于在IOS上复制图片不方便, 所以用了张别的网站的图 这是在没有设置value和start的情况下出现的,安卓机上显示是好的.尝试完网上相关说法, 发现都不中! 通过各种挣扎啊!~ 心里苦啊~ 复制 ...

  6. 苹果 ios 微信浏览器界面 ajax 提交带 file 的 form 总是走error方法

    1. 问题 问题出在微信端,而且是苹果机的微信端(苹果你咋这么矫情,安卓正常).:代码还是之前的代码,貌似是苹果升级系统后部分版本出现的 BUG,后来证明确实跟 ios 版本有关,网上也找过类似的解决 ...

  7. 微信JSSDK支付接口-安卓机无法正常调起接口

    今天碰到个问题,是项目调起微信支付接口,苹果机都没有什么问题,但是安卓机的情况就是支付接口出现一下就消失了 试了将error反馈信息弹出来,也就是显示choosewxpay fail 找了半天不知道什 ...

  8. iOS苹果和微信中音频和视频实现自动播放的方法

    通过下面的方式可以解决,在iPhone手机微信中正常自动播放. 必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效,猜测微信接口做了处理~ <audio prel ...

  9. 微信小程序ios点击状态栏返回顶部不好使

    最近做了一款微信小程序,各方面感觉都很完美(萝卜一直这么自信),今天设计总监告诉我你的小程序怎么返回顶部不好使呀,吓得我赶紧拿手机试试,没毛病啊,我手机(苦逼的安卓机)上点两下就回去了呀,遂去找他理论 ...

随机推荐

  1. 第三百四十八节,Python分布式爬虫打造搜索引擎Scrapy精讲—通过自定义中间件全局随机更换代理IP

    第三百四十八节,Python分布式爬虫打造搜索引擎Scrapy精讲—通过自定义中间件全局随机更换代理IP 设置代理ip只需要,自定义一个中间件,重写process_request方法, request ...

  2. perl 模块的创建以及制定perl 模块的路径

    1) perl 模块的创建 perl 模块的后缀名为.pm, 其中的内容和一般的perl脚本相同, perl模块中通常放置可重用的函数以及变量, 比如创建一个fasta.pm,里面包含一个统计fast ...

  3. 解决:ADODB.Stream 错误 '800a0bbc' 写入文件失败

    重装更改目录为e盘后,上传文件出现问题.解决方法: 调用adodb.stream的savetofile方法时发生错误, ADODB.Stream 错误 800a0bbc 写入文件失败.(msxml3. ...

  4. 基于ThinkPHP的在线编辑器调用

    开源的在线编辑器有很多,比如FCKEditor,UEditor,Kindeditor等,调用方式也都大同小异 下面列举UEditor在线编辑器插件在ThinkPHP里面的应用 1.Ueditor下载地 ...

  5. LinuxMint下tty.js的安装指南

    1.简介 tty.js是使用Node.js开发的开源Web-based SSH.通过浏览器即可远程访问shell. 关于Web-based SSH的介绍参考https://en.wikipedia.o ...

  6. Eclipse + PyDev 快捷键

    ●多行缩进(减少缩进):tab/shift+tab ●复制行: Ctrl+Alt+方向键'↓' ●删除行:Ctrl+d ●自动完成:Alt+/  ●注释:Ctrl+/ ●窗口最大小:Ctrl+m == ...

  7. SSM框架快速整合实例——学生查询

    一.快速准备 SSM 框架即 Spring 框架.SpringMVC 框架.MyBatis 框架,关于这几个框架的基础和入门程序,我前面已经写过几篇文章作为基础和入门介绍了.这里再简单的介绍一下: 1 ...

  8. Java实习生面试题整理

    一.数据类型 包装类型 八个基本类型: boolean/1 byte/8 char/16 short/16 int/32 float/32 long/64 double/64 基本类型都有对应的包装类 ...

  9. WebGL 颜色与纹理

    1.纹理坐标 纹理坐标是纹理图像上的坐标,通过纹理坐标可以在纹理图像上获取纹理颜色.WebGL系统中的纹理坐标系统是二维的,如图所示.为了将纹理坐标和广泛使用的x.y坐标区分开来,WebGL使用s和t ...

  10. SPREAD for Windows Forms 下箭头追加行

    ''' <summary> ''' 下矢印の動作クラス ''' </summary> ''' <remarks></remarks> Public Cl ...