audio标签获取时间返回NaN

Question

需求：获取页面中多个audio时间并显示到对应div中曾实现手段：1、利用定时器延时，等待页面加载结束后去获取时间问题：部分div中返回NaN,原因可能是部分audio并未加载结束，而获取的时间并未被找到进行字符串处理后为NaN2、循环调用定时器，若时间未被取到，继续调用定时器去查找问题：页面加载速度过慢，用户体验差 var aud = document.getElementsByClassName('aud');        function getTime() {            setTimeout(function () {                for(var i=0;i<aud.length;i++){                    if(isNaN(aud[i].duration)){                        getTime();                    }                    else{                        $('#audio-'+(i+1)+' .audio-text').html(aud[i].duration.toString().replace('.', "'").slice(0,3) + '"')                    }                }            }, 10);        }    getTime();求一个在不损失大量性能前提下较优的方案，目前单纯加延时和反复查询的方法都不太适合

Answer 1

我觉得应该用事件触发吧。

可以试试给<audio>标签绑canplay、canplaythrough或者durationchange的事件回调