Search code examples
javascripthtmlspeech-to-textmobile-websitemicrophone

Capturing Microphone Audio On Finger Press Until Finger Is Removed In Mobile Web Browser


I am working on a project in which I need the user to be able to hold down the screen in a web browser (Ideally works on Desktop but mainly mobile), record the user speaking while the finger is pressed and when the finger is lifted send this audio data to be converted to text using a speech-to-text service.

I can easily track when a finger is pressed and lifted on the screen, the thing I am having issues with is finding a way to stop and start recording easily and it appears Safari on IOS isn't supported by a lot of microphone libraries. The ones I have tried use a built in GUI and I haven't been able to figure out how to remove that GUI and just use the data.

Does anyone have any recommendations or know of any resources for how I can accomplish this? Thanks


Solution

  • You can use touchstart and touchend events for that. https://developer.mozilla.org/en-US/docs/Web/API/Touch_events