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)
}
相关推荐
Simon_He2 分钟前
一个免费的在线压缩网站超越了付费的压缩软件
前端·开源·图片资源
巴巴_羊37 分钟前
React Ref使用
前端·javascript·react.js
拾光拾趣录1 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
菜包eo1 小时前
基于二维码的视频合集高效管理与分发技术
音视频
文浩(楠搏万)1 小时前
用OBS Studio录制WAV音频,玩转语音克隆和文本转语音!
大模型·音视频·tts·wav·obs·声音克隆·语音录制
徊忆羽菲1 小时前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts
轻语呢喃1 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军1 小时前
React 协调器 render 阶段
前端·react.js·前端框架
中微子1 小时前
Blob 对象及 Base64 转换指南
前端
风铃喵游1 小时前
让大模型调用MCP服务变得超级简单
前端·人工智能