最近在做一個(gè)英語(yǔ)答題項(xiàng)目 , 項(xiàng)目需求是通過答題取的成績(jī) , 答題的題型是分為 , 聽音選圖 , 看圖選詞 , 和填空題 . 項(xiàng)目總共分為了3個(gè)頁(yè)面 , 開始頁(yè) ,答題頁(yè) 和結(jié)束頁(yè)面 ,答題頁(yè)關(guān)于每種題型 , 我做了相應(yīng)的組件 , 每次切換題目的時(shí)候 ,顯示對(duì)應(yīng)的的組件 , 要求聽音選圖的時(shí)候會(huì)自動(dòng)播放音頻 .

慣例 , ios下的safari和微信內(nèi)置瀏覽器都不支持audio的自動(dòng)播放 , 通常的解決方案都是通過 document.addEventListener('WeixinJSBridgeReady',function(){audio.play()},false) 來實(shí)現(xiàn)的自動(dòng)播放 , 但是 WeixinJSBridgeReady 事件從頁(yè)面加載開始到結(jié)束只會(huì)加載一次 ,  而且不能通過 removeEventListener 來移除 , 所以會(huì)有兩個(gè)問題:

1.從首頁(yè)面到答題頁(yè)面是路由切換的 , 但是處于開始頁(yè)面時(shí)候 , WeixinJSBridgeReady這個(gè)事件已經(jīng)加載完了 , 跳轉(zhuǎn)到答疑頁(yè)面的時(shí)候已經(jīng)無法監(jiān)聽到該事件了;

2.首頁(yè)就是答題頁(yè)面的時(shí)候,在題型組件切換的時(shí)候只會(huì)在第一次加載聽力題型的時(shí)候會(huì)自動(dòng)播放 , 再次切換到這種題目的時(shí)候無法再次自動(dòng)播放 .

經(jīng)過不斷的測(cè)試 , 發(fā)現(xiàn)ios下不支持的原因是 不支持動(dòng)態(tài)創(chuàng)建的audio標(biāo)簽自動(dòng)播放 , 包括頁(yè)面第一次加載 , 所以轉(zhuǎn)化了思路 ,把a(bǔ)udio標(biāo)簽放在頂層的App.vue里面 , 不隨著組件的切換創(chuàng)建和銷毀 , 然后在App.vue里面寫一個(gè)的方法 , 接受src和callback的參數(shù) , 在main.js掛在全局上, 每次切換的時(shí)候 ,調(diào)用該方法傳入對(duì)應(yīng)的src , 代碼如下:App.vue

(關(guān)于為什么用document.getElementById , 其實(shí)本來是準(zhǔn)備用$refs的 , 但是不知為何在app.vue中無法獲取 , 控制臺(tái)打印的$ref能看到有audio 了, 但是不可讀)

main.js

組件內(nèi):

這里要注意的兩點(diǎn): 1.app.vue中的audio標(biāo)簽必須設(shè)置 controls , 然后通過css隱藏該audio ,否則無法播放 ;

2.在頁(yè)面加載的時(shí)候需要通過 監(jiān)聽  document.addEventListener('WeixinJSBridgeReady',function(){audio.load()},false)   讓audio.load()加載一次 ,否則后續(xù)也無法自動(dòng)播放 ;

總結(jié)

以上所述是小編給大家介紹的解決ios微信下vue項(xiàng)目組件切換并自動(dòng)播放音頻問題，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論