小程序自动播放音频ios
2018-05-17 16:45:00 weixin_34397291 阅读数 9

解决办法是,加载页面就给添加一次点击事件

<audio id="audioDom" src="error.mp3" onclick="playAudio()" preload></audio>

var audioDom= docoment.getElementByld("audioDom");

audioDom.onclick = function(e){}

//微信浏览器内部初始化完成后

document.addEventListener("WeixinJSBridgeReady", function () {

      audioDom.load();

}, false);

//监听点击事件

window.addEventListener('click', playAudio, false);


function playAudio(obj) {

      audioDom.play();

}

2017-10-01 16:13:43 tangxiujiang 阅读数 5083

对audio,利用trigger('play')在ios上不能触发audio播放,原因ios 内置浏览器safari要播放音频,需要人为去触发,或者在微信WeixinJSBridgeReady()函数内设置自动触发。给audio设置autoplay也不生效。

html代码如下:

      <audio src="mp3/shakingAudio.mp3" preload="preload" id="shakingAudio"></audio>
js代码如下(先引入jquery):

      $(function(){
           $('#shakingAudio').trigger('play');
      });
结果:该方法在android下可以触发audio播放事件,但是不能触发ios下audio播放事件

解决方法:在微信WeixinJSBridgeReady函数内触发播放事件

           1、在html中先引入jweixin.js

         <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
           2、js代码如下:     

         $(function(){
            $('#shakingAudio').play();
            document.addEventListener('WeixinJSBridgeReady',function(){
                    $('#shakingAudio').play();
            },false);
         });


结论:通过以上设置就可以在android和ios下自动播放音频了。亲测可用

以下方法,亲测不行

1、在WeixinJSBridgeReady()里面设置延时在播放

  $('#shakingAudio').play();
            document.addEventListener('WeixinJSBridgeReady',function(){
                   setTimeOut( $('#shakingAudio').play();
            },5000,false);
  });

言下之意就是只支持启动的时候播放

2、在微信的ready()函数内添加play()函数 

$(function(){
    autoPlay();

    function autoPlay(){
          wx.config({
               //配置信息,即使不正确也能使用wx.ready()
               debug:false,
               appId:'',
               timestamp:1,
               nonceStr:'',
               signature:'',
               jsApiList:[]
          });
          wx.ready(function(){
                $('#shakingAudio').play();
          });
    }
});

3、

$(function(){
     $('#shakingAudio')[0].play();
});



                            
2015-12-21 16:59:36 qq_16494241 阅读数 3776

ios 为了节省用户流量,对于 audio 和 video标签的 preload 和 autopaly 标签会自动拦截,除非用户手动点击交互才会执行 。

对于背景音乐,又必须加载的时候就要执行,解决方法:(不过注意只能在微信浏览器里面打开)

 

document.addEventListener("WeixinJSBridgeReady", function () {
    WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
        document.getElementById('chatAudio').play();
    });
}, false);

 

或(判断)

 

function onBridgeReady(){  
	WeixinJSBridge.invoke('getNetworkType', {}, function (e) {  
		document.getElementById('chatAudio').play();
	});  
}
if (typeof WeixinJSBridge === "undefined"){
	document.addEventListener("WeixinJSBridgeReady", onBridgeReady , false); 	
}else{
	onBridgeReady();
}

 

 

 

 

 

也有特别的 ios 设置后,交互事件不一定兼容

最近做了一个摇一摇功能的页面,摇一摇时触发播放摇动声音的音频,此音频播放完成后,再播放结束音频,但有一个同事的ios就是不能正常播放

以下是HTML代码

 

<div style="display:none;">
    <audio id="chatAudio" src="public/sound/shake.mp3"></audio>
    <audio id="chatAudio2" src="public/sound/shake_ok.mp3"></audio>
    <div class="playBtn"></div>
    <div class="playBtn2"></div>
</div>

 

以下是未解决播放问题的JS代码

 

var $myVideo = $("#chatAudio")[0];
var $myVideo2 = $("#chatAudio2")[0];

$('.playBtn').on('click',function(){
	//音频
	$myVideo.play();
});
$('.playBtn2').on('click',function(){
	//完成音频
	$myVideo2.play();
});

var myShakeEvent = new Shake({ 
	threshold:10,
	timeout:1100
});

myShakeEvent.start();
window.addEventListener('shake', shakeEventDidOccur, false);

function shakeEventDidOccur(){
	$('.playBtn').trigger('click');//开始声音
	$myVideo.addEventListener("ended", function(){
		$('.playBtn2').trigger('click');//结束声音
	}, false);
}

 

以下是解决播放问题的JS代码

 

var $myVideo = $("#chatAudio")[0];
var $myVideo2 = $("#chatAudio2")[0];
//解决IOS设置对音频的友好处理问题(判断是否iphone4则不执行,iphone4暂停后不能再播放)题
if($(window).height() > 460 && $(window).width() >= 320 && !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){
	document.addEventListener("WeixinJSBridgeReady", function () {
		WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
			$myVideo.play();
			$myVideo.pause();
			$myVideo2.play();
			$myVideo2.pause();
		});
	}, false);
}

$('.playBtn').on('click',function(){
	//音频
	$myVideo.play();
});
$('.playBtn2').on('click',function(){
	//完成音频
	$myVideo2.play();
});

var myShakeEvent = new Shake({ 
	threshold:10,
	timeout:1100
});

myShakeEvent.start();
window.addEventListener('shake', shakeEventDidOccur, false);

