關於監聽 audio 的 timeupdate 事件，發現獲取到的currentTime值或者duration值為NAN或Infinity問題的解決方案
問題現象描述：
1，播放音頻時候，發現瀏覽器原生提供的controls控制的進度條不會刷新，如下圖所示
很明顯，已經播放了5s，但是進度條沒有顯示出來，同時總時長也並沒有顯示出來
2，當第一次音頻播放進度達到90%左右的時候，進度條會突然顯示出來，並且總時長也顯示出來了，如下圖所示
3，當第一次播放進度100%的時候，然后再重新點擊播放按鈕，顯示均正常，（可對比上面第一條播放5s的情況查看第一次顯示不正常的地方）如下圖所示
總的來說，上面問題的表現是，第一次播放音頻的時，在剛開始的時候，播放進度和總時長並不會顯示出來，放了一會兒（17s左右）后，才會顯示正常，而且重新點擊播放，顯示也正常，問題只出現在第一次。
4，我們通過監聽音頻 timeupdate 事件，查看播放當前時間和總時間，打印結果如下圖所示
。。。（中間有n個打印省略）
通過分析我們發現打印結果和我們上面前三步表現一致，獲取的總時長出現了 NaN 或 Infinity 兩個怪異值。播放到17s左右的時候才顯示正常
解決方案：
代碼實現如下：
1 // 播放進度 2 backgroundAudio.addEventListener('timeupdate', function (e) { 3 var target = e.target 4 console.log('當前時間：', target.currentTime, '總時長：', target.duration); 5 if (!Number.isFinite(target.duration)) { 6 target.currentTime = Number.MAX_SAFE_INTEGER; 7 target.currentTime = 0; 8 } else { 9 // 在這個地方做你和更新時間進度有關的事情， 10 // 比如更新自定義播放進度條樣式等 11 } 12 })
代碼重點黑科技在第5,6,7行，在第5行我們判斷總時長duration是否為無窮大，若果是，那么我們把當前播放時長先更改為一個無窮大的值(在js中能表示的最大值為Number.MAX_SAFE_INTEGER)，然后再把當前播放時長設置為0, 注意6,7兩步缺一不可，就這樣，然后我們就又可以愉快地看到進度條和時間的顯示都正常啦。
添加上述代碼后，打印結果如下圖所示：
從上面打印結果我們可以看到，雖然結果中依然會出現 NaN 或 Infinity 兩個怪異值，但是很快，播放時間和總時長就都恢復正常顯示啦，（對比沒加代碼前，播放到17s左右才會顯示正常），然后我們就又可以繼續愉快地玩耍啦。