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

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

<script lang="ts">
import {defineComponent, ref, watch} from "vue";

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

    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) {
        audio.value!.play();
        audio.value!.volume = (props.definition.radius - distance) / props.definition.radius;
      } else {
        audio.value!.pause();
      }
    };
    watch(props.bbox, onBBoxChange, {deep: true});

    return {
      audio
    };
  }
});

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

export interface BoundingBox {
  x: number,
  y: number,
  w: number,
  h: number
}

</script>

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