html:

 <div class="audioDiv" id="playButton" style="width:13vw;height: 3.5vh;"><img src="./img/yuyin.png" alt="" /><p id="countdown">4:31<p><p id="bofang">播放录音</p></div>

css:

.audioDiv{cursor: pointer;background-color: #38ADFF;border-radius: 0.3vw;
}#playButton img{width: 1vw;margin: 0 0.5vw;
}#countdown{font-size: 0.7vw;width: 4vw;
}#bofang{font-size: 0.8vw;width: 7vw;
}#playButton:hover{opacity: 0.8;
}

js:

//播放录音功能
let audio = new Audio('./img/nihong.mp3');
let audioStatus = true
let times
$('#playButton').on('click', function() {if (audioStatus == true) {audio.play();daojishi()audioStatus = false} else {audio.currentTime = 0;audio.pause();clearInterval(times);$('#countdown').html('4:31');audioStatus = true}setTimeout(function() {audio.currentTime = 0;audio.pause();$('#countdown').html('4:31');audioStatus = true}, 271000)
})function daojishi() {var m = 4;var s = 31;times = setInterval(function() {if (s < 10) {//如果秒数少于10在前面加上0$('#countdown').html(m + ':0' + s);} else {$('#countdown').html(m + ':' + s);}s--;if (s < 0) {//如果秒数少于0就变成59秒s = 59;m--;}}, 1000)
}