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的事件回调