mindboost-rnbo-test-project/pages/experiments/Player/test4.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>
    <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>