2

I am trying to trim leading and trailing silence from an audio file recorded in browser before I send it off to be stored by the server.

I have been looking for examples to better understand the WebAudioApi but examples are scattered and cover depricated methods like the "ScriptProcessorNode" I thought I was close when I found this example

HTML Audio recording until silence?

which I was eager to see at least silence being processed, which I think I can use to subsequently trim. However after loading the example in a sandbox it does not appear to detect silence in a way that I can understand.

If anyone has any help or advice it would be greatly appreciated!

rrk
  • 15,677
  • 4
  • 29
  • 45
WorkingOnBeingBetter
  • 161
  • 1
  • 10

1 Answers1

1

While ScriptProcessorNode is deprecated, it's not going away any time soon. You should use AudioWorkletNode if you can (but not all browsers support that).

But since you have the recorded audio in a file, I would decode it using decodeAudioData to get an AudioBuffer. Then use getChannelData(n) to get a Float32Array for the n'th channel. Analyze this array however you want to determine where the silence at the beginning ends and the silence at the end begins. Do this for each n.

Now you know where the non-silent part is. WebAudio has no way of encoding this audio, so you'll either have to do your own encoding, or maybe get MediaRecorder to encode this so you can send it off to your server.

Raymond Toy
  • 5,490
  • 10
  • 13
  • Thank you so much for your help Raymond, I am getting very close to a finished solution, I will add it here so that anyone who has this problem can have an easy way out. I would mark your answer correct however I plan to post the answer with code specifics. – WorkingOnBeingBetter Sep 23 '20 at 20:00
  • That would be awesome. If you run into issues, please follow up and I'll help if I can. Good luck! – Raymond Toy Sep 23 '20 at 21:07
  • Hi Raymond, I am jammed on being able to convert(encode) the edited data back to usable audio. Do you have any reference material on what is being done to get to the data we see at getChannelAudio. Or how to use MediaRecorder to do this? – WorkingOnBeingBetter Sep 25 '20 at 18:46
  • @WorkingOnBeingBetter did you reach a complete solution for this? – Gav Jan 10 '21 at 23:03
  • Sorry for the delay; I missed the comment. I don't use MediaRecorder, but perhaps this example will help: https://developers.google.com/web/updates/2016/01/mediarecorder – Raymond Toy Jan 11 '21 at 16:34