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)
}
相关推荐
我叫汪枫3 小时前
前端物理引擎库推荐 - 让你的网页动起来!
前端
雾恋7 小时前
最近一年的感悟
前端·javascript·程序员
华仔啊7 小时前
Vue3 的 ref 和 reactive 到底用哪个?90% 的开发者都选错了
javascript·vue.js
A黄俊辉A8 小时前
axios+ts封装
开发语言·前端·javascript
一条数据库8 小时前
南京方言数据集|300小时高质量自然对话音频|专业录音棚采集|方言语音识别模型训练|情感计算研究|方言保护文化遗产数字化|语音情感识别|方言对话系统开发
人工智能·音视频·语音识别
小李小李不讲道理8 小时前
「Ant Design 组件库探索」四:Input组件
前端·javascript·react.js
连合机器人9 小时前
晨曦中的守望者:当科技为景区赋予温度
java·前端·科技
郑板桥309 小时前
tua-body-scroll-lock踩坑记录
前端·javascript
解道Jdon9 小时前
SpringBoot4与Spring7发布:云原生深度进化
javascript·reactjs