Initial commit

2025-07-01 10:53:26 +00:00
commit 38050e5c69
416 changed files with 48708 additions and 0 deletions
--- a/pages/experiments/Player/test3.vue
+++ b/pages/experiments/Player/test3.vue
@@ -0,0 +1,110 @@
+<!--
+/**
+ * @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>