uni-app IOS H5音樂無法自動播放
(前端小白有什么說得不對的,別懟太兇2333333)
(一)對W3C的了解
小編也是一個開發不久的前端小白,在對音樂和視頻這些多媒體應用中也踩了一些坑
在我的思路中音樂播放不就是一個久解決了嗎?
附上W3C的多媒體事件
有了這些根本不把這個事情放在心里。愛掏網 - it200.com
但當我看到uniapp官網文檔audio時就傻眼了
(surprised)沒了很多方法的執行,最主要的是沒有DOM對象。愛掏網 - it200.com
但用了uniapp就要尊重框架的規定
讓我還能絕處逢生的是 uni.createInnerAudioContext
https://uniapp.dcloud.io/api/media/audio-context?id=createinneraudiocontext
(二)uni.createInnerAudioContext
無論是對象還是方法上來說這都是更優于uniapp官網audio標簽的選擇
在官網的uni.createInnerAudioContext示例中能夠找到自動播放的語句
屬性列表中也明確說明用法既用途
autoplay Boolean 是否自動開始播放,默認 false 否
在寫了一下代碼的之后講道理是src讀取到一個真實可用的路徑是能夠自動播放的
小編代碼如下
const innerAudioCOntext= uni.createInnerAudioContext();
innerAudioContext.autoplay=true;
innerAudioContext.onCanplay(()=>{
let timeLoad = Math.floor(innerAudioContext.duration); // 這里是獲取總播放時間
this.musicTotalTime = timeLoad; // 這里是賦值
this.$api.msg(‘加載完成自動播放了’);
});
innerAudioContext.src = data.Url; // data.Url就是音樂的路徑
代碼的執行有著這樣的先后順序
但是安卓與IOS在執行這件事上完全不是一回事兒。愛掏網 - it200.com
下面圖是安卓能夠正常自動播放的情況
下面圖是IOS不能正常自動播放的圖片
(三)環境
代碼是能運行在手機瀏覽器上,主要瀏覽人群是微信APP人群(所有圖片信息和錯誤問題都以微信APP內置瀏覽器為準、、別的瀏覽器小編沒有測試)