Fix: Implement touch events in violent theremin demo #128
+54
−18
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR resolves issue #126 by enabling touch events in the Violent Theremin demo, making the example usable on mobile web browsers.
Changes Introduced in This PR:
1. Replaces
<p>
with<button>
for the start message:AudioContext
to be initialized via a user gesture, such as a button click. This migration avoids the following console warning:.start-message
button is styled to cover the full screen, closely mimicking the previous<p>
element while centering the text.2. Prevents duplicate
init()
invocations:init()
method is called only once by removing redundantkeydown
event listeners and triggeringinit()
exclusively on the.start-message
button click.window.addEventListener("keydown", init);
did not impact the functionality sinceinit()
already configures keyboard controls.3. Prevents scrolling on
touchmove
events:updatePage()
method as a callback fortouchmove
events within theinit()
method.4. Applies global styling changes to avoid unintended interactions on mobile devices:
user-select
property.overscroll-behavior
property.This PR allows the example to function on both desktop and mobile web browsers, providing a consistent and smooth experience across devices.