解决IOS微信中 HTML5 中audio的自动播放问题。
生活随笔
收集整理的這篇文章主要介紹了
解决IOS微信中 HTML5 中audio的自动播放问题。
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
2019獨角獸企業重金招聘Python工程師標準>>>
<!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 微信瀏覽器中自動播放 HTML5 audio(音樂) 的正確方式</h1><p>核心原理: 在微信的JS-API 中 play 一下 audio 即可達到自動播放的目的(應該是微信自己做了處理)</p><br><br><br><audio id="bgmusic" src="http://www.w3school.com.cn/i/song.mp3" autoplay preload loop controls></audio><!-- 當使用方法1時必須加載 JS-SDK 的 JS 文件, 方法2不需要加載這個 JS （建議引用1.1.0的版本）--><script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script><script>// 方法1: 現在微信官方已經推出了微信JS-SDK, 最好還是不要使用"野生"方式, 因為不知道什么時候就可以不能用了!// http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html// 通過config接口注入權限驗證配置后, 在 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, 這里面就包含了所有的網絡類型// alert(e.err_msg);document.getElementById('bgmusic').play();});};}// 大家或多或少都知道 iOS Safari 不允許自動播放 audio, 可能已經被坑過了,// 但微信內嵌的瀏覽器應該是做了一些定制化, 允許自動播放 audio.// 測試了以下機型在微信內嵌瀏覽器中僅需設置 audio autoplay 即可自動播放(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// // 但是當手機是 iPhone6s iOS 9.1 WeChat 6.3.7 時, 必須做如下特殊處理才能在微信中自動播放(audio)音樂,// 我可以推測是 iOS 9 的兼容性問題么?// autoPlayAudio1(); // 推薦使用方法1// autoPlayAudio2(); // 也可以試一試方法2</script> </body> </html>轉載于:https://my.oschina.net/jishuge/blog/1557952
總結
以上是生活随笔為你收集整理的解决IOS微信中 HTML5 中audio的自动播放问题。的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数据仓库与ODS的区别
- 下一篇： Android GIS开发系列-- 入门