Fix: audio playback

index.html

@@ -16,29 +16,42 @@
         <div x-data>
             <div x-show="$store.localState.joined">
                 <hgroup>
-                    <h1 x-text="'Currently playing: ' + ($store.remoteState.isMyTurn ? 'YOU!':$store.remoteState.players[$store.remoteState.currentPlayer])">
+                    <h1
+                        x-text="'Currently playing: ' + ($store.remoteState.isMyTurn ? 'YOU!':$store.remoteState.players[$store.remoteState.currentPlayer])">
                     </h1>
                     <h2 x-text="'You are ' + $store.localState.name"></h2>
                 </hgroup>
 
                 <div x-data="Timer">
-                    <p :class="'timer' + ($store.remoteState.isMyTurn ? ' my-turn':'') + (time < 0 ? ' over':'')" x-text="time + 's'"></p>
+                    <p :class="'timer' + ($store.remoteState.isMyTurn ? ' my-turn':'') + (time < 0 ? ' over':'')"
+                        x-text="time + 's'"></p>
                 </div>
 
                 <button @click="$store.remoteState.giveTurnToNextPlayer()"
                     x-bind:disabled="$store.remoteState.currentPlayer !== $store.localState.id">I'm done!</button>
-                <p>Player after me: <b x-text="$store.remoteState.players[$store.localState.nextPlayer]"></b> </p>
-                <select x-model="$store.localState.nextPlayer">
+
+                <label for="nextPlayer_select">Player after me: <b
+                        x-text="$store.remoteState.players[$store.localState.nextPlayer]"></b> </label>
+                <select x-model="$store.localState.nextPlayer" id="nextPlayer_select">
                     <template
                         x-for="playerId in Object.keys($store.remoteState.players).filter(id => id != $store.localState.id)"
                         :key="playerId">
                         <option x-bind:value="playerId" x-text="$store.remoteState.players[playerId]"></option>
                     </template>
                 </select>
+
+                <fieldset>
+                    <label for="sound_enabled">
+                        <input x-model="$store.audio.isEnabled" @click="$store.audio.testPermission()" type="checkbox" id="sound_enabled" name="sound_enabled" role="switch">
+                        Enable sound
+                    </label>
+                </fieldset>
+
                 <div class="grid">
                     <button class="secondary outline" @click="$store.localState.leave()">Leave</button>
                     <button class="secondary outline" @click="$store.remoteState.clear()">Clear</button>
                 </div>
+
                 <p>Other players:</p>
                 <ul>
                     <template x-for="playerId in Object.keys($store.remoteState.players)" :key="playerId">

index.js

@@ -81,7 +81,6 @@ document.addEventListener('alpine:init', () => {
         connected: false,
         isMyTurn: false,
         _client: null,
-        _audio: null,
 
         init() {
             Alpine.effect(() => {
@@ -113,11 +112,9 @@ document.addEventListener('alpine:init', () => {
 
             Alpine.effect(() => {
                 if(this.isMyTurn) {
-                    this._audio.play();
+                    Alpine.store("audio").playDing()
                 }
             })
-
-            this._audio = new Audio('ding.mp3');
         },
 
         connect() {
@@ -173,4 +170,51 @@ document.addEventListener('alpine:init', () => {
             this._client.publish('im.dorian.whos-turn-is-it.currentPlayer', Alpine.store("localState").id, { qos:1, retain: true })
         }
     })
+
+    Alpine.store("audio", {
+        hasBeenTested: false,
+        isAvailable: false,
+        isEnabled: false,
+        audioPlayer: null,
+
+        init() {
+            this.audioPlayer = new Audio('silence.mp3');
+
+            Alpine.effect(() => {
+                localStorage.setItem("audio_enabled", this.isEnabled)
+            })
+        },
+
+        testPermission() {
+            if(this.isEnabled) return;
+            this.audioPlayer.src = 'silence.mp3';
+            this.audioPlayer.play().then(() => {
+                this.isAvailable = true
+                this.isEnabled = localStorage.getItem("audio_enabled") === false ? false:true
+                this.hasBeenTested = true
+            }).catch((error) => {
+                console.warn("Audio permission not granted!")
+                this.isAvailable = false
+                this.isEnabled = false
+                this.hasBeenTested = true
+            })
+        },
+
+        playDing() {
+            if(!this.isEnabled) return;
+            this.playSound('ding.mp3')
+        },
+
+        playSound(soundFile) {
+            if (!this.audioPlayer.paused || !this.isAvailable) {
+                return;
+            }
+            if (!this.audioPlayer.src.endsWith(soundFile)) {
+                this.audioPlayer.src = soundFile;
+            }
+            this.audioPlayer.play();
+        },
+
+
+    })
 })