mdn/webaudio-examples

Add support for touch events to violent theremin demo

Open

#126 opened on Jan 18, 2021

View on GitHub
 (6 comments) (1 reaction) (0 assignees)HTML (1,114 stars) (419 forks)batch import
accepting PRhelp wanted

Description

@normanr commented on Wed Dec 02 2020

It would be nice to be able to use the demo in a touch environment (eg: phone or tablet). (Not required: sound could be continuous after a 'start/down' event until an 'end/up' event is received)

@chrisdavidmills commented on Wed Dec 02 2020

I agree that this would be nice.

For reference:

@normanr commented on Wed Dec 02 2020

(side-note: the event listeners for triggering init should be removed in init, otherwise using the keyboard causes init to be triggered multi times, and DOMExceptions when trying to remove the startMessage that has already been removed).

Contributor guide

Tech stack
javascripthtmlcss
Domain
frontendaccessibility
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic JavaScript event handlingTouch events API
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Start by examining the violent theremin demo code in the repository. The main files are likely in the `violent theremin` folder. Identify the current mouse event handlers (e.g., mousedown, mousemove, mouseup) and add equivalent touch event handlers (touchstart, touchmove, touchend). Also address the side note in the issue about removing event listeners after init to prevent duplicate calls. Test on mobile devices or using browser dev tools to simulate touch.