<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
background: #2b2938;
} .cn_btn_audio {
margin: 90px auto;
width: 186px;
height: 186px;
background: url(http://img.d1xz.net/d/2018/07/5b56749f0817d.png) no-repeat;
background-size: cover;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head> <body>
<div class="nc_info">
<div class="cn_btn_audio J_btnAudio" data-id="1">
<audio class="J_mp3Btn">
<source src="http://www.ytmp3.cn/down/49366.mp3" type="audio/mpeg" />
</audio>
</div>
</div>
<div class="nc_info">
<div class="cn_btn_audio J_btnAudio" data-id="2">
<audio class="J_mp3Btn">
<source src="http://www.ytmp3.cn/down/49366.mp3" type="audio/mpeg" />
</audio>
</div>
</div>
<div class="nc_info">
<div class="cn_btn_audio J_btnAudio" data-id="3">
<audio class="J_mp3Btn">
<source src="http://www.ytmp3.cn/down/49366.mp3" type="audio/mpeg" />
</audio>
</div>
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//播放完毕
$('.J_mp3Btn').on('ended', function() {
console.log("音频已播放完成");
$('.J_btnAudio').css({
'background': 'url(http://img.d1xz.net/d/2018/07/5b56749f0817d.png)',
'background-size': 'cover'
});
}) $('.J_btnAudio').click(function() {
var cindex = $(this).data('id'); //定义个属性值
console.log(cindex);
$('.J_btnAudio').each(function(i) {
var z=$(this).data('id');
console.log('****'+z);
var audio = $(this).children('.J_mp3Btn')[0];
if (z == cindex) { //判断属性值等于当前的值
if (audio.paused) { //如果当前是暂停状态
$(this).css({
'background': 'url(http://img.d1xz.net/d/2018/07/5b567509be452.png)',
'background-size': 'cover'
});
audio.play();
} else { //当前是播放状态
$(this).css({
'background': 'url(http://img.d1xz.net/d/2018/07/5b56749f0817d.png)',
'background-size': 'cover'
});
audio.pause();
}
} else {
if (!audio.paused) { //当前是播放状态
$(this).css({
'background': 'url(http://img.d1xz.net/d/2018/07/5b56749f0817d.png)',
'background-size': 'cover'
});
audio.pause();
}
} }); });
})
</script>
</body> </html>