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)
}
相关推荐
脑子缺根弦36 分钟前
融合优势:SIP 广播对讲联动华为会议 全场景沟通响应提速
华为·音视频·广播对讲系统
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦6 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界8 小时前
前端:优秀架构的坟墓
前端·架构
拼图2098 小时前
element-plus——图标推荐
javascript·vue.js·elementui