64 lines
1.2 KiB
Vue
64 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>
|