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