資訊專欄INFORMATION COLUMN
摘要：第二天，后端主動問我那個問題解決了沒。我就說了我的發(fā)現(xiàn)，最后后端將音頻文件的返回方式調整為后，問題成功解決?？偨Y一下發(fā)生這個問題的原因是音頻類型文件請求的響應方式不對。以上是我使用標簽時遇到的兩個問題，和我的解決方案。
??公司的項目需要使用這個標簽。在使用的過程中遇到了兩個問題：一個是部分手機瀏覽器無法實現(xiàn)自動播放（同樣也無法使用js控制實現(xiàn)自動播放），還有一個是部分瀏覽器audio標簽無法正常響應ended(播放結束)事件，無法獲取audio標簽的duration屬性的值。這里分享一下我的處理方法，希望能夠幫助到同樣遇到類似問題的同學
1、部分手機瀏覽器無法實現(xiàn)自動播放這個現(xiàn)象產生的原因是：部分瀏覽器考慮了安全問題（偷跑流量），所以必須用戶交互后才能播放。
??知道了原因那么自然就很好處理了。對于這個問題，網上大多處理方式都是先監(jiān)聽用戶的DOM操作，如果事件響應了音頻還沒有播放，則播放音頻。
??而我們這邊的業(yè)務需求，需要一開始就獲取自動播放的權限（音頻是我們應用的一個關鍵功能），所以我們的處理方式是頁面開始就引導用戶點擊。
用戶點擊“開始導游”才能進入內容頁面
??這里，用戶點擊之后才能使用我們服務。用戶點擊之后，我們也就獲取到了js控制自動播放的權限了。
??如果你們的業(yè)務需求無法使用以上方式在一開始就讓用戶點擊、獲取播放權限，而且音頻并非頁面加載完就必須播放（例如背景音樂之類的）。那么可以先判斷一下當前瀏覽器是否支持自動播放，如果支持則頁面加載完立即播放音頻，如果不支持則監(jiān)聽用戶的DOM操作再播放音頻。
audioPlugin Demo
??這里我寫一個audioPlayPlugin.js,對audio標簽的常用操作進行了一些簡單的封裝。github地址,coding地址
2、部分瀏覽器audio標簽不正常響應ended(播放結束)事件，無法獲取audio標簽的duration屬性的值??因為業(yè)務需求，我必須監(jiān)聽音頻的各種狀態(tài)（播放中timeupdate、暫停pause、播放結束ended、緩沖waiting）等，但是在部分手機瀏覽器（例如MIUI的系統(tǒng)瀏覽器）中監(jiān)聽不了ended事件。也無法獲取audio標簽的duration屬性的值（如果能夠獲取duration屬性的值，就可以通過監(jiān)聽timeupdate事件，判斷currrentTime和duration是否相等來模擬ended事件）。
??起初看到文章說是 Response Headers的content-type屬性值為audio/x-mpeg導致的（瀏覽器不支持x-mpeg模式），把值設置為audio/mpeg即可。然而，找到后端說了這事兒，他弄了半天把content-type屬性值設為audio/mpeg，然而問題并沒有解決。
??最后我做了一個測試，同一個音頻直接放在網站目錄下用相對路徑就可以正常監(jiān)聽ended事件，也能正常獲取duration屬性值。生產環(huán)境我們的文件是在阿里云上，使用絕對路徑。對比了一下headers信息，發(fā)現(xiàn)唯一不同的地方就是Status Code不同。能正常監(jiān)聽的Status Code是206，不正常的是200。206是分段加載，具體各種status code可以戳這里。
??第二天，后端主動問我那個問題解決了沒。我就說了我的發(fā)現(xiàn)，最后后端將音頻文件的返回方式調整為206后，問題成功解決。
??總結一下：發(fā)生這個問題的原因是音頻類型文件請求的響應方式不對。其實默認的響應方式就是206，只是我們后端在設置文件響應方式的默認配置時，直接copy了一些配置文件，其實并不知道他修改了音頻文件的響應方式。
??以上是我使用
??
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/82507.html
摘要：由于蘋果的限制必須配合微信接口做處理。中已修復標簽的設置，會影響二維碼識別我試出來的微信客戶端內，如果頁面鏈接中含有未轉碼的特殊字符，可能會導致二維碼無法識別以上如果遇到新的問題會繼續(xù)更新 緩存控制 http接口數據緩存 一直在做spa，應用內的頁面切換沒有接口數據緩存的問題，而從應用內切換到外部再回來的話，如果接口地址參數都不變，那么之前請求過的接口，會使用上一次請求拿到的數據，抓包...
摘要：編碼結束后，調用函數，來銷毀和編碼器。調用函數對參數中的格式音頻數據幀進行解碼，參數中存放解碼后的音頻數據幀。調用函數來銷毀和解碼器說重點當做即時通信產品，像微信這種的手機端，它們接受到很有可能就是協(xié)議壓縮后的音頻文件。 showImg(https://segmentfault.com/img/bVbtzkh?w=1024&h=682); 這么牛逼的輪子，肯定要美圖鎮(zhèn)樓 Speex是一...
閱讀 2256·2021-09-24 10:31
閱讀 3910·2021-09-22 15:16
閱讀 3426·2021-09-22 10:02
閱讀 1051·2021-09-22 10:02
閱讀 1869·2021-09-08 09:36
閱讀 2020·2019-08-30 14:18
閱讀 636·2019-08-30 10:51
閱讀 1896·2019-08-29 11:08