function shakeEventDidOccur(){
	$('.playBtn').trigger('click');//开始声音
	$myVideo.addEventListener("ended", function(){
		$('.playBtn2').trigger('click');//结束声音
	}, false);
}

 

经测试,两个音频可以正常播放了

 

 

 

2018-01-09 17:05:45 qq_25600055 阅读数 516

ios 为了节省用户流量,对于 audio 和 video标签的 preload 和 autopaly 标签会自动拦截,除非用户手动点击交互才会执行 。

对于背景音乐,又必须加载的时候就要执行,解决方法:(不过注意只能在微信浏览器里面打开)

[html] view plain copy
  1. document.addEventListener("WeixinJSBridgeReady", function () {  
  2.     WeixinJSBridge.invoke('getNetworkType', {}, function (e) {  
  3.         document.getElementById('chatAudio').play();  
  4.     });  
  5. }, false);  

或(判断)

[html] view plain copy
  1. function onBridgeReady(){    
  2.     WeixinJSBridge.invoke('getNetworkType', {}, function (e) {    
  3.         document.getElementById('chatAudio').play();  
  4.     });    
  5. }  
  6. if (typeof WeixinJSBridge === "undefined"){  
  7.     document.addEventListener("WeixinJSBridgeReady", onBridgeReady , false);      
  8. }else{  
  9.     onBridgeReady();  
  10. }  


也有特别的 ios 设置后,交互事件不一定兼容

最近做了一个摇一摇功能的页面,摇一摇时触发播放摇动声音的音频,此音频播放完成后,再播放结束音频,但有一个同事的ios就是不能正常播放

以下是HTML代码

[html] view plain copy
  1. <div style="display:none;">  
  2.     <audio id="chatAudio" src="public/sound/shake.mp3"></audio>  
  3.     <audio id="chatAudio2" src="public/sound/shake_ok.mp3"></audio>  
  4.     <div class="playBtn"></div>  
  5.     <div class="playBtn2"></div>  
  6. </div>  

以下是未解决播放问题JS代码

[html] view plain copy
  1. var $myVideo = $("#chatAudio")[0];  
  2. var $myVideo2 = $("#chatAudio2")[0];  
  3.   
  4. $('.playBtn').on('click',function(){  
  5.     //音频  
  6.     $myVideo.play();  
  7. });  
  8. $('.playBtn2').on('click',function(){  
  9.     //完成音频  
  10.     $myVideo2.play();  
  11. });  
  12.   
  13. var myShakeEvent = new Shake({   
  14.     threshold:10,  
  15.     timeout:1100  
  16. });  
  17.   
  18. myShakeEvent.start();  
  19. window.addEventListener('shake', shakeEventDidOccur, false);  
  20.   
  21. function shakeEventDidOccur(){  
  22.     $('.playBtn').trigger('click');//开始声音  
  23.     $myVideo.addEventListener("ended", function(){  
  24.         $('.playBtn2').trigger('click');//结束声音  
  25.     }, false);  
  26. }  

以下是解决播放问题的JS代码

[html] view plain copy
  1. var $myVideo = $("#chatAudio")[0];  
  2. var $myVideo2 = $("#chatAudio2")[0];  
  3. //解决IOS设置对音频的友好处理问题(判断是否iphone4则不执行,iphone4暂停后不能再播放)题  
  4. if($(window).height() > 460 && $(window).width() >= 320 && !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){  
  5.     document.addEventListener("WeixinJSBridgeReady", function () {  
  6.         WeixinJSBridge.invoke('getNetworkType', {}, function (e) {  
  7.             $myVideo.play();  
  8.             $myVideo.pause();  
  9.             $myVideo2.play();  
  10.             $myVideo2.pause();  
  11.         });  
  12.     }, false);  
  13. }  
  14.   
  15. $('.playBtn').on('click',function(){  
  16.     //音频  
  17.     $myVideo.play();  
  18. });  
  19. $('.playBtn2').on('click',function(){  
  20.     //完成音频  
  21.     $myVideo2.play();  
  22. });  
  23.   
  24. var myShakeEvent = new Shake({   
  25.     threshold:10,  
  26.     timeout:1100  
  27. });  
  28.   
  29. myShakeEvent.start();  
  30. window.addEventListener('shake', shakeEventDidOccur, false);  
  31.   
  32. function shakeEventDidOccur(){  
  33.     $('.playBtn').trigger('click');//开始声音  
  34.     $myVideo.addEventListener("ended", function(){  
  35.         $('.playBtn2').trigger('click');//结束声音  
  36.     }, false);  
  37. }  

经测试,两个音频可以正常播放了


2016-10-19 14:06:33 qq_29596627 阅读数 491

       

必须触发:

   $(document).ready(function () {

       //由于安卓4.2版本以上,IOS由于安全原因禁用自动播放

        $("html").one("touchstart", function () {
            var audio = document.getElementById("chatAudio");

            audio.play();

           //这是一个没有声音的音频

            audio.src = "audio/20161018_001.mp3";

        });

  });


//每隔10秒调用这个函数就自动播放声音

function   bofan(){

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

  //这是一个正常有声音的音频
                            audio.src = "audio/alarm.mp3";
                            audio.play();

}

    声明    :(1)由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放  ,所以我做触摸事件,测试安卓,iosAPP,ios微信, 自动播放音频没有问题;         

                  (2)注意想要完美iosAPP ,ios微信,安卓自动播放音频还是靠ios外壳支持,安卓接口设置,这是必须的; 掉进抗出不来

                  



ios播放音频

阅读数 796

iOS 之播放音频

阅读数 207

ios 播放音频

阅读数 1306

没有更多推荐了,返回首页