line-and-surface/app/src/components/AudioArea.vue
2021-01-10 21:55:40 +01:00

63 lines
1.2 KiB
Vue

<template>
<audio ref="audio"
:src="definition.src"
loop/>
</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>