111 lines
3.2 KiB
Vue
111 lines
3.2 KiB
Vue
<!--
|
|
/**
|
|
* @component ControlValueBasedPlayer
|
|
* @description A component that renders multiple NoiseControlledBand components,
|
|
* each centered around a specific frequency. This can be used for
|
|
* audio spectrum visualization or control. Now includes a loading spinner
|
|
* that disappears when all NoiseControlledBand components are ready.
|
|
*
|
|
* @uses NoiseControlledBand
|
|
*
|
|
* @example
|
|
* <ControlValueBasedPlayer />
|
|
*
|
|
* @remarks
|
|
* - Utilizes Vue 3 Composition API
|
|
* - Renders NoiseControlledBand components for standard audio frequency bands
|
|
* - Frequencies: 63, 125, 250, 500, 1000, 2000, 4000, 8000, 16000 Hz
|
|
* - Includes a loading spinner that disappears when all components are ready
|
|
*/
|
|
-->
|
|
|
|
<template>
|
|
<div>
|
|
<h1> Test Fall 3 mit Control Value Patch</h1>
|
|
<h3> Drei AudioTags gesteuert über 3 RNBOControlValues. Über die Volume-APi wird die Lautstärke gesteuert</h3>
|
|
<div v-if="isExperimentsRoute">
|
|
<KeyboardPlayHandler />
|
|
<PlayButton />
|
|
|
|
<div v-if="loading" class="spinner-border spinner-border-sm" role="status">
|
|
<span class="sr-only">{{ t("Loading...") }}</span>
|
|
</div>
|
|
Loaded Bands: {{ loadedBands }}
|
|
<div>
|
|
<label>Attack: {{ (masterAttack / 480000).toFixed(2) }}s</label>
|
|
<input
|
|
v-model.number="masterAttack"
|
|
type="range"
|
|
:min="4800"
|
|
:max="1920000"
|
|
>
|
|
<label>Release: {{ (masterRelease / 480000).toFixed(2) }}s</label>
|
|
<input
|
|
v-model.number="masterRelease"
|
|
type="range"
|
|
:min="4800"
|
|
:max="1920000"
|
|
>
|
|
</div>
|
|
<NoiseControlled3Band
|
|
v-for="(frequency, index) in frequencies"
|
|
:key="frequency"
|
|
:master-attack="masterAttack"
|
|
:master-release="masterRelease"
|
|
:center-frequency="frequency"
|
|
:q-factor="qFactors[index]"
|
|
@ready="onBandReady"
|
|
@update:mid-volume="controlMusicGain"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, ref, computed } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { useRoute } from 'vue-router'
|
|
import KeyboardPlayHandler from '~/archive/components/KeyboardPlayHandler.vue'
|
|
import PlayButton from '~/components/experiments/statemanagement/PlayButton.vue'
|
|
import NoiseControlled3Band from '~/components/experiments/tests/ControlValues/NoiseControlled3Band.vue'
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
NoiseControlled3Band,
|
|
KeyboardPlayHandler,
|
|
PlayButton
|
|
},
|
|
setup () {
|
|
const { t } = useI18n()
|
|
const frequencies = ref([150, 1500, 8000])
|
|
const qFactors = ref([0.8, 0.9, 0.6])
|
|
const loadedBands = ref(0)
|
|
|
|
const route = useRoute()
|
|
const isExperimentsRoute = computed(() => route.path.match(/\/[a-z]{2}\/experiments/))
|
|
|
|
const masterAttack = ref(120000 * 2) // Beispielwert in Samples
|
|
const masterRelease = ref(144000 * 2)
|
|
|
|
const loading = computed(() => loadedBands.value < frequencies.value.length)
|
|
|
|
const onBandReady = () => {
|
|
loadedBands.value++
|
|
}
|
|
|
|
return {
|
|
frequencies,
|
|
loading,
|
|
onBandReady,
|
|
t,
|
|
loadedBands,
|
|
masterAttack,
|
|
masterRelease,
|
|
isExperimentsRoute,
|
|
qFactors,
|
|
controlMusicGain
|
|
}
|
|
}
|
|
})
|
|
</script>
|