Did the needful

src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/Home.vue

@@ -1,18 +1,89 @@
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
+  <b-container fluid style="height: 100vh">
+    <b-row v-if="errorCondition">
+      {{ errorCondition }}
+    </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">
+        <b-button @click="play(id)" squared size="lg" class="bigBoyButton"
+                  :variant="nowPlaying === id? 'success' : 'secondary'">
+          {{ snd.sampleName }}
+        </b-button>
+      </b-col>
+    </b-row>
+  </b-container>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
+import {Howl} from 'howler'
+import axios from 'axios'
 
 export default {
   name: 'Home',
-  components: {
-    HelloWorld
+  data() {
+    return {
+      nowPlaying: -1,
+      availableSounds: [],
+      columnWidth: 6,
+      errorCondition: false,
+      bgSound: null
+    }
+  },
+  methods: {
+    play(sampleId) {
+
+      const sample = this.availableSounds[sampleId].howl
+
+      if (sample.playing()) {
+        sample.stop()
+        this.nowPlaying = -1
+        this.bgSound.play() // Continue background sound
+
+      } else {
+        this.bgSound.pause() // the background sound must be paused
+
+        this.availableSounds.forEach((snd) => { // Stop all other effects
+          snd.howl.stop()
+        })
+
+        sample.play()
+        this.nowPlaying = sampleId
+      }
+
+    }
+  },
+  mounted() {
+    axios.get(process.env.VUE_APP_INDEX_URL).then((response) => {
+      this.columnWidth = response.data['columnWidth'] || 6
+      this.bgSound = new Howl({
+        src: response.data['bg'],
+        loop: true
+      })
+
+      response.data['availableSounds'].forEach((sndData) => {
+        this.availableSounds.push({
+          sampleName: sndData.sampleName,
+          howl: new Howl({
+            src: [sndData.url],
+            loop: false,
+            onend: () => {
+              this.nowPlaying = -1
+              this.bgSound.play() // Continue background sound
+            }
+          })
+        })
+      })
+
+    }).catch((err) => this.errorCondition = err)
   }
 }
 </script>
+
+<style scoped>
+
+.bigBoyButton {
+  width: 100%;
+  height: 100%;
+}
+
+</style>