js实现点击音频实现播放功能

html:

javascript 复制代码
 <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:

javascript 复制代码
.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:

javascript 复制代码
//播放录音功能
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)
}
相关推荐
記億揺晃着的那天7 分钟前
Vue + Element UI 表格自适应高度如何做?
javascript·vue.js·ui
无尽夏_20 分钟前
HTML5(前端基础)
前端·html·html5
Jagger_23 分钟前
敏捷开发流程-精简版
前端·后端
FIN66681 小时前
昂瑞微冲刺科创板:创新驱动,引领射频芯片国产化新征程
前端·安全·前端框架·信息与通信·芯片
GISer_Jing1 小时前
ByteDance——jy真题
前端·javascript·面试
睡美人的小仙女1271 小时前
浏览器为何屏蔽本地文件路径?
前端
真的想不出名儿1 小时前
Vue 中 props 传递数据的坑
前端·javascript·vue.js
FIN66681 小时前
昂瑞微:深耕射频“芯”赛道以硬核实力冲刺科创板大门
前端·人工智能·科技·前端框架·信息与通信·智能
阳光阴郁大boy1 小时前
星座运势网站技术解析:从零打造现代化Web应用
前端·javascript
烛阴1 小时前
武装你的Python“工具箱”:盘点10个你必须熟练掌握的核心方法
前端·python