WIP refactor

Author: Greenheart

src/helpers.ts

@@ -1,14 +1,13 @@
-import Howl from './Howl';
+import Howl, { HowlXHROptions } from './Howl';
 import Howler from './howler';
 
 export const cache = {};
 
 /**
  * Buffer a sound from URL, Data URI or cache and decode to audio source (Web Audio API).
- * @param  {Howl} self
  */
-export function loadBuffer(self) {
-  var url = self._src;
+export function loadBuffer(self: Howl) {
+  var url = self._src as string;
 
   // Check if the buffer has already been cached and use it instead.
   if (cache[url]) {
@@ -33,18 +32,19 @@ export function loadBuffer(self) {
   } else {
     // Load the buffer from the URL.
     var xhr = new XMLHttpRequest();
-    xhr.open(self._xhr.method, url, true);
-    xhr.withCredentials = self._xhr.withCredentials;
+    xhr.open((self._xhr as HowlXHROptions).method as string, url, true);
+    xhr.withCredentials = (self._xhr as HowlXHROptions)
+      .withCredentials as boolean;
     xhr.responseType = 'arraybuffer';
 
     // Apply any custom headers to the request.
-    if (self._xhr.headers) {
-      Object.keys(self._xhr.headers).forEach(function (key) {
-        xhr.setRequestHeader(key, self._xhr.headers[key]);
+    if (self._xhr as HowlXHROptions) {
+      Object.keys(self._xhr as HowlXHROptions).forEach(function (key) {
+        xhr.setRequestHeader(key, (self._xhr as HowlXHROptions)[key]);
       });
     }
 
-    xhr.onload = function () {
+    xhr.onload = () => {
       // Make sure we get a successful response back.
       var code = (xhr.status + '')[0];
       if (code !== '0' && code !== '2' && code !== '3') {
@@ -58,7 +58,7 @@ export function loadBuffer(self) {
 
       decodeAudioData(xhr.response, self);
     };
-    xhr.onerror = function () {
+    xhr.onerror = () => {
       // If there is an error, switch to HTML5 Audio.
       if (self._webAudio) {
         self._html5 = true;
@@ -74,20 +74,20 @@ export function loadBuffer(self) {
 
 /**
  * Send the XHR request wrapped in a try/catch.
- * @param  {Object} xhr XHR to send.
+ * @param xhr XHR to send.
  */
-function safeXhrSend(xhr) {
+function safeXhrSend(xhr: XMLHttpRequest) {
   try {
     xhr.send();
   } catch (e) {
-    xhr.onerror();
+    console.error('XHR Request failed: ', e);
   }
 }
 
 /**
  * Decode audio data from an array buffer.
- * @param  {ArrayBuffer} arraybuffer The audio data.
- * @param  {Howl}        self
+ * @param arraybuffer The audio data.
+ * @param self
  */
 function decodeAudioData(arraybuffer: ArrayBuffer, self: Howl) {
   // Fire a load error if something broke.
@@ -98,7 +98,7 @@ function decodeAudioData(arraybuffer: ArrayBuffer, self: Howl) {
   // Load the sound on success.
   function success(buffer: AudioBuffer) {
     if (buffer && self._sounds.length > 0) {
-      cache[self._src] = buffer;
+      cache[self._src as string] = buffer;
       loadSound(self, buffer);
     } else {
       error();
@@ -118,8 +118,8 @@ function decodeAudioData(arraybuffer: ArrayBuffer, self: Howl) {
 
 /**
  * Sound is now loaded, so finish setting everything up and fire the loaded event.
- * @param  {Howl} self
- * @param  {Object} buffer The decoded buffer sound source.
+ * @param self
+ * @param buffer The decoded buffer sound source.
  */
 function loadSound(self: Howl, buffer?: AudioBuffer) {
   // Set the duration.
@@ -140,6 +140,7 @@ function loadSound(self: Howl, buffer?: AudioBuffer) {
   }
 }
 
+// NOTE: Maybe remove these
 export const isHTMLAudioElement = (node: any): node is HTMLAudioElement =>
   (node as HTMLAudioElement).playbackRate !== undefined;
 

src/howl.ts

@@ -9,6 +9,12 @@ export interface SoundSpriteDefinitions {
   [name: string]: [number, number] | [number, number, boolean];
 }
 
+export interface HowlXHROptions {
+  method?: string;
+  headers?: Record<string, string>;
+  withCredentials?: boolean;
+}
+
 export interface HowlListeners {
   /**
    * Fires when the sound has been stopped. The first parameter is the ID of the sound.
@@ -174,11 +180,7 @@ export interface HowlOptions extends HowlListeners {
    * this parameter. Each is optional (method defaults to GET, headers default to undefined and
    * withCredentials defaults to false).
    */
-  xhr?: {
-    method?: string;
-    headers?: Record<string, string>;
-    withCredentials?: boolean;
-  };
+  xhr?: HowlXHROptions;
 }
 
 type HowlCallbacks = Array<{ fn: HowlCallback }>;

src/sound.ts

@@ -37,7 +37,7 @@ class Sound {
 
   /**
    * Setup the sound object, which each node attached to a Howl group is contained in.
-   * @param {Object} howl The Howl parent group.
+   * @param howl The Howl parent group.
    */
   constructor(howl: Howl) {
     this._parent = howl;
@@ -73,7 +73,6 @@ class Sound {
 
   /**
    * Create and setup a new sound object, whether HTML5 Audio or Web Audio.
-   * @return {Sound}
    */
   create() {
     var parent = this._parent;
@@ -116,7 +115,6 @@ class Sound {
 
   /**
    * Reset the parameters of this sound to the original state (for recycle).
-   * @return {Sound}
    */
   reset() {
     var parent = this._parent;
@@ -159,7 +157,7 @@ class Sound {
    * HTML5 Audio canplaythrough listener callback.
    */
   _loadListener() {
-    var parent = this._parent;
+    const parent = this._parent;
 
     // Round up the duration to account for the lower precision in HTML5 Audio.
     parent._duration =
@@ -184,7 +182,7 @@ class Sound {
    * HTML5 Audio ended listener callback.
    */
   _endListener() {
-    var parent = this._parent;
+    const parent = this._parent;
 
     // Only handle the `ended`` event if the duration is Infinity.
     if (parent._duration === Infinity) {