40 lines
1.0 KiB
Vue
40 lines
1.0 KiB
Vue
<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>
|