怎么获取表格中勾选的音频总时长?
内容代码为
问题一:
<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
获取得了 就是路径有点问题转义了
回答:
想要获取音视频时长,那得下载下来,有点得不偿失
var audio = new Audio('url')
audio.addEventListener("loadedmetadata", function (e) {
console.log(audio.duration)
});
以上是 怎么获取表格中勾选的音频总时长? 的全部内容, 来源链接: utcz.com/p/932785.html