line-and-surface/app/src/components/AudioArea.vue

<template>
  <audio ref="audio"
         :src="definition.src"
         loop preload="auto"/>
</template>

<script lang="ts">
import {defineComponent, PropType, ref, watch} from "vue";
import {BoundingBox} from "@/components/SVGContent.vue";

export default defineComponent({
  name: "AudioArea",
  props: {
    definition: {
      type: Object as PropType<AudioAreaDef>,
      required: true
    },
    bbox: {
      type: Object as PropType<BoundingBox>,
      required: true
    },
  },
  setup(props) {
    const audio = ref<HTMLAudioElement | null>(null);

    console.debug(`[AUDIOAREA] Initializing ${props.definition.src}...`);
    console.debug(props.definition);

    const MIN_SCALE = 0.02;
    const MIN_VOLUME_MULTIPLIER = 0.33;
    const vol_x = (1 - MIN_VOLUME_MULTIPLIER) / (1 - MIN_SCALE);
    const vol_b = 1 - vol_x;

    const onBBoxChange = () => {
      const x = props.bbox.x + props.bbox.w / 2;
      const y = props.bbox.y + props.bbox.h / 2;
      const distance = Math.sqrt(Math.pow(x - props.definition.cx, 2) + Math.pow(y - props.definition.cy, 2));

      if (distance < props.definition.radius) {
        if (audio.value!.paused) {
          console.debug(`[AUDIOAREA] Entered audio area "${props.definition.src}", starting playback...`);
          audio.value!.play();
        }
        const volume = (props.definition.radius - distance) / props.definition.radius;
        audio.value!.volume = volume * (props.bbox.z < 1 ? (props.bbox.z * vol_x + vol_b) : 1);
      } else {
        if (!audio.value!.paused) {
          console.debug(`[AUDIOAREA] Left audio area "${props.definition.src}", pausing playback...`);
          audio.value!.pause();
        }
      }
    };
    watch(props.bbox, onBBoxChange, {deep: true});

    return {
      audio
    };
  }
});

export interface AudioAreaDef {
  cx: number,
  cy: number,
  radius: number,
  src: string
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>