audio标签获取时间返回NaN

Question

需求：获取页面中多个audio时间并显示到对应div中
曾实现手段：
1、利用定时器延时，等待页面加载结束后去获取时间
问题：部分div中返回NaN,原因可能是部分audio并未加载结束，而获取的时间并未被找到进行字符串处理后为NaN

2、循环调用定时器，若时间未被取到，继续调用定时器去查找
问题：页面加载速度过慢，用户体验差

 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的事件回调，具体可以参考这里。