add pause and stop to example to show difference

Author: chrisweb

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

@@ -149,11 +149,18 @@ class PlayerUI {
             this.player.play({ whichSound: 'last' });
         }
 
-        if ($button.id === 'js-byId') {
+        if ($button.id.substring(0, 7) === 'js-byId') {
             const songId = $button.getAttribute('data-song-id');
             this.player.play({ whichSound: parseInt(songId) });
         }
 
+        if ($button.id === 'pause') {
+            this.player.pause();
+        }
+
+        if ($button.id === 'stop') {
+            this.player.stop();
+        }
     }
 
     protected _setPlayingProgress(percentage: number): void {

examples/simple-player/html/main.html

@@ -60,9 +60,11 @@ <h1>web audio api player - simple example</h1>
     <section id="js-extra-buttons">
         <button id="js-first" class="button">First</button>
         <button id="js-last" class="button">Last</button>
-        <button id="js-byId" class="button" data-song-id="1314412">Song by ID: 1314412 (= 1st song in queue)</button>
-        <button id="js-byId" class="button" data-song-id="1214935">Song by ID: 1214935 (= 2nd / last song in
+        <button id="js-byId-1" class="button" data-song-id="1314412">Song by ID: 1314412 (= 1st song in queue)</button>
+        <button id="js-byId-2" class="button" data-song-id="1214935">Song by ID: 1214935 (= 2nd / last song in
             queue)</button>
+        <button id="pause" class="button">Pause</button>
+        <button id="stop" class="button">Stop</button>
     </section>
 
 </body>