added loop song and loop queue (on/off) examples

Author: chrisweb

examples/simple-player/client/src/bootstrap.ts

@@ -14,13 +14,11 @@ import { PlayerUI } from './library/player/ui.js'
 const options: ICoreOptions = {
     soundsBaseUrl: 'http://127.0.0.1:35000/streaming/music/',
     loadPlayerMode: PlayerCore.PLAYER_MODE_AUDIO,
-    loopQueue: true,
     addAudioElementsToDom: true,
 }
 /*const options: ICoreOptions = {
     soundsBaseUrl: 'http://127.0.0.1:35000/static/music/',
     loadPlayerMode: PlayerCore.PLAYER_MODE_AJAX,
-    loopQueue: true,
 }*/
 
 // create an instance of the player
@@ -125,4 +123,6 @@ myPlaylist.forEach((song) => {
 
     console.log('sound got added to queue: ', sound)
 
-})
+})
+
+playerUI.refresh()

examples/simple-player/client/src/library/player/ui.ts

@@ -204,7 +204,11 @@ class PlayerUI {
 
         event.preventDefault()
 
-        const $button = event.target as HTMLElement
+        let $button = event.target as HTMLElement
+
+        if ($button.localName === 'span') {
+            $button = $button.parentElement
+        }
 
         if ($button.id === 'js-first') {
             this.player.play({ whichSound: 'first' })
@@ -224,15 +228,30 @@ class PlayerUI {
             }
         }
 
-        if ($button.id === 'pause') {
-            this.player.pause()
+        if ($button.id === 'js-stop') {
+            this.player.stop()
         }
 
-        if ($button.id === 'stop') {
-            this.player.stop()
+        if ($button.id === 'js-loop-song') {
+            const currentSound = this.player.getCurrentSound()
+            if (currentSound.getLoop()) {
+                currentSound.setLoop(false)
+            } else {
+                currentSound.setLoop(true)
+            }
+            this._updateLoopSong()
         }
 
-        if ($button.id === 'disconnect') {
+        if ($button.id === 'js-loop-queue') {
+            if (this.player.getLoopQueue()) {
+                this.player.setLoopQueue(false)
+            } else {
+                this.player.setLoopQueue(true)
+            }
+            this._updateLoopQueue()
+        }
+
+        if ($button.id === 'js-disconnect') {
             this.player.disconnect()
         }
 
@@ -310,6 +329,38 @@ class PlayerUI {
         this._switchPlayerContext('on')
     }
 
+    protected _updateLoopQueue(): void {
+
+        const isLoopQueue = this.player.getLoopQueue()
+        const $loopQueueOn = document.getElementById('js-loop-queue-on')
+        const $loopQueueOff = document.getElementById('js-loop-queue-off')
+
+        if (isLoopQueue) {
+            $loopQueueOn.classList.remove('hidden')
+            $loopQueueOff.classList.add('hidden')
+        } else {
+            $loopQueueOn.classList.add('hidden')
+            $loopQueueOff.classList.remove('hidden')
+        }
+
+    }
+
+    protected _updateLoopSong(): void {
+
+        const isLoopSound = this.player.getCurrentSound().getLoop()
+        const $loopSongOn = document.getElementById('js-loop-song-on')
+        const $loopSongOff = document.getElementById('js-loop-song-off')
+
+        if (isLoopSound) {
+            $loopSongOn.classList.remove('hidden')
+            $loopSongOff.classList.add('hidden')
+        } else {
+            $loopSongOn.classList.add('hidden')
+            $loopSongOff.classList.remove('hidden')
+        }
+
+    }
+
     protected _destroyListeners(): void {
 
         this._buttonsBox.removeEventListener('click', this._onClickButtonsBox.bind(this))
@@ -326,6 +377,13 @@ class PlayerUI {
 
     }
 
+    public refresh(): void {
+        
+        this._updateLoopQueue()
+        this._updateLoopSong()
+
+    }
+
     public deconstructor(): void {
         this._destroyListeners()
     }

examples/simple-player/html/main.html

@@ -125,10 +125,18 @@ <h1>web audio api player - simple example</h1>
         <button id="js-byId-2" class="button" data-song-id="song2">Play song by ID (song 2)</button>
         <button id="js-byId-3" class="button" data-song-id="song3" data-song-play-time-offset="10">Play song by ID (song
             3) & start at (playTimeOffset) 10 seconds</button>
-        <button id="pause" class="button">Pause</button>
-        <button id="stop" class="button">Stop</button>
+        <button id="js-stop" class="button">Stop</button>
         <br>
-        <button id="disconnect" class="button">Disconnect player</button>
+        <button id="js-loop-song" class="button">
+            <span id="js-loop-song-on" class="hidden">Loop song: ON</span>
+            <span id="js-loop-song-off">Loop song: OFF</span>
+        </button>
+        <button id="js-loop-queue" class="button">
+            <span id="js-loop-queue-on" class="hidden">Loop queue: ON</span>
+            <span id="js-loop-queue-off">Loop queue: OFF</span>
+        </button>
+        <br>
+        <button id="js-disconnect" class="button">Disconnect player</button>
     </section>
 
 </body>