Webaudio: record audio after loud syncing sound

Question

I am building a web app which records audio from the microphone directly after its hears a loud syncing noise (like a clap). I am looking for a solution that will work for chrome on desktop and android.

I have tried the following approaches

1. use a scriptprocessor node which listens to the microphone and detects a loud node and saves the raw data directly after.

This approach does work. But the audio recorded is rubbish and glitchy due to the node running in the main thread and dropping frames.

2. Use an audioWorklet to put the audio processing in a different thread and send the recorded data back to the main thread using the port.

This approach works much better. It works on chrome desktop. But the recorded audio sounds rubbish on android. I raised a issue on chrome see the ticket here

Does anyone have any other approaches they would suggest? Perhaps by using a MediaRecorder somehow? However with this we don't have access to the raw audio so can't tell if the loud syncing sound has been played, unless there is some clever way.

Please note I am not interested in a approach which syncs postrecording.

Update

Using a script proccessor node to listen for the loud clap and trigger the MediaRecorder to start is a great solution!

Answer 1

@AKX suggestion of having a scriptprocessnode listen for the loud sound then trigger the MediaRecorder seems to be the best so far. The trick is to have the buffersize for the scriptprocessor node set as low as possible!