zoukankan      html  css  js  c++  java
  • 微信-苹果机无法播放声音Audio

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

    最开始以为是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>
    
  • 相关阅读:
    gearman管理工具GearmanManager的安装与使用
    php使用gearman进行任务分发
    centos7下的FastDFS5.09的安装与使用
    centos7下的glusterfs的安装与使用
    centos7下keepalived1.3.4安装与使用
    centos7下haproxy1.7的使用与配置
    centos7下apache2.4反向代理
    centos7下Redis3的安装与使用
    php使用fputcsv进行大数据的导出
    php新增的一些特性
  • 原文地址:https://www.cnblogs.com/danlis/p/6612215.html
Copyright © 2011-2022 走看看