Question

我无法使用创建了间隔的简单定位器来查找问题。（timer.michellmorso.com）

我设定的定时器在过去3秒内每秒播放一次声音。当我将定时器设置为10秒时，声音将按原样播放，但是当我将定时器设置为12秒时，声音的第一次播放会有延迟并且几乎与2秒钟的声音同时播放？ / p>

我不知道兄弟们，我真的很感激帮助搞清楚这一点。谢谢！

<!DOCTYPE html>
<html>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300" rel="stylesheet">

<style type="text/css">
	html, body {
		font-family: 'Roboto';
		font-weight: 300;
		text-align: center;
		width: 100%;
		height: 100%;
		overflow: hidden;
		font-size: 30px;
		margin: 0px;
		margin-top: 10px;
		user-select: none;
	}

	input {
		font-family: 'Roboto';
		font-weight: 300;
		font-kerning: 100;
		border: 0px;
		font-size: 30px;
		padding: 0px;
		height: 30px;
		line-height: 30px;
		padding: 0px;
		margin: 0px;
		outline: none;
		border: 0px;
	}

	#timer {
		font-size: 520px;
		width: 100%;
		font-weight: 100;
		height: 520px;
		line-height: 520px;
		text-align: center;
	}

	#rounds {
		width: 275px;
		float: left;
	}

		#rounds input {
			width: 100px;
			text-align: right;
		}

	button {
		font-family: 'Roboto';
		font-weight: 100;
		font-kerning: 100;
		font-size: 20px;
		height: 40px;
		width: 200px;
		float: right;
	}

	span {
		-webkit-user-select: none; /* Chrome, Opera, Safari */
		-moz-user-select: none; /* Firefox 2+ */
		-ms-user-select: none; /* IE 10+ */
		user-select: none; /* Standard syntax */
	}

	#supp {
		width: 600px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 70px;
	}

	input:focus,
	select:focus,
	textarea:focus,
	button:focus {
		outline: none;
	}

	}
</style>

<body onload="init()">
	<img src="r_logo.jpg" width="300">
	<input type="text" name="timer" id="timer" value="1:00" placeholder="0:00">
	<p>
		<div id="supp">
			<div id="rounds">
				<span>Rounds:</span>
				<input type="text" id="roundsNum" name="rounds" value="10" placeholder="0">
			</div>
	</p>
	<button id="btn" onclick="startTimer()">START</button>
	</div>

</body>
<script type="text/javascript">
	var timer;
	var t;
	var display;
	var tIn;
	var tRn;
	var sec;
	var min;
	var rounds;
	var round = 1;
	var running = false;
	var beep;
	var roundBeep;
	var endBeep;

	function init() {
		beep = new Audio("beep.mp3");
		beep.preload = 'auto';
		roundBeep = new Audio("round.mp3");
		roundBeep.preload = 'auto';
		endBeep = new Audio("end.mp3");
		endBeep.preload = 'auto';
	}

	function p(sound, vol = 1) {
		console.log("PLAYING SOUND!:" + sound);
		sound.volume = vol;
		sound.play();
	}

	function startTimer() {
		if (running == true) {
			stopTimer();
			return;
		}
		running = true;
		document.getElementById("btn").innerHTML = "STOP";
		tIn = document.getElementById("timer").value;
		tRn = document.getElementById("roundsNum").value;
		rounds = tRn;
		round = 1;
		resetTime();
		document.getElementById("timer").disabled = true;
		document.getElementById("roundsNum").disabled = true;
		timer = setInterval(eSec, 1000);
	}

	function stopTimer() {
		clearInterval(timer);
		p(endBeep);
		console.log("TIMER STOPPED");
		running = false;
		document.getElementById("timer").value = tIn;
		document.getElementById("roundsNum").value = tRn;
		document.getElementById("btn").innerHTML = "START";
		document.getElementById("timer").disabled = false;
		document.getElementById("roundsNum").disabled = false;
	}

	function resetTime() {
		t = tIn.split(":");
		min = t[1] != undefined ? t[0] : 0;
		sec = t[1] ? t[1] : t[0];
	}

	function eSec() {

		if (sec == 0 && min > 0) {
			min -= 1;
			sec = 59;
		} else if (min == 0 && sec == 0 && rounds == round) {

			stopTimer();
			console.log("TIMER ENDED");
			return;

		} else if (min == 0 && sec == 1 && rounds != round) {

			round++;
			p(roundBeep);
			resetTime();
			console.log("ROUND");

		} else {
			sec -= 1;
			if (sec < 4 && sec != 0) {
				p(beep);
				console.log("beep");
			}
		}
		document.getElementById("roundsNum").value = round + "/" + rounds;
		document.getElementById("timer").value = min > 0 ? min + ":" + sec : sec;
	}
</script>
</html>

Html5音频播放奇怪的延迟

0 个答案: