Added sound on hover/focus

env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+declare module '@vueuse/sound'

package-lock.json

@@ -13,6 +13,7 @@
         "@fortawesome/free-solid-svg-icons": "^6.4.0",
         "@fortawesome/vue-fontawesome": "^3.0.3",
         "@vueuse/core": "^10.1.2",
+        "@vueuse/sound": "^2.0.1",
         "pinia": "^2.0.35",
         "sass": "^1.62.1",
         "vue": "^3.2.47",
@@ -1571,6 +1572,49 @@
         }
       }
     },
+    "node_modules/@vueuse/sound": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/sound/-/sound-2.0.1.tgz",
+      "integrity": "sha512-7Fbp9lQkuUnpTXS9vPbvT2FDYHuwJbvKPivOYETaVVSmcZKoczw6zcsebsARkH5Ged0f045YUOZnV/RuCzyLXQ==",
+      "dependencies": {
+        "howler": "^2.2.3",
+        "vue-demi": "latest"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^2.0.0 || >=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/sound/node_modules/vue-demi": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.0.tgz",
+      "integrity": "sha512-gt58r2ogsNQeVoQ3EhoUAvUsH9xviydl0dWJj7dabBC/2L4uBId7ujtCwDRD0JhkGsV1i0CtfLAeyYKBht9oWg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -3881,6 +3925,11 @@
       "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
       "dev": true
     },
+    "node_modules/howler": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/howler/-/howler-2.2.3.tgz",
+      "integrity": "sha512-QM0FFkw0LRX1PR8pNzJVAY25JhIWvbKMBFM4gqk+QdV+kPXOhleWGCB6AiAF/goGjIHK2e/nIElplvjQwhr0jg=="
+    },
     "node_modules/html-encoding-sniffer": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",

package.json

@@ -20,6 +20,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/vue-fontawesome": "^3.0.3",
     "@vueuse/core": "^10.1.2",
+    "@vueuse/sound": "^2.0.1",
     "pinia": "^2.0.35",
     "sass": "^1.62.1",
     "vue": "^3.2.47",

src/components/YrhButton.vue

@@ -1,6 +1,11 @@
 <script lang="ts" setup>
+import { useSound } from '@vueuse/sound'
 import { computed } from 'vue'
 
+import buttonSfx from '@/assets/sounds/btn-hover.mp3'
+
+const { play, stop } = useSound(buttonSfx)
+
 const props = defineProps<{
   href?: string
   target?: string
@@ -26,6 +31,9 @@ const elementTag = computed(() => (props.href ? 'a' : 'button'))
     v-bind="attributes"
     class="btn w-full p-1 px-2 text-left bg-y-beige-500 hover:shadow-md focus-visible:shadow-md"
     :class="{ active: isActive }"
+    @focus="play"
+    @mouseover="play"
+    @mouseleave="stop"
   >
     <span class="mr-1" v-if="hasSquare">
       <font-awesome-icon :icon="['fas', 'square']" />