jQuery点击按钮控制音频播放暂停
<div class="voice fa-play play"><i></i><audio class="sound" src=""></audio></div>
$(".voice").click(function() {
var audio = $(this).closest('.voice').find('.sound')[0];
if (audio.paused) {
audio.play();
} else {
audio.pause();
//audio.currentTime = 0 是否重头开始播放音频
}
$(this).toggleClass('fa-play fa-pause');
audio.onended = function() {
$('.voice').toggleClass('fa-play fa-pause');
};
});
.voice {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #3c6380;
z-index: 1;
cursor: pointer;
}
.voice i {
width: 0;
border-style: solid;
border-width: 10px 0px 10px 16px;
border-color: transparent transparent transparent #ffffff;
cursor: pointer;
will-change: border-width;
transition: all 0.2s ease;
}
.voice.fa-pause i {
border-style: double;
height: 20px;
border-width: 0px 0 0px 20px;
}