<template>
  <div>
    <AudioFileSelector @file-selected="updateSrc" />
    <AudioTagWebAudio :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 AudioTagWebAudio from '~/components/experiments/AudioTagWebAudio.vue'
import tracksConfig from '~/tracks.config'
import AudioFileSelector from '~/components/AudioFileSelector.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>
