vue3中如何获取audio中duration数据

audio中的duration可以获取当前播放音频的总时长

模版：

<audio
      ref="audio"
      :src="`https://music.163.com/song/media/outer/url?id=${id}.mp3`"
    ></audio>

开始使用的是通过获取dom节点，在使用nextTick等节点挂载完毕后获取duration，不过无法获取，打印的是NaN

查看MDN中关于audio的文档后，发现可以使用canplay事件

 

 修改：

<audio
      ref="audio"
      :src="`https://music.163.com/song/media/outer/url?id=${id}.mp3`"
      @canplay="getDuration"
    ></audio>

const audio = ref(null)
const duration = ref(0)

const getDuration = () => {
      duration.value = audio.value.duration
      console.log(duration.value)
      store.commit('play/setPlayDuration', duration.value)
    }   

可以正常打印duration的值