Prompt user for interaction to enable sound when block by browser

2020-10-29 04:59:20 -07:00
parent ab81bdb708
commit 5f60cd2a1b
1 changed files with 13 additions and 3 deletions
--- a/static/main.html
+++ b/static/main.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" onclick="document.getElementById('unmute').style.display = 'none';">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Fáfnir Doorbell</title>
@@ -52,10 +52,14 @@
          border-color: yellow;
          border-width: 5px;
          padding: 15px;
+          text-align: center;
+      }
+
+      #status_box table {
+          text-align: left;
      }

      #status_box th {
-          text-align: left;
          padding-right: 2em;
      }

@@ -72,6 +76,11 @@
      .disconnected {
        color: red;
      }
+
+      #unmute {
+          display: none;
+          min-width: 60%;
+      }
    </style>
  </head>
  <body class="flash">
@@ -85,6 +94,7 @@
          <td id="last_ring" class="status"></td>
        </tr>
      </table>
+      <button id="unmute">Click Anywhere To Enable Sound</button>
    </section>

    <audio id="chime" src="indoor.mp3"></audio>
@@ -118,7 +128,7 @@
        if (ping) { clearTimeout(ping); }
        sse = new EventSource('events');
        let beep_seek = document.getElementById('beep_seek');
-        beep_seek.play();
+        beep_seek.play().catch(() => { $('#unmute').show() });  // Need user interatction for sound

        sse.onopen = () => {
          console.log('connected');