Safari 使用 audio 造成畫面渲染緩慢問題
前言
最近遇到一個案子是廣播電台,並在頁面中使用 audio 來播放 audio/mpeg 檔案,在電腦及 Android 上正常,在 Safari 系列卻一直無法載入。
經過開發者工具查看後發現,非 Safari 的瀏覽器在載入 audio 時,不會等待檔案完全載入後再繼續渲染,因此不會出現畫面卡頓的問題。
而 Safari 則會先將檔案完全載入後再播放,這導致在載入 audio 時會有一段時間的等待,頁面會完全空白,使用者感覺到網頁讀取緩慢而造成困惑。
解決方法
解決方法是將 audio 的 preload 設定為 none
,這樣就可以讓 Safari 在載入 audio 時不會等到檔案完全載入再繼續渲染,而是在載入 audio 時就直接繼續渲染頁面。
這邊需要設定 none
才行,如果只是刪除該屬性,Safari 預設會是 metadata
,這樣還是會等到檔案載入完成再繼續渲染。
<!-- 改成 none 後不會阻擋渲染 -->
<audio controls="controls" preload="none">
<source src="xxxx" type="audio/mpeg" />
</audio>