怎么获取表格中勾选的音频总时长？

Question

内容代码为
问题一：

<el-table :data="tableData" @selection-change="handleSelect" ref="taskTableRef">
    <el-table-column type="selection" />
    <el-table-column align="center" prop="fileName" width="218"/>
    <el-table-column align="center"  label="片头试听">
        <template #default="scope">
            <audio style="height:20px" controls :ref="audioRef">
                <source :src="scope.row.url" type="audio/ogg"/>
                <source :src="scope.row.url" type="audio/mpeg"/>
                您的浏览器不支持音频元素.
            </audio>
        </template>
    </el-table-column>
</el-table>

方法：
import { reactive, toRefs,ref ,watch,getCurrentInstance,onMounted} from 'vue'
const state = reactive({
    tableData:[
    {fileName:'渔舟唱晚',url:'/src/assets/audio/渔舟唱晚.mp3',},
    {fileName:'月光下的凤尾竹',url:'/src/assets/audio/月光下的凤尾竹.mp3',}
],
infor:{
    musicData:[] as any,
    duration:'' as any
} 
})
const taskTableRef = ref(null)
const boxRefs = ref<HTMLElement[]>([])
const audioRef = (el: any) => {
      if (el) {
        boxRefs.value.push(el)
      }
}
const handleSelect = ( selection: any, row: any ) =>{
    state.infor.musicData = selection
    if (selection.length > 1) {
        let del_row = selection.shift(); 
        taskTableRef.value.toggleRowSelection(del_row, false);
    }
 boxRefs.value.filter( (item:any) =>{
    if(item.currentSrc.includes(state.infor.musicIdselect[0].url)){
          state.infor.duration = item.duration
    }
    })
}

想在勾选时将音频总长付给 state.infor.duration

获取得了 就是路径有点问题转义了

Answer 1

想要获取音视频时长，那得下载下来，有点得不偿失

var audio = new Audio('url')
audio.addEventListener("loadedmetadata", function (e) {

console.log(audio.duration)

});