Initial commit

pages/experiments/Player/test4.vue

@@ -0,0 +1,180 @@
+<!--
+/**
+ * @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>
+    <div v-if="isExperimentsRoute">
+      <h1> Test Fall 4 mit Control Value Patch</h1>
+      <h3> Drei WebAudioTag gesteuert über 3 RNBOControlValues. Über die WebAudio-APi wird die Lautstärke gesteuert</h3>
+      <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>
+    </div>
+    <NoiseControlled3BandWebAudio
+      v-for="(frequency, index) in frequencies"
+      v-show="false"
+      :key="frequency"
+      :master-attack="masterAttack"
+      :master-release="masterRelease"
+      :center-frequency="frequency"
+      :master-gain="masterGain"
+      :q-factor="qFactors[index]"
+      @ready="onBandReady"
+      @update:mid-volume="controlMusicGain"
+    />
+    <div class="slider-wrapper">
+      <img
+        v-if="muted"
+        style="width: 25px; height: 25px;"
+        src="~/assets/image/sound_muted.svg"
+        title="Click to unmute"
+        @click="toggleMute()"
+      >
+      <img
+        v-else
+        style="width: 25px; height: 25px;"
+        src="~/assets/image/sound.svg"
+        title="Click to mute"
+        @click="toggleMute()"
+      >
+      <div class="slider">
+        <input
+          id="gain-control"
+          v-model="masterGain.gain.value"
+          type="range"
+          min="0"
+          max="1"
+          step="0.02"
+          data-toggle="tooltip"
+          data-placement="top"
+          title="Change the volume by click, scroll or touch"
+          @wheel.prevent="changeVolumeOnWheel"
+        >
+        <span
+          class="slider-progress-bar"
+          :style="{ width: `${masterGain.gain.value * 100}%` }"
+        />
+      </div>
+    </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 NoiseControlled3BandWebAudio from '~/components/experiments/tests/ControlValues/NoiseControlledWebAudio3Band.vue'
+import { useAudioStore } from '~/stores/audio'
+
+export default defineComponent({
+  components: {
+    NoiseControlled3BandWebAudio,
+    KeyboardPlayHandler,
+    PlayButton
+  },
+  setup () {
+    const masterGain = ref(useAudioStore().getMasterGainNoise())
+    const { t } = useI18n()
+    const frequencies = ref([150, 1500, 8000])
+    const qFactors = ref([0.8, 0.9, 0.6])
+    const loadedBands = ref(0)
+    const muted = computed(() => useAudioStore().getMasterGainNoise().gain.value === 0)
+    let oldVolume = 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++
+    }
+    const toggleMute = () => {
+      if (!muted.value) {
+        oldVolume = masterGain.value.gain.value
+        masterGain.value.gain.linearRampToValueAtTime(0, masterGain.value.context.currentTime + 0.4)
+      } else if (oldVolume > 0) {
+        masterGain.value.gain.linearRampToValueAtTime(oldVolume, masterGain.value.context.currentTime + 0.4)
+      } else {
+        masterGain.value.gain.linearRampToValueAtTime(1, masterGain.value.context.currentTime + 0.4)
+      }
+    }
+
+    const controlMusicGain = (value: string) => {
+
+    }
+    const changeVolumeOnWheel = (event:WheelEvent) => {
+      let gainValue = masterGain.value.gain.value
+      // Adjust volume on wheel scroll
+      const deltaY = event.deltaY
+      if (deltaY < 0) {
+        const volumeAdd = (Math.min(1, gainValue + 0.02))
+        gainValue = volumeAdd
+      } else {
+        const volumeCut = (Math.max(0, gainValue - 0.02))
+        gainValue = volumeCut
+      }
+    }
+
+    return {
+      frequencies,
+      loading,
+      onBandReady,
+      t,
+      loadedBands,
+      masterAttack,
+      masterRelease,
+      isExperimentsRoute,
+      qFactors,
+      controlMusicGain,
+      masterGain,
+      changeVolumeOnWheel,
+      toggleMute,
+      muted
+    }
+  }
+})
+</script>