使用audio標籤遇到的兩個問題及解決方案

時間 2019-11-07

標籤使用 audio 標籤遇到兩個問題解決方案简体版

原文原文鏈接

<audio>標籤是 HTML 5 的新標籤。<audio>標籤訂義聲音，好比音樂各其它音頻流javascript

公司的項目須要使用這個標籤。在使用的過程當中遇到了兩個問題：一個是部分手機瀏覽器沒法實現自動播放（一樣也沒法使用js控制實現自動播放），還有一個是部分瀏覽器audio標籤沒法正常響應ended(播放結束)事件，沒法獲取audio標籤的duration屬性的值。這裏分享一下個人處理方法，但願可以幫助到一樣遇到相似問題的同窗html

一、部分手機瀏覽器沒法實現自動播放

這個現象產生的緣由是：部分瀏覽器考慮了安全問題（偷跑流量），因此必須用戶交互後才能播放。html5

知道了緣由那麼天然就很好處理了。對於這個問題，網上大多處理方式都是先監聽用戶的DOM操做，若是事件響應了音頻尚未播放，則播放音頻。java

而咱們這邊的業務需求，須要一開始就獲取自動播放的權限（音頻是咱們應用的一個關鍵功能），因此咱們的處理方式是頁面開始就引導用戶點擊。 git

用戶點擊「開始導遊」才能進入內容頁面github

這裏，用戶點擊以後才能使用咱們服務。用戶點擊以後，咱們也就獲取到了js控制自動播放的權限了。後端

若是大家的業務需求沒法使用以上方式在一開始就讓用戶點擊、獲取播放權限，並且音頻並不是頁面加載完就必須播放（例如背景音樂之類的）。那麼能夠先判斷一下當前瀏覽器是否支持自動播放，若是支持則頁面加載完當即播放音頻，若是不支持則監聽用戶的DOM操做再播放音頻。瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>audioPlugin Demo</title>
</head>
<body>
    <script type="text/javascript" src="src/audioPlayPlugin.js"></script>
    <script>
            var bgAudio=new audioController();
            bgAudio.supportAutoPlay({
                src:"file/test1.mp3",
                support:playAudio,//支持自動播放，則當即播放音頻
                nonsupport:function(){ //不支持自動播放，監聽到用戶點擊以後播放音頻
                    document.addEventListener("click",playAudio)
                }
            })
            function playAudio(){
                bgAudio.play("file/test1.mp3");
                document.removeEventListener("click",playAudio); //移除音頻自動播放的事件監聽
            }
    </script>
</body>
</html>

這裏我寫一個audioPlayPlugin.js,對audio標籤的經常使用操做進行了一些簡單的封裝。github地址,coding地址安全

二、部分瀏覽器audio標籤不正常響應ended(播放結束)事件，沒法獲取audio標籤的duration屬性的值

由於業務需求，我必須監聽音頻的各類狀態（播放中timeupdate、暫停pause、播放結束ended、緩衝waiting）等，可是在部分手機瀏覽器（例如MIUI的系統瀏覽器）中監聽不了ended事件。也沒法獲取audio標籤的duration屬性的值（若是可以獲取duration屬性的值，就能夠經過監聽timeupdate事件，判斷currrentTime和duration是否相等來模擬ended事件）。測試

起初看到文章說是 Response Headers的content-type屬性值爲audio/x-mpeg致使的（瀏覽器不支持x-mpeg模式），把值設置爲audio/mpeg便可。然而，找到後端說了這事兒，他弄了半天把content-type屬性值設爲audio/mpeg，然而問題並無解決。

最後我作了一個測試，同一個音頻直接放在網站目錄下用相對路徑就能夠正常監聽ended事件，也能正常獲取duration屬性值。生產環境咱們的文件是在阿里雲上，使用絕對路徑。對比了一下headers信息，發現惟一不一樣的地方就是Status Code不一樣。能正常監聽的Status Code是206，不正常的是200。206是分段加載，具體各類status code能夠戳這裏。

次日，後端主動問我那個問題解決了沒。我就說了個人發現，最後後端將音頻文件的返回方式調整爲206後，問題成功解決。

總結一下：發生這個問題的緣由是音頻類型文件請求的響應方式不對。其實默認的響應方式就是206，只是咱們後端在設置文件響應方式的默認配置時，直接copy了一些配置文件，其實並不知道他修改了音頻文件的響應方式。

以上是我使用<audio>標籤時遇到的兩個問題，和個人解決方案。但願可以幫助到各位同窗。