Update Test Page and add SilkVisualMode

README.md

@@ -37,6 +37,15 @@ https://dagammla.gitlab.io/keep-silk-open/test.html
 
 Usually your browser will timeout after ~10 minutes
 
+For debugging, it can be helpful to visualize the audio element.
+To do this, write the following:
+<script>
+    var AlwaysUseSilk = true
+    var SilkVisualMode = true
+</script>
+<script defer src="https://dagammla.gitlab.io/keep-silk-open/keep.js">
+</script>
+
 ---
 
 ## Experimental!

keep.js

@@ -13,6 +13,9 @@
     const alwaysUse = typeof AlwaysUseSilk != "undefined" && !!AlwaysUseSilk
 
     if (userAgent.includes("silk") || alwaysUse){
+
+        const visualMode = typeof SilkVisualMode != "undefined" && !!SilkVisualMode
+
         let source = document.currentScript.getAttribute("src")
         const lastDivider = source.lastIndexOf("/")
         source = source.slice(0, lastDivider + 1) + "media.mp3"
@@ -20,11 +23,10 @@
         const nowQuery = () => `?q=${Date.now()}`
 
         const audio = document.createElement("audio")
-        audio.controls = false
+        audio.controls = visualMode
         audio.src = source + nowQuery()
         audio.muted = true
         audio.autoplay = true
-        audio.loop = true
         document.body.appendChild(audio)
 
         const listenEvents = ["keydown", "pointerdown", "click"]
@@ -47,11 +49,11 @@
             audio.play()
         }
 
+        audio.onended = reload
+
         const startMedia = () => {
             reload()
             audio.muted = false
-            audio.loop = false
-            audio.onended = reload
         }
 
         audio.onplaying = () => removeAllListeners(startMedia)

test.html

@@ -1,3 +1,10 @@
 <script defer src="https://dagammla.gitlab.io/keep-silk-open/keep.js"></script>
 <h1>Test Page</h1>
-<p>This page should stay open on your Amazon Echo Show device</p>
+<p><b id="rep" style="color: red;">TAP THE SCREEN</b></p> 
+<p>The Audio Element will be invisible on your page</p>
+
+<script>
+document.addEventListener("click", () => document.getElementById("rep").outerHTML = 'This page should now stay open')
+var SilkVisualMode = true
+var AlwaysUseSilk = true
+</script>