Skip to content
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

Open
wants to merge 5 commits into
base: main
Choose a base branch
from

Conversation

mattfsourcecode
Copy link
Contributor

@mattfsourcecode mattfsourcecode commented Oct 16, 2024

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:

  • Mobile web browsers enforce stricter protocols for requiring an AudioContext to be initialized via a user gesture, such as a button click. This migration avoids the following console warning:
    Screenshot 2024-10-15 at 5 38 27 PM
  • The .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:

  • Ensures the init() method is called only once by removing redundant keydown event listeners and triggering init() exclusively on the .start-message button click.
  • NOTE: Removing window.addEventListener("keydown", init); did not impact the functionality since init() already configures keyboard controls.
  • This change aligns with feedback from @normanr in Add support for touch events to violent theremin demo sprints#3937 (comment).

3. Prevents scrolling on touchmove events:

  • Disables scrolling caused by touch gestures to maintain functionality on touch screens.
  • Registers the updatePage() method as a callback for touchmove events within the init() method.

4. Applies global styling changes to avoid unintended interactions on mobile devices:

  • Prevents element selection using the user-select property.
  • Prevents pull-to-refresh effect using the 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.

@mattfsourcecode mattfsourcecode marked this pull request as ready for review October 21, 2024 08:33
violent-theremin/index.html Outdated Show resolved Hide resolved
@mattfsourcecode mattfsourcecode force-pushed the implement-touch-events-in-violent-theremin-demo branch from 35612a0 to 8ab3dc3 Compare October 22, 2024 15:22
@mattfsourcecode
Copy link
Contributor Author

mattfsourcecode commented Oct 22, 2024

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 AudioContext may be unreliable on older mobile devices, and none of the workarounds I tried were able to resolve the issue. This could be due to several factors, such as the device, OS, browsers and versions, or potentially an issue with the Simulator app.

The solution committed works well with newer systems, but it might be worth considering a few options: noting these potential discrepancies in the README, testing other demos to find a possible workaround for 2018 systems, or leaving it as is. Either way, it could be useful to create a new issue in this repo to track this problem. I'd be willing to help by either investigating a solution for AudioContext on older mobile devices or documenting it as a known issue in the README.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add support for touch events to violent theremin demo
2 participants