<audio id="music" :src= "geturl+callDetails.fileUrl" />
<img v-if="!callDetails.fileUrl" class="no-play" :src="noPlayImg" alt="">
<img v-else class="playimg" :src="play" alt="" @click="onPlay()">
js部分
import playImg from '@/assets/play.png'
import stopImg from '@/assets/full.png'
import downImg from '@/assets/down.png'
export default {
name: 'detail',
props: {
callDetails: Object
},
data() {
return {
visible: true,
geturl: process.env.VUE_APP_CALL_EXPORT,
play: playImg,
stopPlay: stopImg,
down: downImg
}
},
methods: {
onPlay() {
if (this.callDetails.recordInfo.fileUrl) {
const audios = document.getElementById('music')
const playimg = document.querySelector('.playimg')
if (audios.paused) {
playimg.src = this.play
audios.play()
} else {
playimg.src = this.stopPlay
audios.pause()
audios.load()
}
audios.addEventListener('ended', () => {
playimg.src = this.play
}, false)
}
},
reset() {
this.visible = false
document.getElementById('music').load()
document.querySelector('.playimg').src = this.play
}
}