-
Notifications
You must be signed in to change notification settings - Fork 433
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix: Implement touch events in violent theremin demo #128
base: main
Are you sure you want to change the base?
Fix: Implement touch events in violent theremin demo #128
Conversation
35612a0
to
8ab3dc3
Compare
Another point worth considering is that tests in various emulated mobile browsers using iOS Simulator and Android Studio produced sound on many versions of mobile devices. However, on the iPhone Xs (2018) running iOS 17.2 in Safari, there was no sound output. This suggests that The solution committed works well with newer systems, but it might be worth considering a few options: noting these potential discrepancies in the |
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.