Added loader and stuff

src/views/Home.vue

@@ -1,7 +1,9 @@
 <template>
   <b-container fluid style="height: 100vh">
-    <b-row v-if="errorCondition">
-      {{ errorCondition }}
+    <b-row v-if="errorText || soundsLoaded < totalSounds">
+      <b>{{ errorText }}</b>
+      <br>
+      Loaded {{ soundsLoaded }} of {{ totalSounds }} sound files...
     </b-row>
     <b-row v-else class="mb-2 h-100">
       <b-col v-for="(snd,id) in availableSounds" :key="id" class="my-2" :cols="columnWidth" align-v="stretch">
@@ -24,9 +26,15 @@ export default {
     return {
       nowPlaying: -1,
       availableSounds: [],
-      columnWidth: 6,
-      errorCondition: false,
-      bgSound: null
+      bgSound: null,
+      soundsLoaded: 0,
+      errorText: null,
+      columnWidth: 6
+    }
+  },
+  computed: {
+    totalSounds() {
+      return this.availableSounds.length + 1 // because bg
     }
   },
   methods: {
@@ -42,9 +50,9 @@ export default {
       } else {
         this.bgSound.pause() // the background sound must be paused
 
-        this.availableSounds.forEach((snd) => { // Stop all other effects
-          snd.howl.stop()
-        })
+        if (this.nowPlaying !== -1) {
+          this.availableSounds[this.nowPlaying].howl.stop()
+        }
 
         sample.play()
         this.nowPlaying = sampleId
@@ -57,7 +65,10 @@ export default {
       this.columnWidth = response.data['columnWidth'] || 6
       this.bgSound = new Howl({
         src: response.data['bg'],
-        loop: true
+        loop: true,
+        onload: () => this.soundsLoaded++,
+        preload: true,
+        onloaderror: (id, err) => this.errorText = id + err
       })
 
       response.data['availableSounds'].forEach((sndData) => {
@@ -69,12 +80,15 @@ export default {
             onend: () => {
               this.nowPlaying = -1
               this.bgSound.play() // Continue background sound
-            }
+            },
+            onload: () => this.soundsLoaded++,
+            preload: true,
+            onloaderror: (id, err) => this.errorText = `${id} ${err}`
           })
         })
       })
 
-    }).catch((err) => this.errorCondition = err)
+    }).catch((err) => this.errorText = err)
   }
 }
 </script>