一个页面多个音频的播放（vue循环出来的audio）

最新推荐文章于 2024-07-05 17:37:25 发布

置顶一个渣渣辉

最新推荐文章于 2024-07-05 17:37:25 发布

阅读量5.6k

点赞数 2

文章标签： vue js javascript css3

本文链接：https://blog.csdn.net/weixin_44183728/article/details/103719033

版权

首先如下图的audio如何播放,数据结构是这样：

list=[
	{audio:"111.mp3"},
	{audio:"222.mp3"},
	{audio:"333.mp3"},
	......
]

在这里插入图片描述

<div v-for="(item,index) in questionBankInfo.childList">
	<audio :src="item.audio" :ref="'middle'+ index"   class="middle-listening"></audio>
	<div @click="maddelListening(item,index)"></div>
</div>
js:
maddelListening(item,index){
	var middle = 'middle'+index
	middle=this.$refs[middle][0]
	if(middle.paused){
                    // 切换播放中的css样式
                    this.questionBankInfo.childList[index].voiceMaddelStep = 'voice-step voice-playing'
                
                    middle.play()
                }else {
                // 切换未播放的css样式
                    this.questionBankInfo.childList[index].voiceMaddelStep = 'voice-step1'
                    middle.pause()
                }
}

还有一种是数据结构是这样的

list=[
	{
		audio:"111.mp3",
		audiolist:[
			{
				audio:"111-1.mp3"
			},
			{
				audio:"111-2.mp3"
			},
			......
		]
	},
	{
		audio:"222.mp3",
		audiolist:[
			{
				audio:"222-1.mp3"
			},
			{
				audio:"222-2.mp3"
			},
			......
		]
	},
	......
]

附上代码：

<div v-for="(item,index) in questionBankInfo.childList">
	<audio :src="item.audio" :ref="'middle'+ index"   class="middle-listening"></audio>
	<div @click="maddelListening(item,index)"></div>
	<div v-for="(it,numIndex) in item.audioList">
		<audio :src="it.audio" :ref="'middlePlay'+ numIndex+index" id="middlePlay" class="middlePlay"></audio>
	</div>
	<span  :ref="'playAudio'+numIndex+index" class="play-audio"@click="playRecordIndex(it,numIndex,index)">播放录音</span>
</div>
js:
 playRecordIndex(it,numIndex,index){
	 var middlePlay = document.querySelectorAll('.middlePlay')
     var playAudio = document.querySelectorAll('.play-audio')
     for(var i=0;i<middlePlay.length;i++){
         middlePlay[i].pause()
         middlePlay[i].currentTime = 0
     }
     for(var i=0;i<playAudio.length;i++){
         playAudio[i].classList.remove("playing")//加效果的
         playAudio[i].innerHTML = '播放录音'//加效果的
     }
     var middlePlay = 'middlePlay'+numIndex+index
     middlePlay=this.$refs[middlePlay][0]
     middlePlay.playbackRate =1;
     middlePlay.play()
     var playAudio = 'playAudio' +numIndex+index
     playAudio = this.$refs[playAudio][0]
     playAudio.classList.add("playing")//加效果的
     playAudio.innerHTML = '播放中'//加效果的
     middlePlay.addEventListener("ended",()=>{
         playAudio.classList.remove("playing")//加效果的
         playAudio.innerHTML = '播放录音'//加效果的
     })
}