Merge pull request #104 from ghenry22/fix-web-audio-playback-with-transcoding

update the web audio init, release and options. Resolves stalling audio playback when transcoding

Author: phiamo

src/web.ts

@@ -22,7 +22,7 @@ import { validateTrack, validateTracks } from './utils';
 declare var Hls: any;
 
 export class PlaylistWeb extends WebPlugin implements PlaylistPlugin {
-    protected audio: HTMLVideoElement | undefined;
+    protected audio: HTMLAudioElement | undefined;
     protected playlistItems: AudioTrack[] = [];
     protected loop = false;
     protected options: AudioPlayerOptions = {};
@@ -99,6 +99,15 @@ export class PlaylistWeb extends WebPlugin implements PlaylistPlugin {
         return Promise.resolve();
     }
 
+    async create(): Promise<void> {
+        this.audio = document.createElement('audio');
+        this.audio.crossOrigin = 'anonymous';
+        this.audio.preload = 'metadata';
+        this.audio.controls = true;
+        this.audio.autoplay = false;
+        return Promise.resolve();
+    }
+
     removeItem(options: RemoveItemOptions): Promise<void> {
         this.playlistItems.forEach((item, index) => {
             if (options.index && options.index === index) {
@@ -380,17 +389,10 @@ export class PlaylistWeb extends WebPlugin implements PlaylistPlugin {
         let wasPlaying = false;
         if (this.audio) {
             wasPlaying = !this.audio.paused;
-            this.audio.pause();
-            this.audio.src = '';
-            this.audio.removeAttribute('src');
-            this.audio.load();
-        }
-        this.audio = document.createElement('video');
-        if (wasPlaying || forceAutoplay) {
-            this.audio.addEventListener('canplay', () => {
-                this.play();
-            });
+            await this.release();
         }
+        await this.create();
+
         this.currentTrack = item;
         if (item.assetUrl.includes('.m3u8')) {
             await this.loadHlsJs();
@@ -407,15 +409,23 @@ export class PlaylistWeb extends WebPlugin implements PlaylistPlugin {
 
             //this.registerHlsListeners(hls, position);
         } else {
-            this.audio.src = item.assetUrl;
+            this.audio!.src = item.assetUrl;
         }
 
         await this.registerHtmlListeners(position);
 
         this.updateStatus(RmxAudioStatusMessage.RMXSTATUS_TRACK_CHANGED, {
             currentItem: item
         })
+
+        if (wasPlaying || forceAutoplay) {
+            //this.play();
+            this.audio!.addEventListener('canplay', () => {
+                this.play();
+            });
+        }
     }
+
     protected updateStatus(msgType: RmxAudioStatusMessage, value: any, trackId?: string) {
         this.notifyListeners('status', {
             action: 'status',