Vue中的audio組件是用來(lái)播放音頻的UI組件，其中duration屬性可以獲取音頻的總時(shí)長(zhǎng)，下面是一個(gè)使用Vue audio組件和duration屬性的簡(jiǎn)單示例：

<template>
<div>
<audio ref="audio" src="your_audio_file"></audio>
{{ duration }}
</div>
</template>
<script>
export default {
data() {
return {
duration: 0
}
},
mounted() {
this.$refs.audio.addEventListener('loadedmetadata', () =>{
this.duration = this.$refs.audio.duration;
});
}
}
</script>

在上面的代碼中，我們定義了一個(gè)data屬性“duration”，然后在mounted鉤子中，我們?yōu)橐纛l組件的“l(fā)oadedmetadata”事件添加了一個(gè)監(jiān)聽器，監(jiān)聽audio的元數(shù)據(jù)是否已加載完成。如果元數(shù)據(jù)已加載完成，我們就可以使用Vue的ref屬性引用到這個(gè)audio組件，并通過(guò)“duration”屬性獲取音頻的總時(shí)長(zhǎng)。

需要注意的是，“l(fā)oadedmetadata”事件不會(huì)在音頻的實(shí)際播放過(guò)程中被觸發(fā)，而是在音頻開始加載時(shí)觸發(fā)。因此，我們可以把獲取duration的代碼寫在mounted鉤子中，確保在音頻元數(shù)據(jù)加載完成后立即獲取。