效果图如下 要实现的功能是 一个音频列表 点击对应的音频 进行播放 暂停操作
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)
参考博客