在vue中audio标签借助refs时候获取duration返回NaN

本文链接：https://blog.youkuaiyun.com/qq_43644046/article/details/123532976

最近进行音乐网站开发，遇到了想借用audio的duration来获取歌曲总时长，但是返回来一直是NAN，查询了半天也没有出结果。

然后我自己观察到，只有我点击过快时候出现了NAN，个人猜测可能是因为获取歌曲时候，进度条没有加载完，也就是说在歌曲还没加载完，我们就去获取总时长

奈何本人技术不好，最后想到定时器，设置两秒时间，这样就可拿到数据了

 setTimeout(() => {
                console.log(this.$refs.audio.duration)
            }, 2000);

以上方法也能获取，今天询问了一下朋友，终于找到正确的方法了。

拿到NAN是因为音乐未加载完成，这时候需要在audio标签添加

@canplay="canplay"

这样我们在下面canplay(){

//此处获取音乐总时长

}

前面

<audio   :src="musicdetail.play_url" @canplay="canplaysong" autoplay="true"></audio>

methods里面

canplaysong(){
            let total=parseInt(this.$refs.audio.duration)
                this.musictotaltimemode=total
                let minute=total % 60
                let seconds=(total-minute)/60
                this.musictotaltime=seconds+':'+minute
        },

这样就不会出现NAN了