ios微信下vue項目組件切換並自動播放音頻的解決方案

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

慣例 , ios下的safari和微信內置瀏覽器都不支持audio的自動播放 , 一般的解決方案都是經過document.addEventListener('WeixinJSBridgeReady',function(){audio.play()},false)來實現的自動播放 , 可是

WeixinJSBridgeReady
事件從頁面加載開始到結束只會加載一次 , 並且不能經過removeEventListener來移除 , 因此會有兩個問題:
1.從首頁面到答題頁面是路由切換的 , 可是處於開始頁面時候 , WeixinJSBridgeReady這個事件已經加載完了 , 跳轉到答疑頁面的時候已經沒法監聽到該事件了;

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

通過不斷的測試 , 發現ios下不支持的緣由是 不支持動態建立的audio標籤自動播放 , 包括頁面第一次加載 , 因此轉化了思路 ,把audio標籤放在頂層的App.vue裏面 , 不隨着組件的切換建立和銷燬 , 而後在App.vue裏面寫一個的方法 , 接受src和callback的參數 , 在main.js掛在全局上, 每次切換的時候 ,調用該方法傳入對應的src , 代碼以下:App.vue

(關於爲何用document.getElementById , 其實原本是準備用$refs的 , 可是不知爲什麼在app.vue中沒法獲取 , 控制檯打印的$ref能看到有audio 了, 可是不可讀)

main.js

組件內:

這裏要注意的兩點: 1.app.vue中的audio標籤必須設置 controls , 而後經過css隱藏該audio ,不然沒法播放 ;

2.在頁面加載的時候須要經過 監聽 document.addEventListener('WeixinJSBridgeReady',function(){audio.load()},false) 讓audio.load()加載一次 ,不然後續也沒法自動播放 ;

以上就是最近作項目時候的總結的一個方法 , 全部的測試均爲我的測試 ,可能不具普適性 ,僅提供一種思路和解決方法 . 第一次寫文章 ,可能有不少沒寫清楚的地方 ,截圖內也有項目的一些需求代碼 ,請忽視 .有錯誤的地方 還但願大佬們指正.