ios 為了節省使用者流量，對於 audio 和 video標籤的 preload 和 autopaly 標籤會自動攔截，除非使用者手動點選互動才會執行 。

對於背景音樂，又必須載入的時候就要執行，解決方法：（不過注意只能在微信瀏覽器裡面開啟）

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

或（判斷）

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程式碼

1. <divstyle="display:none;">
2.     <audioid="chatAudio"src="public/sound/shake.mp3"></audio>
3.     <audioid="chatAudio2"src="public/sound/shake_ok.mp3"
   ></audio>
4.     <divclass="playBtn"></div>
5.     <divclass="playBtn2"></div>
6. </div>

以下是未解決播放問題的JS程式碼

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

以下是解決播放問題的JS程式碼

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. $('.playBtn').on('click',function(){  
15.     //音訊  
16.     $myVideo.play();  
17. });  
18. $('.playBtn2').on('click',function(){  
19.     //完成音訊  
20.     $myVideo2.play();  
21. });  
22. var myShakeEvent = new Shake({   
23.     threshold:10,  
24.     timeout:1100  
25. });  
26. myShakeEvent.start();  
27. window.addEventListener('shake', shakeEventDidOccur, false);  
28. function shakeEventDidOccur(){  
29.     $('.playBtn').trigger('click');//開始聲音  
30.     $myVideo.addEventListener("ended", function(){  
31.         $('.playBtn2').trigger('click');//結束聲音  
32.     }, false);  
33. }  

經測試，兩個音訊可以正常播放了