H5 audio 标签问题 求解决
同一个页面有两个音频 ，怎么分别控制播放 感谢<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>音频测试</title>
<link rel="stylesheet" href="" />
<style type="text/css">
.btn-audio{
margin: 90px auto;
width: 186px;
height: 186px;
background:url(pause.png) no-repeat center bottom;
background-size:cover;
}
</style>
</head>
<body>
<div class="btn-audio"><audio id="mp3Btn"><source src="http://sc1. type="audio/mpeg" /></audio></div>
<div class="btn-audio"><audio id="mp3Btn"><source src="http://mp3. type="audio/mpeg" /></audio></div>
<script type="text/javascript" src="http://apps.
<script type="text/javascript">
$(function(){
document.documentElement.style.fontSize = document.documentElement.clientWidth/7.5+"px";
//播放完毕
$('#mp3Btn').on('ended', function() {
console.log("音频已播放完成");
$('.btn-audio').css({'background':'url(pause.png) no-repeat center bottom','background-size':'cover'});
})
//播放器控制
var audio = document.getElementById('mp3Btn');
audio.volume = .3;
$('.btn-audio').click(function() {
event.stopPropagation();//防止冒泡
if(audio.paused){ //如果当前是暂停状态
$('.btn-audio').css({'background':'url(play.png) no-repeat center bottom','background-size':'cover'});
$('.btn-test').removeAttr('disabled').css('background','#FF296A');
audio.play(); //播放
return;
}else{//当前是播放状态
$('.btn-audio').css({'background':'url(pause.png) no-repeat center bottom','background-size':'cover'});
audio.pause(); //暂停
}
});
})
</script>
</body>
</html>
