Initial commit

pages/experiments/AudioTagWebAudioStreaming.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <AudioFileSelector @file-selected="updateSrc" />
+    <AudioTagWebAudioStreaming :src="audioSrc" :volume="volume" />
+    <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 AudioFileSelector from '~/components/AudioFileSelector.vue'
+import AudioTagWebAudioStreaming from '~/components/experiments/AudioTagWebAudioStreaming.vue'
+
+const audioSrc = ref('')
+const volume = ref(0)
+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>