[Bug] Repeated DOM queries inside sampler animation loop

[DhyaniKavya]

Description:-
The sampler tuner updates pitch and note information inside a requestAnimationFrame loop. Within this loop, the code repeatedly queries the DOM using:

-> document.getElementById("pitch")
-> document.getElementById("note")

Because the loop runs approximately 60 times per second, these global DOM queries execute continuously even though the elements are static and already created within the widget.
This introduces unnecessary performance overhead and bypasses widget-local references.

Expected Behavior:-
-DOM elements should be queried once and reused.
-Animation loops should avoid repeated DOM lookups.
-Widget updates should use locally cached element references.
-Performance should remain efficient on low-powered devices.

How to Reproduce:-
-Open Music Blocks in a browser.
-Open the Sampler widget.
-Activate the tuner and start pitch detection.
-Inspect the source code or performance profile.
-Observe repeated DOM queries inside the animation loop.

Console log Errors:
-None.
-This is a performance inefficiency rather than a runtime error.

Environment:
-Operating System: Windows / macOS / Linux
-Browser: Chrome / Firefox / Safari
-Version of Software/Project: Latest (master branch)

Impact:
-Medium
-Unnecessary CPU usage during animation updates
-Reduced performance and battery efficiency
-Suboptimal behavior on low-powered classroom devices
-Increased DOM workload during real-time updates

Suggested Fix:
-Cache pitch and note elements when the tuner UI is created.
-Pass element references to the pitch detection logic.
-Remove repeated document.getElementById calls from the animation loop.

Checklist

• I have read and followed the project's code of conduct.
• I have searched for similar issues before creating this one.
• I have provided all the necessary information to understand and reproduce the issue.
• I am willing to contribute to the resolution of this issue.

---

Thank you for contributing to our project! We appreciate your help in improving it.

📚 See contributing instructions.

🙋🏾🙋🏼 Questions: Community Matrix Server.