国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Codeing_ls / 1796人閱讀

摘要:第二天,后端主動問我那個問題解決了沒。我就說了我的發(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

相關(guān)文章

  • 微信web開發(fā)遇到

    摘要:由于蘋果的限制必須配合微信接口做處理。中已修復標簽的設(shè)置,會影響二維碼識別我試出來的微信客戶端內(nèi),如果頁面鏈接中含有未轉(zhuǎn)碼的特殊字符,可能會導致二維碼無法識別以上如果遇到新的問題會繼續(xù)更新 緩存控制 http接口數(shù)據(jù)緩存 一直在做spa,應(yīng)用內(nèi)的頁面切換沒有接口數(shù)據(jù)緩存的問題,而從應(yīng)用內(nèi)切換到外部再回來的話,如果接口地址參數(shù)都不變,那么之前請求過的接口,會使用上一次請求拿到的數(shù)據(jù),抓包...

    caige 評論0 收藏0
  • 重磅重構(gòu)開源 讓H5標簽代替C++實時解碼播放speex壓縮協(xié)議音頻文件 【IM福音】

    摘要:編碼結(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是一...

    curried 評論0 收藏0
  • 前端知識歸納

    摘要:繼承性子標簽會繼承父標簽樣式優(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)雅的代碼的同時 讓瀏覽器的爬蟲和...

    sixleaves 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<