Draft: Display UI overlay when VLC.js is loaded

Resolves #22

The progress bar is now displayed when VLC.js has loaded in the DOM.

The icons not loading when using a remote server may be to the fact that the server is single threaded (they are queued / pending and time out). When using a multi threaded server, the icons load correctly.

ISSUE 35 - Audio API tests/audioWorkletProcessor.js

+class Processor extends AudioWorkletProcessor {
+    constructor() {
+      super();
+      this.port.onmessage = e => {
+        console.log("e data ", e.data)
+        if (e.data.type === 'recv-audio-queue') {
+          this.is_paused = e.data.is_paused;
+          this.head = e.data.head;
+          this.tail = e.data.tail;
+          this.can_write = e.data.can_write;
+          this.volume = e.data.volume;
+          this.is_muted = e.data.is_muted;
+          this.storage = e.data.storage;
+        } else {
+          throw 'unexpected.';
+        }
+      };
+    }
+     
+    process(inputs, outputs, parameters) {
+      const output = outputs[0];
+      const nbChannels = output.length;
+      const nbSamples = output[0].length;
+      if (this.head.buffer.byteLength == 0) {
+        throw new Error('wasmMemory grew');
+      }
+      var head = Atomics.load(this.head, 0) / 4;
+      var tail = Atomics.load(this.tail, 0) / 4;
+      var i = 0;
+      //var volume = Atomics.load(this.volume, 0) / 100;
+      if (Atomics.load(this.is_paused, 0) != 0 || Atomics.load(this.is_muted, 0) != 0) {
+        volume = 0;
+      }
+      while (tail != head && i < nbSamples)
+      {
+        for (let c = 0; c < nbChannels; c++) {
+          output[c][i] = this.storage[tail];
+          // output[c][i] = Math.random() * 2 - 1;
+          //output[c][i] = this.storage[tail] * volume;
+          tail++;
+          if (tail == this.storage.length) {
+            tail = 0;
+          }
+        }
+        i++;
+      }
+      Atomics.store(this.tail, 0, tail * 4);
+      //Atomics.store(this.can_write, 0, 1);
+      //Atomics.notify(this.can_write, 0);  
+      return true;
+    }
+    
+    
+    
+    // process (inputs, outputs, parameters) {
+    //   const output = outputs[0]
+
+    //   for (let i = 0; i < output[0].length; i++) {      
+    //     output[0][i] = Math.random() * 2 - 1;
+        
+    //     this.step++;
+    //   }
+    //   return true
+    // }
+  }
+
+//   class SineProcessor extends AudioWorkletProcessor {
+
+//       constructor()
+//       {
+//           super();
+//           this.step = 7500;
+//           console.log(Math.sin(2 * Math.PI * this.step));
+//           this.port.onmessage = e => {
+//             if (e.data.type === 'recv-audio-queue') {
+//               this.is_paused = e.data.is_paused;
+//               this.head = e.data.head;
+//               this.tail = e.data.tail;
+//               this.can_write = e.data.can_write;
+//               this.volume = e.data.volume;
+//               this.is_muted = e.data.is_muted;
+//               this.storage = e.data.storage;
+//             } else {
+//               throw 'unexpected.';
+//             }
+//           };
+//       }
+
+//       process (inputs, outputs, parameters) {
+//           const output = outputs[0]
+//           console.log("nbChannels:", output.length)
+
+//             console.log('NbSamble: ', output[0].length)
+
+//           for (let i = 0; i < output[0].length; i++) {      
+//             output[0][i] = Math.sin((2 * Math.PI * this.step * 440) / 44100);
+            
+//             this.step++;
+//             }
+
+//            output.forEach(channel => {
+//              for (let i = 0; i < channel.length; i++) {      
+//                channel[i] = Math.sin((2 * Math.PI * this.step * 440) / 44100);
+              
+//                this.step++;
+//              }
+//            })
+//           return true
+//       }
+//   }
+
+  registerProcessor('worklet-processor', Processor);
\ No newline at end of file