iviewtable表格数据 录音播放下载

播放下载:

{
title: '通话录音',
align: 'center',
key: 'recordUrl',
render: (h, params) => {
if (params.row.recordUrl.substr(-3) == 'wav') {
return h('div', {
style: {

}
}, [
h('audio', {
style: {
textAlign: 'center',
padding: '4px',
width: '100px'
},
attrs: {
src: 'http://ai.foxcall.cn' + params.row.recordUrl,
id: params.row.id,
'data-flag': true
}
}, params.row.recordUrl),
h('i', {
style: {
'font-style': 'normal',
'color': '#2d8cf0',
'cursor': 'pointer'
},
on: {
click: () => {
this.play(params)
}
}
}, '播放'),
h('a', {
'style': {
margin: '0 4px',
'color': '#2d8cf0',
'cursor': 'pointer',
'margin': '0 2px'
},
attrs: {
href: 'http://ai.foxcall.cn' + params.row.recordUrl
}
}, '下载')
])
} else {
return h('div', [
h('Tooltip', {
props: { placement: 'bottom' }
}, [
h('span', {
style: {
display: 'inline-block',
width: params.column._width * 0.9 + 'px',
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap',
zIndex: 99
}
}, params.row.recordUrl),
h('span', {
slot: 'content',
style: { whiteSpace: 'normal', wordBreak: 'break-all' }
}, params.row.recordUrl)
])
])
}
}
},

播放:

play (value) {
let id = value.row.id
let i = document.getElementById(id).nextElementSibling
let au = document.getElementById(id)
let end_time = au.duration
if (au.dataset.flag == 'true') {
au.play()
i.textContent = '暂停'
i.style.cssText = 'color:red;font-style:normal;cursor:pointer'
au.dataset.flag = false
} else {
au.pause()
i.textContent = '播放'
i.style.cssText = 'color:#2d8cf0;font-style:normal;cursor:pointer'
au.dataset.flag = true
}
var count_interval = setInterval(function () {
if (au.currentTime == end_time) {
i.textContent = '播放'
i.style.cssText = 'color:#2d8cf0;font-style:normal;cursor:pointer'
au.dataset.flag = true
clearInterval(count_interval)
}
}, 1000)
},

猜你喜欢

转载自www.cnblogs.com/yangslin/p/11308022.html