vue3和vue2中分别使用audio标签自定义播放音频文件的方法

之前一直使用vue2，在vue2中操作aduio标签非常容易，也很熟练，现在项目换成了vue3，vue2那套搬过来也不好使了，从网上查询，基本都是挂着羊头卖狗肉，标着vue3，打开是vue2，或者发的是不全的部分代码，让你无从下手，自己整了一套，不一定对，但是能使用了。下面分别将vue两个版本使用audio标签自定义播放暂停的方法整理如下：

vue2

<template>
    <audio ref="audio" :src="music_path"></audio>
</template>
<script>
    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
			}
		},
	}
</script>

vue3

<template>
    <audio id="audio" ref="audio" class="aud" v-if="data.musicSrc">
		<source :src="data.musicSrc" />
	</audio>
    <!-- 此处看自己的业务，我是自己写的按钮控制播放暂停，dom是通过v-for渲染出来的，        
     item.filePath是当前操作元素的音频路径 -->
    <div class="btn-box">
		<img class="btn-img" @click="handlePlayMusic(item.filePath)"
			v-if="            
            (data.musicSrc==item.filePath&&!data.isPlay)||data.musicSrc!==item.filePath"
		    src="../../../assets/image/template/play.png" alt="">
		<img class="btn-img" @click="handleCloseMusic()"
			v-if="data.musicSrc==item.filePath&&data.isPlay"
			src="../../../assets/image/template/stop.png" alt="">
	</div>
</template>
<script setup lang="ts">
    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 = ''
	}
</script>



ts中定义的class
export class warehouseData {
// 当前选中音频文件的路径
	musicSrc: string = '';
	// 当前音频是否在播放
	isPlay: boolean = false;
}

其中，主要是在音频地址为空的时候用v-if控制它不让他渲染这个dom，还有就是一定要用<source>标签包裹src，这个demo主要可以做到播放，暂停和切换功能，去切换音频文件的时候有100毫秒的延迟，一定要异步，因为有v-if，需要重新渲染，播放的时候也需要延迟执行，并且比    是在切换后，所以，延迟大于100毫秒即可 。