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:文章来源：https://www.toymoban.com/news/detail-787161.html
.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:文章来源地址https://www.toymoban.com/news/detail-787161.html
//播放录音功能
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)
}到了这里，关于js实现点击音频实现播放功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
