javascript - Cordova - button for Hold to record audio - sometimes stops -

let me explain thoroughly. building chat app using cordova, , want sound recording function in messenger, hold button, changes appearance, after time release button, , sound file sent server. tried it, works, stops unexpectedly, or button's appearance changes unclicked, when move finger 1 pixel.

• frameworks using: onsen ui , jquery

now here html of button

<ons-button id="btnrecordsound" modifier="large" disable-auto-styling>hold record</ons-button> 

and here javascript

let soundrecord = ''; let isrecording = false;  function setrecordsoundbutton() {     $('#btnrecordsound').on('touchstart touchend', (event) => {         if (event.type == 'touchstart') {             startsoundrecording();         } else if (event.type == 'touchend') {             stopsoundrecording();         }     }); }  function startsoundrecording() {     soundrecord = new media(/*some file path here*/, () => {         // success function     });     soundrecord.startrecord();     isrecording = true;     settimeout(favochat.stopsoundrecording, 30000); }  function stopsoundrecording() {     if (isrecording) {         isrecording = false;         soundrecord.stoprecord();     } } 

as can see, rely on touchstart , touchend events determine when start , stop it, , there forced settimeout function stops recording @ given time limit.

is best way visualize button? need not change appearance when moved 1 pixel away touch point. if anything, set max interval, when move outside of it, stop it. and, start , stop functions ok? need stop function exact.

i'd imagine reason stops unexpectedly due fact you're not clearing timeout after setting it.

if start recording 20-second audio clip, stop recording , instantly start recording again there still timeout 10 seconds left on because it's not been cleared , run after 10 seconds.

if change code this:

let soundrecord = ''; let isrecording = false; let soundtimeout = null;  function setrecordsoundbutton() {     $('#btnrecordsound').on('touchstart touchend', (event) => {         if (event.type == 'touchstart') {             startsoundrecording();         } else if (event.type == 'touchend') {             stopsoundrecording();         }     }); }  function startsoundrecording() {     soundrecord = new media( /*some file path here*/ , () => {         // success function     });     soundrecord.startrecord();     isrecording = true;     soundtimeout = settimeout(favochat.stopsoundrecording, 30000); }  function stopsoundrecording() {     if (isrecording) {         cleartimeout(soundtimeout);         isrecording = false;         soundrecord.stoprecord();     } } 

it should fix issue.