45 lines
1.2 KiB
Vue
45 lines
1.2 KiB
Vue
<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>
|