add background music

README.md

@@ -16,7 +16,8 @@ You can find all source files in [/nuxt](/nuxt)
 
 ![](nuxt.png)
 
-Synthwave design based on https://codepen.io/inegoita/pen/BgdXMw?editors=1000
+- Synthwave design based on [inegoita Codepen](https://codepen.io/inegoita/pen/BgdXMw?editors=1000)
+- Background Music by [Three Chain Links - Die Historic](https://soundcloud.com/beardmont)
 
 ### Build Setup
 ```bash

nuxt/assets/global.css

@@ -231,6 +231,34 @@
   }
 }
 
+.ui-control{
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  white-space: nowrap;
+}
+.ui-control button{
+  border: 3px solid #a684cb;
+  background-color: #b533b3;
+  color: black;
+  border-radius: 10px;
+  padding: 5px;
+  animation: background-flicker 6s ease-in-out infinite;
+}
+.ui-control span{
+  font-size: 20px;
+}
+@media screen and (max-width: 600px) {
+.ui-control button{
+  border: 0px solid #fff;
+  background-color: #dd3dda;
+  color: black;
+  border-radius: 10px;
+  padding: 5px;
+}
+}
+
+
 .titleview {
   position: absolute;
   left: 50%;

nuxt/layouts/default.vue

@@ -209,6 +209,18 @@
       <div class="road-off"></div>
     </div>
     <div class="overlay"></div>
+
+    <div class="ui-control">
+      <button @click="toggleSound">
+        <span v-if="isSoundEnabled" class="material-icons"> volume_up </span>
+        <span v-else class="material-icons"> volume_off</span>
+      </button>
+      <button @click="playSound">
+        <span v-if="!isSoundPlaying" class="material-icons"> play_arrow</span>
+        <span v-else class="material-icons"> pause </span>
+      </button>
+    </div>
+
     <Nuxt />
 
     <svg width="0" height="0">
@@ -270,5 +282,45 @@
 </template>
 
 <script>
-export default {};
+import zap from "@/assets/sounds/Three Chain Links - Die Historic.mp3";
+
+export default {
+  data() {
+    return {
+      audio: null,
+      isSoundPlaying: false,
+    };
+  },
+  mounted() {
+    this.$store.commit("initializeSound");
+        this.audio = new Audio(zap);
+  },
+  methods: {
+    toggleSound() {
+      this.$store.commit("toggleSound");
+      if(this.isSoundEnabled){
+        this.isSoundPlaying = true;
+        this.audio.play();
+      } else {
+        this.isSoundPlaying = false;
+        this.audio.pause();
+      }
+    },
+    playSound() {
+      if (this.isSoundEnabled && !this.isSoundPlaying) {
+        this.isSoundPlaying = true;
+        this.audio.loop = true;
+        this.audio.play();
+      } else if (this.isSoundEnabled && this.isSoundPlaying) {
+        this.isSoundPlaying = false;
+        this.audio.pause();
+      }
+    },
+  },
+  computed: {
+    isSoundEnabled() {
+      return this.$store.state.isSoundEnabled;
+    },
+  },
+};
 </script>

nuxt/nuxt.config.js

@@ -52,6 +52,16 @@ export default {
   },
 
   // Build Configuration: https://go.nuxtjs.dev/config-build
-  build: {},
+  build: {
+    extend(config, ctx) {
+      config.module.rules.push({
+        test: /\.(ogg|mp3|wav|mpe?g)$/i,
+        loader: 'file-loader',
+        options: {
+          name: '[path][name].[ext]'
+        }
+      })
+    },
+  },
 
 }

nuxt/store/index.js

@@ -0,0 +1,23 @@
+export const state = () => ({
+    isSoundEnabled: true,
+})
+
+export const mutations = {
+    toggleSound(state) {
+        state.isSoundEnabled = !state.isSoundEnabled;
+        localStorage.setItem('isSoundEnabled', state.isSoundEnabled);
+    },
+    initializeSound(state) {
+        const isSoundEnabled = JSON.parse(localStorage.getItem('isSoundEnabled'));
+        if (!isSoundEnabled) {
+            state.isSoundEnabled = false;
+            localStorage.setItem("isSoundEnabled", false);
+        } else if (isSoundEnabled) {
+            state.isSoundEnabled = true;
+            localStorage.setItem("isSoundEnabled", true);
+        } else {
+            state.isSoundEnabled = true;
+            localStorage.setItem("isSoundEnabled", true);
+        }
+    },
+}