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