HTML内容
<img id='voice' class="voice" οnclick="changevoice()" alt="" src="${pageContext.request.contextPath }/images/regress/voice.png">
<audio id='audio' preload="preload" loop="loop" >
<source src="${pageContext.request.contextPath }/images/regress/BeforeLong.mp3">
</audio>
js方法:
function changevoice(){
var hiddenv = $("#hiddenv").val();
var hiddenq = $("#hiddenq").val();
var src = $("#voice")[0].src;
var myAudio = document.getElementById("audio")
if(myAudio.paused){
myAudio.play();
$("#voice").attr('src',hiddenv);
}else{
myAudio.pause();
$("#voice").attr('src',hiddenq);
}
}
可能出现的问题:
部分移动端浏览器可能在用户不点击的情况下,不需要加载音乐。需要用户手动点击后才能播放
所以建议开发者,默认背景音乐关闭。。