mickvangelderen · August 31, 2016 15:13
diff --git a/beepo.html b/beepo.html
 <html>
 <head>
 </head>
 <body>

 	<h1>Beepo</h1>

 	<p>A simple interval timer.</p>

 	<form>

 		<label for="interval-input">Interval</label>
 		<input id="interval-input" type="range" min="1" max="20" value="10" step="1"/>
 		<span id="interval-text"></span><span> seconds</span>
 		<br/>
 		<label for="volume-input">Volume</label>
 		<input id="volume-input" type="range" min="0" max="1" value="0.50" step="0.01"/>
 		<span id="volume-text"></span><span> out of 100</span>
 		<br/>
 		<label for="type-input">Sound Type</label>
 		<select id="type-input">
 			<option value="sine">Sine</option>
 			<option value="triangle" selected>Triangle</option>
 			<option value="sawtooth">Sawtooth</option>
 			<option value="square">Square</option>
 		</select>
 		<br/>
 		<label for="frequency-input">Sound Frequency</label>
 		<input id="frequency-input" type="range" min="440" max="660" value="440" step="1"/>
 		<span id="frequency-text"></span><span> Hertz</span>
 	</form>

 	<p>Crafted by Mick van Gelderen</p>

 <script>

 var audio_context = new window.AudioContext()
 var gain = audio_context.createGain(0)
 var osc = audio_context.createOscillator()

 osc.connect(gain)

 gain.connect(audio_context.destination)

 var interval_input = document.getElementById('interval-input')
 var interval_text = document.getElementById('interval-text')
 var volume_input = document.getElementById('volume-input')
 var volume_text = document.getElementById('volume-text')
 var type_input = document.getElementById('type-input')
 var frequency_input = document.getElementById('frequency-input')
 var frequency_text = document.getElementById('frequency-text')
 var timer = null
 var last = 0

 function loadOrDefault(name, value) {
 	return localStorage.getItem(name) !== null
 		? localStorage.getItem(name)
 		: value
 }

 function updateInterval(value) {
 	localStorage.setItem('beepo-interval', value)
 	interval_input.value = value
 	interval_text.textContent = interval_input.value
 }

 function updateVolume(value) {
 	localStorage.setItem('beepo-volume', value)
 	volume_input.value = value
 	volume_text.textContent = Math.round(parseFloat(volume_input.value) * 100)
 }

 function updateType(value) {
 	localStorage.setItem('beepo-type', value)
 	type_input.value = value
 	osc.type = type_input.value
 }

 function updateFrequency(value) {
 	localStorage.setItem('beepo-frequency', value)
 	frequency_input.value = value
 	frequency_text.textContent = frequency_input.value
 	osc.frequency.value = frequency_input.value
 }

 updateInterval(loadOrDefault('beepo-interval', interval_input.value))
 updateVolume(loadOrDefault('beepo-volume', volume_input.value))
 updateType(loadOrDefault('beepo-type', type_input.value))
 updateFrequency(loadOrDefault('beepo-frequency', frequency_input.value))

 interval_input.addEventListener('input', event => updateInterval(event.target.value))
 volume_input.addEventListener('input', event => updateVolume(event.target.value))
 type_input.addEventListener('input', event => updateType(event.target.value))
 frequency_input.addEventListener('input', event => updateFrequency(event.target.value))

 osc.start()

 beep()

 setTimeout(tick, 0)

 function tick() {
 	setTimeout(tick, 0)

 	var time = audio_context.currentTime

 	if (time < last + parseFloat(interval_input.value)) return

 	beep()
 }

 function beep() {
 	last = audio_context.currentTime

 	var volume = parseFloat(volume_input.value)

 	gain.gain.cancelScheduledValues(last)
 	gain.gain.setValueAtTime(0, last)
 	gain.gain.linearRampToValueAtTime(volume, last + 0.050)
 	gain.gain.setValueAtTime(volume, last + 0.150)
 	gain.gain.linearRampToValueAtTime(0, last + 0.200)
 }

 </script>
 </body>
 </html>
	<html>
	<head>
	</head>
	<body>

	<h1>Beepo</h1>

	<p>A simple interval timer.</p>

	<form>

	<label for="interval-input">Interval</label>
	<input id="interval-input" type="range" min="1" max="20" value="10" step="1"/>
	<span id="interval-text"></span><span> seconds</span>
	<br/>
	<label for="volume-input">Volume</label>
	<input id="volume-input" type="range" min="0" max="1" value="0.50" step="0.01"/>
	<span id="volume-text"></span><span> out of 100</span>
	<br/>
	<label for="type-input">Sound Type</label>
	<select id="type-input">
	<option value="sine">Sine</option>
	<option value="triangle" selected>Triangle</option>
	<option value="sawtooth">Sawtooth</option>
	<option value="square">Square</option>
	</select>
	<br/>
	<label for="frequency-input">Sound Frequency</label>
	<input id="frequency-input" type="range" min="440" max="660" value="440" step="1"/>
	<span id="frequency-text"></span><span> Hertz</span>
	</form>

	<p>Crafted by Mick van Gelderen</p>

	<script>

	var audio_context = new window.AudioContext()
	var gain = audio_context.createGain(0)
	var osc = audio_context.createOscillator()

	osc.connect(gain)

	gain.connect(audio_context.destination)

	var interval_input = document.getElementById('interval-input')
	var interval_text = document.getElementById('interval-text')
	var volume_input = document.getElementById('volume-input')
	var volume_text = document.getElementById('volume-text')
	var type_input = document.getElementById('type-input')
	var frequency_input = document.getElementById('frequency-input')
	var frequency_text = document.getElementById('frequency-text')
	var timer = null
	var last = 0

	function loadOrDefault(name, value) {
	return localStorage.getItem(name) !== null
	? localStorage.getItem(name)
	: value
	}

	function updateInterval(value) {
	localStorage.setItem('beepo-interval', value)
	interval_input.value = value
	interval_text.textContent = interval_input.value
	}

	function updateVolume(value) {
	localStorage.setItem('beepo-volume', value)
	volume_input.value = value
	volume_text.textContent = Math.round(parseFloat(volume_input.value) * 100)
	}

	function updateType(value) {
	localStorage.setItem('beepo-type', value)
	type_input.value = value
	osc.type = type_input.value
	}

	function updateFrequency(value) {
	localStorage.setItem('beepo-frequency', value)
	frequency_input.value = value
	frequency_text.textContent = frequency_input.value
	osc.frequency.value = frequency_input.value
	}

	updateInterval(loadOrDefault('beepo-interval', interval_input.value))
	updateVolume(loadOrDefault('beepo-volume', volume_input.value))
	updateType(loadOrDefault('beepo-type', type_input.value))
	updateFrequency(loadOrDefault('beepo-frequency', frequency_input.value))

	interval_input.addEventListener('input', event => updateInterval(event.target.value))
	volume_input.addEventListener('input', event => updateVolume(event.target.value))
	type_input.addEventListener('input', event => updateType(event.target.value))
	frequency_input.addEventListener('input', event => updateFrequency(event.target.value))

	osc.start()

	beep()

	setTimeout(tick, 0)

	function tick() {
	setTimeout(tick, 0)

	var time = audio_context.currentTime

	if (time < last + parseFloat(interval_input.value)) return

	beep()
	}

	function beep() {
	last = audio_context.currentTime

	var volume = parseFloat(volume_input.value)

	gain.gain.cancelScheduledValues(last)
	gain.gain.setValueAtTime(0, last)
	gain.gain.linearRampToValueAtTime(volume, last + 0.050)
	gain.gain.setValueAtTime(volume, last + 0.150)
	gain.gain.linearRampToValueAtTime(0, last + 0.200)
	}

	</script>
	</body>
	</html>