解决IOS微信中 HTML5 中audio的自动播放问题。
生活随笔
收集整理的這篇文章主要介紹了
解决IOS微信中 HTML5 中audio的自动播放问题。
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><title>Auto play html audio in iOS WeChat InAppBrowser the right way</title> </head> <body><h1>在 iOS 微信瀏覽器中自動(dòng)播放 HTML5 audio(音樂) 的正確方式</h1><p>核心原理: 在微信的JS-API 中 play 一下 audio 即可達(dá)到自動(dòng)播放的目的(應(yīng)該是微信自己做了處理)</p><br><br><br><audio id="bgmusic" src="http://www.w3school.com.cn/i/song.mp3" autoplay preload loop controls></audio><!-- 當(dāng)使用方法1時(shí)必須加載 JS-SDK 的 JS 文件, 方法2不需要加載這個(gè) JS （建議引用1.1.0的版本）--><script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script><script>// 方法1: 現(xiàn)在微信官方已經(jīng)推出了微信JS-SDK, 最好還是不要使用"野生"方式, 因?yàn)椴恢朗裁磿r(shí)候就可以不能用了!// http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html// 通過config接口注入權(quán)限驗(yàn)證配置后, 在 ready 中 play 一下 audiofunction autoPlayAudio1() {wx.config({// 配置信息, 即使不正確也能使用 wx.readydebug: false,appId: '',timestamp: 1,nonceStr: '',signature: '',jsApiList: []});wx.ready(function() {document.getElementById('bgmusic').play();});}// 方法2: "野生"方法, 借用原來老的 WeixinJSBridgefunction autoPlayAudio2() {window.onload = function() {// alert(typeof WeixinJSBridge);WeixinJSBridge.invoke('getNetworkType', {}, function(e) {// 在這里拿到 e.err_msg, 這里面就包含了所有的網(wǎng)絡(luò)類型// alert(e.err_msg);document.getElementById('bgmusic').play();});};}// 大家或多或少都知道 iOS Safari 不允許自動(dòng)播放 audio, 可能已經(jīng)被坑過了,// 但微信內(nèi)嵌的瀏覽器應(yīng)該是做了一些定制化, 允許自動(dòng)播放 audio.// 測試了以下機(jī)型在微信內(nèi)嵌瀏覽器中僅需設(shè)置 audio autoplay 即可自動(dòng)播放(audio)音樂, 無需特殊處理.// * iPhone5 iOS 7.0.6 WeChat 6.2// * iPhone5s iOS 8.1.2 WeChat 6.3.7// * iPhone6Plus iOS 8.1.3 WeChat 6.3.7// * MI1S Android 4.1.2 WeChat 6.3.7// // 但是當(dāng)手機(jī)是 iPhone6s iOS 9.1 WeChat 6.3.7 時(shí), 必須做如下特殊處理才能在微信中自動(dòng)播放(audio)音樂,// 我可以推測是 iOS 9 的兼容性問題么?// autoPlayAudio1(); // 推薦使用方法1// autoPlayAudio2(); // 也可以試一試方法2</script> </body> </html>轉(zhuǎn)載于:https://my.oschina.net/jishuge/blog/1557952
總結(jié)
以上是生活随笔為你收集整理的解决IOS微信中 HTML5 中audio的自动播放问题。的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数据仓库与ODS的区别
- 下一篇： 简单的基于hash和hashchange