最近在做一個英語答題專案 , 專案需求是通過答題取的成績 , 答題的題型是分為 , 聽音選圖 , 看圖選詞 , 和填空題 . 專案總共分為了3個頁面 , 開始頁 ,答題頁 和結束頁面 ,答題頁關於每種題型 , 我做了相應的元件 , 每次切換題目的時候 ,顯示對應的的元件 , 要求聽音選圖的時候會自動播放音訊 .
慣例 , ios下的safari和微信內建瀏覽器都不支援audio的自動播放 , 通常的解決方案都是通過document.addEventListener('WeixinJSBridgeReady',function(){audio.play()},false)來實現的自動播放 , 但是
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()載入一次 ,否則後續也無法自動播放 ;
以上就是最近做專案時候的總結的一個方法 , 所有的測試均為個人測試 ,可能不具普適性 ,僅提供一種思路和解決方法 . 第一次寫文章 ,可能有很多沒寫清楚的地方 ,截圖內也有專案的一些需求程式碼 ,請忽視 .有錯誤的地方 還希望大佬們指正.