h5 播放.mp3 音频

效果图如下 要实现的功能是 一个音频列表 点击对应的音频 进行播放 暂停操作

 

1. html代码

	<div onclick="bf('${srtList.commentContent}');" ondblclick="zt()" id="control" class="vartBox">
	                        		 <img class="vartImg" src="${pageContext.request.contextPath }/static/works/images/03.png" class="missingIcon" />
	                        		 	${srtList.voiceLength}s
	                        		</div>

<!-- 播放音频 -->
<audio src="" controls="controls" preload id="audio" hidden >

2.js方法

 //单击播放       
 function bf(url){
	 var audio = document.getElementById('audio'); 
	 audio.src = url; //动态赋值
	 audio.play();//audio.play();// 这个就是播放  
 
}

//双击暂停
function zt(){
	var audio = document.getElementById('audio'); 
	audio.pause();// 这个就是暂停
}

//播放结束  自动触发
var audio = document.getElementById('audio'); 
	audio.addEventListener("ended", function() {
       
}, false)

参考博客

https://blog.csdn.net/rocling/article/details/82050767