|
之前一直使用vue2，在vue2中操作aduio标签非常容易，也很熟练，现在项目换成了vue3，vue2那套搬过来也不好使了，从网上查询，基本都是挂着羊头卖狗肉，标着vue3，打开是vue2，或者发的是不全的部分代码，让你无从下手，自己整了一套，不一定对，但是能使用了。下面分别将vue两个版本使用audio标签自定义播放暂停的方法整理如下：
vue2
data() {
return {
// 音频文件路径
music_path: require('../../assets/audio/idCard.mp3'),
// 是否播放音频
is_play: false,
}
},
mounted() {
this.aclick(require('../../assets/audio/idCard.mp3'))
},
methods: {
// 播放音频
aclick(src) {
this.$refs.audio.src = src;
if (this.is_play) {
this.$refs['audio'].pause();
this.is_play = false
} else {
this.$refs['audio'].play();
this.is_play = true
}
},
}
vue3
import {
warehouseData
} from '../template'
const data = reactive(new warehouseData())
const audio = ref(null);
// 播放音频
const handlePlayMusic = (path: string) => {
if (path !== data.musicSrc) {
data.musicSrc = ''
let timeout = setTimeout(() => {
data.musicSrc = path
clearTimeout(timeout)
}, 100)
}
let platout = setTimeout(() => {
let dom = audio.value
console.dir(dom)
dom.play()
data.isPlay = true
clearTimeout(platout)
}, 300)
}
const handleCloseMusic = () => {
let dom = audio.value
dom.pause();
data.isPlay = false
// data.musicSrc = ''
}
ts中定义的class
export class warehouseData {
// 当前选中音频文件的路径
musicSrc: string = '';
// 当前音频是否在播放
isPlay: boolean = false;
}
其中，主要是在音频地址为空的时候用v-if控制它不让他渲染这个dom，还有就是一定要用标签包裹src，这个demo主要可以做到播放，暂停和切换功能，去切换音频文件的时候有100毫秒的延迟，一定要异步，因为有v-if，需要重新渲染，播放的时候也需要延迟执行，并且比 是在切换后，所以，延迟大于100毫秒即可 。
|