展开全部
<script src="jquery.js"></script>
<div class="audio_div" style="background:url(按钮图片) no-repeat center bottom;background-size:cover;">
<audio id="mp3Btn" autoplay loop>
<source src="音频地址" type="audio/mpeg" />
</audio>
</div>
<script>
//播放器控制
var audio = document.getElementById('mp3Btn');
$('.audio_div').click(function(){
//防止冒泡
event.stopPropagation();
if(audio.paused) //如果当前是暂停状态
{
$('.audio_div').css("background","url(播放状态按钮) no-repeat center bottom");
$('.audio_div').css("background-size","cover");
audio.play();//播放
return;
}
//当前是播放状态
$('.audio_div').css("background","url(暂停状态按钮) no-repeat center bottom");
$('.audio_div').css("background-size","cover");
audio.pause(); //暂停
});
</script>
<div class="audio_div" style="background:url(按钮图片) no-repeat center bottom;background-size:cover;">
<audio id="mp3Btn" autoplay loop>
<source src="音频地址" type="audio/mpeg" />
</audio>
</div>
<script>
//播放器控制
var audio = document.getElementById('mp3Btn');
$('.audio_div').click(function(){
//防止冒泡
event.stopPropagation();
if(audio.paused) //如果当前是暂停状态
{
$('.audio_div').css("background","url(播放状态按钮) no-repeat center bottom");
$('.audio_div').css("background-size","cover");
audio.play();//播放
return;
}
//当前是播放状态
$('.audio_div').css("background","url(暂停状态按钮) no-repeat center bottom");
$('.audio_div').css("background-size","cover");
audio.pause(); //暂停
});
</script>
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询