Add support for touch events to violent theremin demo · mdn/webaudio-examples#126

(6 评论) (1 反应) (0 负责人)HTML (1,114 star) (419 fork)batch import

accepting PRhelp wanted

描述

@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:

Demo repo: https://github.com/mdn/webaudio-examples/tree/main/violent-theremin
Live demo: https://mdn.github.io/webaudio-examples/violent-theremin/

@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).

贡献者指南

技术栈: javascripthtmlcss
领域: frontendaccessibility
议题类型: feature
难度: 3
预计时间: 1-3 hours
活动状态: stale
清晰度: clear
前置要求: Basic JavaScript event handlingTouch events API
新手友好度: 70
研究方向: 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.