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的值