update simple example

Author: chrisweb

dist/library/core.d.ts

@@ -28,10 +28,10 @@ export declare class PlayerCore {
     readonly WHERE_IN_QUEUE_AT_END: string;
     readonly WHERE_IN_QUEUE_AT_START: string;
     readonly WHERE_IN_QUEUE_AFTER_CURRENT: string;
-    readonly PLAY_SOUND_NEXT = "next";
-    readonly PLAY_SOUND_PREVIOUS = "previous";
-    readonly PLAY_SOUND_FIRST = "first";
-    readonly PLAY_SOUND_LAST = "last";
+    readonly PLAY_SOUND_NEXT = 'next';
+    readonly PLAY_SOUND_PREVIOUS = 'previous';
+    readonly PLAY_SOUND_FIRST = 'first';
+    readonly PLAY_SOUND_LAST = 'last';
     constructor(playerOptions?: ICoreOptions);
     protected _initialize(): void;
     addSoundToQueue(soundAttributes: ISoundAttributes, whereInQueue?: string): ISound;

examples/simple-player/client/bootstrap.ts

@@ -2,7 +2,7 @@
 'use strict';
 
 // player build
-import { PlayerCore, PlayerSound, ICoreOptions } from '../../../dist/index.js';
+import { PlayerCore, ISoundAttributes, ICoreOptions } from '../../../dist/index.js';
 
 // library
 import { PlayerUI } from './library/player/ui.js';
@@ -15,24 +15,17 @@ let options: ICoreOptions = {
 let player = new PlayerCore(options);
 let playerUI = new PlayerUI(player);
 
-
-
-/*
-
-
-
-
 let firstSoundAttributes: ISoundAttributes = {
     sources: '1314412&format=mp31',
     id: 1314412,
     playlistId: 0,
     onLoading: (loadingProgress, maximumValue, currentValue) => {
         console.log('loading: ', loadingProgress, maximumValue, currentValue);
-        playerUI.setLoadingProgress(loadingProgress);
+        playerUI.changeLoadingProgress(loadingProgress);
     },
     onPlaying: (playingProgress, maximumValue, currentValue) => {
         console.log('playing: ', playingProgress, maximumValue, currentValue);
-        playerUI.setPlayingProgress(playingProgress);
+        playerUI.changePlayingProgress(playingProgress);
     },
     onStarted: (playTimeOffset) => {
         console.log('started', playTimeOffset);
@@ -49,7 +42,7 @@ let firstSoundAttributes: ISoundAttributes = {
     onEnded: (willPlayNext) => {
         console.log('ended', willPlayNext);
         if (!willPlayNext) {
-            playerUI.switchPlayerContext('on');
+            playerUI.resetUI();
         }
     }
 };
@@ -63,11 +56,11 @@ let secondSoundAttributes: ISoundAttributes = {
     playlistId: 0,
     onLoading: (loadingProgress, maximumValue, currentValue) => {
         console.log('loading: ', loadingProgress, maximumValue, currentValue);
-        playerUI.setLoadingProgress(loadingProgress);
+        playerUI.changeLoadingProgress(loadingProgress);
     },
     onPlaying: (playingProgress, maximumValue, currentValue) => {
         console.log('playing: ', playingProgress, maximumValue, currentValue);
-        playerUI.setPlayingProgress(playingProgress);
+        playerUI.changePlayingProgress(playingProgress);
     },
     onStarted: (playTimeOffset) => {
         console.log('started', playTimeOffset);
@@ -84,14 +77,14 @@ let secondSoundAttributes: ISoundAttributes = {
     onEnded: (willPlayNext) => {
         console.log('ended', willPlayNext);
         if (!willPlayNext) {
-            playerUI.switchPlayerContext('on');
+            playerUI.resetUI();
         }
     }
 };
 
 // add another song
 let secondSound = player.addSoundToQueue(secondSoundAttributes);
-*/
+
 
 
 

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

@@ -7,36 +7,21 @@ class PlayerUI {
     public player: PlayerCore;
 
     protected _buttonsBox: HTMLElement;
+    protected _volumeSlider: HTMLInputElement;
+    protected _loadingProgressBar: HTMLInputElement;
+    protected _playingProgressBar: HTMLInputElement;
 
     constructor(player: PlayerCore) {
 
         this.player = player;
 
-        this.prepareUI();
-
-    }
-
-    private prepareUI() {
-
-        // buttons box
-        this._buttonsBox = document.getElementById('js-buttons-box');
+        this._prepareUI();
 
     }
 
-}
-
-/*
-
-    protected _buttonsBox: HTMLElement;
-    protected _volumeSlider: HTMLInputElement;
-    protected _loadingProgressBar: HTMLInputElement;
-    protected _playingProgressBar: HTMLInputElement;
-
-    constructor(player: PlayerCore) {
-
-        // compatibility goal: minimum IE11
-
+    protected _prepareUI() {
 
+        // NOTE TO SELF: compatibility goal: minimum IE11
 
         // buttons box
         this._buttonsBox = document.getElementById('js-buttons-box');
@@ -53,8 +38,9 @@ class PlayerUI {
         // start listening to events
         this._createListeners();
 
-        // set the initial volume volume to the volume input range
+        // set the initial volume to the volume input range
         this._volumeSlider.value = String(this.player.getVolume());
+        // TODO: use the localstorage or indexeddb to persist the user volume
 
     }
 
@@ -94,20 +80,18 @@ class PlayerUI {
                     break;
             }
 
-            this.switchPlayerContext(playerContext);
+            this._switchPlayerContext(playerContext);
 
         }
 
         if ($button.id === 'js-previous-button') {
 
-            this.setPlayingProgress(0);
+            this._setPlayingProgress(0);
 
             let playerContext = this._buttonsBox.dataset['playerContext'];
 
             if (playerContext === 'off') {
-
-                this.switchPlayerContext(playerContext);
-
+                this._switchPlayerContext(playerContext);
             }
 
             this.player.play('previous');
@@ -116,14 +100,12 @@ class PlayerUI {
 
         if ($button.id === 'js-next-button') {
 
-            this.setPlayingProgress(0);
+            this._setPlayingProgress(0);
 
             let playerContext = this._buttonsBox.dataset['playerContext'];
 
             if (playerContext === 'off') {
-
-                this.switchPlayerContext(playerContext);
-
+                this._switchPlayerContext(playerContext);
             }
 
             this.player.play('next');
@@ -144,7 +126,28 @@ class PlayerUI {
 
     }
 
-    public switchPlayerContext(currentPlayerContext: string) {
+    protected _onChangeVolume(event: Event) {
+
+        // styling the html5 range:
+        // http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html
+
+        let rangeElement = event.target as HTMLInputElement;
+        let value = parseInt(rangeElement.value);
+
+        this.player.setVolume(value);
+
+    }
+
+    protected _onChangePlayingProgress(event: Event) {
+
+        let rangeElement = event.target as HTMLInputElement;
+        let value = parseInt(rangeElement.value);
+
+        this.player.setPosition(value);
+
+    }
+
+    protected _switchPlayerContext(currentPlayerContext: string) {
 
         let $playIcon = document.getElementById('js-play');
         let $pauseIcon = document.getElementById('js-pause');
@@ -169,24 +172,33 @@ class PlayerUI {
 
     }
 
-    protected _onChangeVolume(event: Event) {
+    protected _setPlayingProgress(percentage: number) {
 
-        // styling the html5 range:
-        // http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html
+        this._playingProgressBar.value = percentage.toString();
 
-        let rangeElement = event.target as HTMLInputElement;
-        let value = parseInt(rangeElement.value);
+    }
 
-        this.player.setVolume(value);
+    protected _setLoadingProgress(percentage: number) {
+
+        this._loadingProgressBar.value = percentage.toString();
 
     }
 
-    protected _onChangePlayingProgress(event: Event) {
+    public changePlayingProgress(percentage: number) {
 
-        let rangeElement = event.target as HTMLInputElement;
-        let value = parseInt(rangeElement.value);
+        this._setPlayingProgress(percentage);
 
-        this.player.setPosition(value);
+    }
+
+    public changeLoadingProgress(percentage: number) {
+
+        this._setLoadingProgress(percentage);
+
+    }
+
+    public resetUI() {
+
+        this._switchPlayerContext('on');
 
     }
 
@@ -202,24 +214,12 @@ class PlayerUI {
 
     }
 
-    public setLoadingProgress(percentage: number) {
-
-        this._loadingProgressBar.value = percentage.toString();
-
-    }
-
-    public setPlayingProgress(percentage: number) {
-
-        this._playingProgressBar.value = percentage.toString();
-
-    }
-
     public deconstructor() {
 
         this._destroyListeners();
 
     }
-*/
 
+}
 
 export { PlayerUI };

examples/simple-player/html/main.html

@@ -44,8 +44,9 @@ <h1>web audio api player - simple example</h1>
             <button id="js-repeat-button" class="button">R</button>
         </div>
 
-        <input type="range" min="0" max="100" value="0" step="1" id="js-player-loading-progress" />
+        <progress max="100" value="0" id="js-player-loading-progress"></progress>
 
+        <!-- NOTE TO SELF: I use the range element instead of progress to allow the user to interact with it -->
         <input type="range" min="0" max="100" value="0" step="1" id="js-player-playing-progress" />
 
         <input type="range" min="0" max="100" value="0" step="1" id="js-player-volume" />