add check for interactivity before playing audio

dev.html

@@ -7,6 +7,34 @@
 
     <title>Go Viewer</title>
 
+    <link
+      rel="icon"
+      type="image/png"
+      href="https://cdn.online-go.com/icons/favicon-16x16.png"
+      sizes="16x16"
+    />
+
+    <link
+      rel="icon"
+      type="image/png"
+      href="https://cdn.online-go.com/icons/favicon-32x32.png"
+      sizes="32x32"
+    />
+
+    <link
+      rel="icon"
+      type="image/png"
+      href="https://cdn.online-go.com/icons/favicon-96x96.png"
+      sizes="96x96"
+    />
+
+    <link
+      rel="icon"
+      type="image/png"
+      href="https://cdn.online-go.com/icons/android-chrome-192x192.png"
+      sizes="192x192"
+    />
+
     <script type="importmap">
       {
         "imports": {

src/lib/sfx.ts

@@ -36,12 +36,17 @@ export class Sfx {
     this.#effects.load();
   }
 
-  placeStone() {
+  async placeStone() {
+    if (!navigator.userActivation.hasBeenActive) {
+      return void 0;
+    }
+
     const [start, duration] =
       stone_sounds[Math.floor(Math.random() * stone_sounds.length)];
 
     return new Promise<void>((resolve) => {
       this.#stones.currentTime = start / 1000;
+
       this.#stones.play();
 
       setTimeout(() => {
@@ -53,6 +58,10 @@ export class Sfx {
   }
 
   captureStones(count: number) {
+    if (!navigator.userActivation.hasBeenActive) {
+      return void 0;
+    }
+
     return new Promise<void>((resolve) => {
       let start: number;
       let duration: number;