Added websocket event to call a script that will play the horn audio …

…when we get a message that contains the HTML indicating that the timer has finished. It's dependent on the specific HTML
jitterted · Apr 15, 2024 · de1a2e3 · de1a2e3
1 parent 57c79e2
commit de1a2e3
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/src/main/resources/static/horn.wav b/src/main/resources/static/horn.wav
diff --git a/src/main/resources/templates/ensemble-timer.html b/src/main/resources/templates/ensemble-timer.html
@@ -2,7 +2,7 @@
 <html lang="en"
       xmlns="http://www.w3.org/1999/xhtml"
       xmlns:th="http://www.thymeleaf.org"
->
+      xmlns:hx-on="http://www.w3.org/1999/xhtml">
 <head>
     <meta charset="UTF-8"/>
     <link th:href="@{/tailwind.css}" href="../static/tailwind.css" rel="stylesheet">
@@ -11,6 +11,16 @@
     <link rel="icon" href="/favicon-16x16.png" sizes="16x16">
     <link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
     <link rel="manifest" href="/site.webmanifest">
+    <script type="application/javascript">
+        let hornAudio = new Audio('/horn.wav');
+
+        function afterMessage(event) {
+            let wsMessage = event.detail.message
+            if (wsMessage.includes('<div class="timer-text">next</div>')) {
+                hornAudio.play()
+            }
+        }
+    </script>
     <script src="https://unpkg.com/htmx.org@1.9.10"
             integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
             crossorigin="anonymous"></script>
@@ -113,9 +123,11 @@
     <h1 class="text-center text-xl font-bold py-2"
         th:text="${ensembleName}">Ensemble Name</h1>
     <div
+            id="websocket-container"
             class="flex flex-col justify-center items-center p-4"
             hx-ext="ws"
             ws-connect="/member/ws/timer"
+            hx-on:htmx:ws-after-message="afterMessage(event)"
     >
         <div id="timer-container"
              class="circle circle-running"