mickvangelderen/beepo.html

## 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>