前言
學習Angular時寫了一個音樂播放器
oschina地址
github地址
為了兼容android chrome,參考了這篇文章;
在數據讀取中要中斷的時候,可以把audio.src設為null,並顯式調用audio.load(),
此時對於Android會中斷數據讀取,並且canplay也不會發生
所以在我的代碼中也如此使用了
|
1
2
|
_audio.src =
null;
_audio.load();
|
但是由於百度有些音樂無法直接播放;需要服務器轉發,所以音樂鏈接帶上了服務器轉發地址
問題出現
在前面幾首歌上帶上轉發沒有問題;但是當列表循環后;就出現了無法從服務器上獲取音樂內容了;
查看chrome控制台,鏈接上顯示 Provisional headers are shown
關閉標簽;重新打開網址;音樂有又可以加載了!!!
嘗試過程
剛開始以為是因為本地環境的問題;將代碼掛在到服務器上,依然有問題
開始谷歌搜索 Provisional headers are shown, 在這篇文章中http://segmentfault.com/q/1010000000364871
之所以會出現這個警告,是因為去獲取該資源的請求其實並(還)沒有真的發生,所以 Header 里顯示的是偽信息,直到服務器真的有響應返回,這里的 Header 信息才會被更新為真實的。不過這一切也可能不會發生,因為該請求可能會被屏蔽。比如說 AdBlock 什么的,當然了不全是瀏覽器擴展,具體情況具體分析了
但是我測試的瀏覽器只有開發工具,沒有 AdBlock之類的;所以pass
接着 有找到這篇文章https://code.google.com/p/chromium/issues/detail?id=327581
That is because websockets never report their requestHeadersText.
Fixed for the new implementation.
在新版本中修復… 我的chrome是42;所以 pass
接着在http://stackoverflow.com/questions/21177387/caution-provisional-headers-are-shown-in-chrome-debugger
發現推薦答案依然是 AdBlock等之類的攔截, 繼續看回答, 說使用 chrome://net-internals; 玩了下,根本就不知道怎么玩,pass
解決
接着往下查看 發現有個回答
I believe it happens when the actual request is not sent. Usually happens when you are loading a cached resource.
回答內容是說請求沒有被發送,因為是載入緩存資源.
一想很對啊,音樂資源默認是緩存的,但是設置不緩存會讓音樂加載速度太慢;繼續往下查看
Another possible scenario I’ve seen - the exact same request is being sent again just after few milliseconds (most likely due to a bug in the client side).
In that case you’ll also see that the status of the first request is “canceled” and that the latency is only several milliseconds.
大概是說 完全相同的請求間隔數毫秒(太短),導致加載失敗,查看了chrome控制台發現
|
1
2
3
|
http://ngmusic.coding.io/null
http://ngmusic.coding.io/serverget?url=http%3A%2F%2Ffile.qianqian.com.....
都有 Provisional headers are shown
|
猜想是因為 http://...../null 加載失敗 導致 http://..../serverget?url=http%3A%2F%2Ffile.qianqian.com.....的緩存請求也失敗(阻塞)
故將上面 null 加載去掉
|
1
2
|
// _audio.src = null;
// _audio.load();
|
結論
Provisional headers are shown
出現在 載入緩存資源,請求沒有被發送, 而如果上一個資源加載失敗,可能導致從緩存加載的資源失敗,
即緩存資源請求之前的請求不能失敗,不然就有可能出現問題
至此,終於搞定了這個渣問題!!!!!!!!!!!!!!!!!!!!!!




