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)
}
相关推荐
骄傲的心别枯萎17 分钟前
RV1126 NO.16:通过多线程同时获取H264和H265码流
linux·c++·音视频·rv1126
喜欢你,还有大家23 分钟前
FTP文件传输服务
linux·运维·服务器·前端
该用户已不存在26 分钟前
你没有听说过的7个Windows开发必备工具
前端·windows·后端
Bi38 分钟前
Dokploy安装和部署项目流程
运维·前端
普通网友39 分钟前
前端安全攻防:XSS, CSRF 等防范与检测
前端·安全·xss
携欢42 分钟前
PortSwigger靶场之Reflected XSS into attribute with angle brackets HTML-encoded通关秘籍
前端·xss
小爱同学_1 小时前
React知识:useState和useRef的使用
前端·react.js
再学一点就睡1 小时前
双 Token 认证机制:从原理到实践的完整实现
前端·javascript·后端
wallflower20201 小时前
滑动窗口算法在前端开发中的探索与应用
前端·算法
蚂蚁绊大象1 小时前
flutter第二话题-布局约束
前端