解決ios微信下vue項目組件切換并自動播放音頻問題-創(chuàng)新互聯(lián)

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

曲松網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),曲松網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為曲松超過千家提供企業(yè)網(wǎng)站建設(shè)服務。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢，請找那個售后服務好的曲松做網(wǎng)站的公司定做！

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

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

2.首頁就是答題頁面的時候,在題型組件切換的時候只會在第一次加載聽力題型的時候會自動播放 , 再次切換到這種題目的時候無法再次自動播放 .

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

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

main.js

 

組件內(nèi):

 

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

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

總結(jié)

以上所述是小編給大家介紹的解決ios微信下vue項目組件切換并自動播放音頻問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)建站網(wǎng)站的支持！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)建站bm7419.com，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、建站服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網(wǎng)站題目：解決ios微信下vue項目組件切換并自動播放音頻問題-創(chuàng)新互聯(lián)
瀏覽路徑：http://bm7419.com/article30/dscepo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計、做網(wǎng)站、企業(yè)網(wǎng)站制作、定制網(wǎng)站、小程序開發(fā)、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)