Telegraph sounds, implements #22

static/index.html

@@ -251,7 +251,13 @@
 									max="9999"
 									value="4000">
 							</p>
-							<hr>
+							<p>
+								<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="telegraph-buzzer">
+									<input type="checkbox" id="telegraph-buzzer" class="mdl-switch__input">
+									<span class="mdl-switch__label">Telegraph sounds</span>
+								</label>
+							</p>
+						<hr>
 							<table>
 								<tbody>
 									<tr>

static/morse.mjs

@@ -350,9 +350,9 @@ class Buzzer {
 		//this.noiseGain = this.whiteNoise()
 
 		this.ac.resume()
-			.then(() => {
-				document.querySelector("#muted").classList.add("hidden")
-			})
+		.then(() => {
+			document.querySelector("#muted").classList.add("hidden")
+		})
 
 	}
 
@@ -494,5 +494,41 @@ class Buzzer {
 	}
 }
 
+class TelegraphBuzzer extends Buzzer{
+	constructor(gain=0.6) {
+		super()
+
+		this.gain = this.ac.createGain()
+		this.gain.connect(this.ac.destination)
+		this.gain.gain.value = gain
+		
+		this.loadMedia("telegraph-a.mp3").then(s => this.closeBuf = s)
+		this.loadMedia("telegraph-b.mp3").then(s => this.openBuf = s)
+	}
+
+	async loadMedia(url) {
+		let resp = await fetch(url)
+		let buf = await resp.arrayBuffer()
+		return await this.ac.decodeAudioData(buf)
+	}
+
+	play(buf, when) {
+		let bs = this.ac.createBufferSource()
+		bs.buffer = buf
+		bs.connect(this.gain)
+		bs.start(this.acTime(when))
+	}
+
+	Buzz(tx, when=0) {
+		if (tx) return
+		this.play(this.closeBuf, when)
+	}
+
+	Silence(tx ,when=0) {
+		if (tx) return
+		this.play(this.openBuf, when)
+	}
+}
+
 export {DIT, DAH, PAUSE, PAUSE_WORD, PAUSE_LETTER}
-export {Keyer, Buzzer}
+export {Keyer, Buzzer, TelegraphBuzzer}

static/vail.mjs

@@ -34,15 +34,6 @@ class VailClient {
 		this.beginTxTime = null // Time when we began transmitting
 		this.debug = localStorage.debug
 
-		// Redirect old URLs
-		if (window.location.search) {
-			let me = new URL(location)
-			let repeater = me.searchParams.get("repeater")
-			me.search = ""
-			me.hash = decodeURIComponent(repeater)
-			window.location = me
-		}
-
 		// Make helpers
 		this.buzzer = new Morse.Buzzer()
 		this.keyer = new Morse.Keyer(() => this.beginTx(), () => this.endTx())
@@ -78,13 +69,29 @@ class VailClient {
 		this.inputInit("#iambic-typeahead", e => {
 			this.keyer.SetTypeahead(e.target.checked)
 		})
+		this.inputInit("#telegraph-buzzer", e => {
+			this.setTelegraphBuzzer(e.target.checked)
+		})
 		
 		// Fill in the name of our repeater
-		let repeaterElement = document.querySelector("#repeater").addEventListener("change", e => this.setRepeater(e.target.value.trim()))
+		document.querySelector("#repeater").addEventListener("change", e => this.setRepeater(e.target.value.trim()))
 		window.addEventListener("hashchange", () => this.hashchange())
 		this.hashchange()
 	}
 
+	/**
+	 * Toggle the clicktastic buzzer, instead of the beeptastic one.
+	 * 
+	 * @param {bool} enable true to enable clicky buzzer
+	 */
+	setTelegraphBuzzer(enable) {
+		if (enable) {
+			this.buzzer = new Morse.TelegraphBuzzer()
+		} else {
+			this.buzzer = new Morse.Buzzer()
+		}
+	}
+
 	/**
 	 * Called when the hash part of the URL has changed.
 	 */
@@ -185,7 +192,7 @@ class VailClient {
 		let storedValue = localStorage[element.id]
 		if (storedValue != null) {
 			element.value = storedValue
-			element.checked = JSON.parse(storedValue)
+			element.checked = (storedValue == "on")
 		}
 		let outputElement = document.querySelector(selector + "-value")
 		let outputWpmElement = document.querySelector(selector + "-wpm")
@@ -194,9 +201,11 @@ class VailClient {
 			let value = element.value
 			if (element.hasAttribute("checked")) {
 				value = element.checked
+				localStorage[element.id] = value?"on":"off"
+			} else {
+				localStorage[element.id] = value
 			}
 	
-			localStorage[element.id] = value
 			if (outputElement) {
 				outputElement.value = value
 			}