I have a page with audio visualization done within a component. The component solely displays content, while the audio logic is handled by the parent component. To keep it brief, I am facing an issue where I need to pass the AnalyserNode to the child component for real-time frequency analysis using Three.js render-loop in the WorkletModule.
In my parent component, it looks something like this:
<template>
...
<WorkletModule
:analyser="analyser"
:key="componentKey"
/>
...
</template>
...
data() {
return {
componentKey: 0,
analyser: null,
};
methods: {
startRecording() {
this.componentKey++
..
this.analyser = audioContext.createAnalyser();
..
}
}
and my WorkletModule.vue code is as follows:
props: {
analyser: {
type: AnalyserNode
},
},
mounted() {
//initialize graphics, etc..
}
//I need to do something like this within the render loop:
this.analyser.getByteFrequencyData(soundData);
Although the above implementation works, each call to startRecording() causes the WorkletModule to remount, causing flickering and clearing the canvas. Removing ":key="componentKey" prevents updates, leaving the analyzer reference in the prop as null, which is not desired. Is there a way to pass the analyzer object without using a prop?
I require access to the analyzer value in each frame of the render-loop. While emitting an event from the WorkletModule’s render loop to trigger another event in the parent that sends updated values back to the child is a solution, it seems inelegant. Are there better alternatives?