80 lines
2.0 KiB
Vue
80 lines
2.0 KiB
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 {
|
|
id: string;
|
|
cx: number;
|
|
cy: number;
|
|
radius: number;
|
|
src: string;
|
|
}
|
|
</script>
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
<style scoped>
|
|
</style>
|