Initial commit

pages/experiments/AudioTag.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <AudioFileSelector @file-selected="updateSrc" />
+    <KeyboardPlayHandler />
+    <AudioTag :src="audioSrc" :volume="volume" :play="playing" />
+    <input
+      id="gain-control"
+      v-model="volume"
+      type="range"
+      min="0"
+      max="1.0"
+      step="0.01"
+      @wheel="changeNoiseGain"
+    >
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import AudioTag from '~/components/experiments/AudioTag.vue'
+import tracksConfig from '~/tracks.config'
+import AudioFileSelector from '~/components/AudioFileSelector.vue'
+import { useAudioStore } from '~/stores/audio'
+import KeyboardPlayHandler from '~/archive/components/KeyboardPlayHandler.vue'
+
+const audioSrc = ref('')
+const volume = ref(0)
+const playing = computed(() => useAudioStore().playing)
+const updateSrc = (e) => {
+  useNuxtApp().$logger.log('file Selected update', { e })
+  // Update the audioSrc with the selected file
+  audioSrc.value = e
+}
+const changeNoiseGain = (event) => {
+  event.preventDefault()
+  const volumepercents = volume.value * 100
+  // Determine the direction of the scroll
+  const delta = Math.sign(event.deltaY)
+  if (volumepercents - delta < 101 && volumepercents - delta > -1) {
+    volume.value -= delta / 100
+  }
+}
+
+</script>