Display mute icon until we can make noise

static/index.html

@@ -59,7 +59,10 @@
 					<div class="mdl-card mdl-shadow--4dp input-methods">
 						<div class="mdl-card__title">
 							<h2 class="mdl-card__title-text">Input</h2>
-							<div id="recv"><!-- This is a little light that turns on when someone's sending --></div>
+							<div id="recv">
+								<!-- This div appears as a little light that turns on when someone's sending -->
+								<i class="material-icons" id="muted">volume_off</i>
+							</div>
 						</div>
 						<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
 							<div class="mdl-tabs__tab-bar">

static/vail.css

@@ -34,6 +34,10 @@
   width: 100%;
 }
 
+.hidden {
+	visibility: none;
+}
+
 #errors {
     color: rgba(127, 0, 0, .54);
     max-height: 5em;
@@ -100,14 +104,15 @@ img {
 #recv {
 	width: 3em;
 	height: 2em;
-	background-color: orange;
+	line-height: 2em;
 	position: absolute;
 	right: 1em;
 	border-radius: 30%;
-	display: none;
+	text-align: center;
+	vertical-align: middle;
 }
 #recv.rx {
-	display: block;
+	background-color: orange;
 }
 
 .input-methods td {
@@ -138,3 +143,4 @@ img {
 	margin: 1px;
 	padding: 0.4em;
 	min-width: 4em;
+}

static/vail.js

@@ -140,6 +140,12 @@ class Buzzer {
 		this.lowGain = this.create(lowFreq)
 		this.highGain = this.create(highFreq)
 		this.errorGain = this.create(errorFreq, "square")
+
+		this.ac.resume()
+		.then(() => {
+			document.querySelector("#muted").classList.add("hidden")
+		})
+
 	}
 
 	create(frequency, type="sine") {