Improve Recording Quality

[tedsecretsource]

As of this writing, the bitrate is set to 1441Kbps, which is, apparently, uncompressed CD quality. For non-Safari browsers, we're using the Opus codec, which is the newer version of Vorbis, but I wonder if and how recording quality could be improved. Ideally we have some way to physically test this. When recording waves this week, the level was quite low so you could easily hear the compression. I'd like to have a sound source that I can quickly and easily test sitting at my desk and that causes the listener to hear the compression.

This task consists of:

1. Research codecs and recording quality settings that may be available starting with the links below
2. Write a plan to improve the quality of recordings starting with the most impactful changes
3. Create separate tasks for each improvement based on the plan

Links for research

• https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs
• https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_concepts
• https://developer.mozilla.org/en-US/docs/Web/Media/Formats/codecs_parameter
• https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers#mpeg
• https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers#webm
• https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/isTypeSupported
• https://stackoverflow.com/questions/41739837/all-mime-types-supported-by-mediarecorder-in-firefox-and-chrome
• https://caniuse.com/?search=audio%20format

Particularly useful for working with Gain, echo cancellation and noise cancellation

• https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings
• https://stackoverflow.com/questions/20548629/how-can-i-use-opus-codec-from-javascript

Alternate packages

• https://github.com/0x006F/react-media-recorder
• https://github.com/chrisguttandin/extendable-media-recorder (the above package is based on this one)
• https://github.com/chris-rudmin/opus-recorder (not really an alternative but an interesting way to record high quality audio)
• https://github.com/MartinBarker/opus-recorder?organization=MartinBarker&organization=MartinBarker (same as above)

Findings

The MDN documentation is a bit misleading with regards to support for containers and codecs. Specifically, it suggests that webm is widely supported, as is mpeg. However, the audio types are not nearly as widely supported as the video types. Specifically, Safari only supports audio/mp4 while Chrome and Firefox only support audio/webm. Furthermore, I've been unable to find any information on specifying the codec for audio on Safari.

Neither browser natively supports lossless codecs of any kind with MediaRecorder.

Using the Web Audio API might be the solution. It's unclear when the compression is applied: before the Web Audio API stuff or after? If it is after, maybe we can reroute the destination to a file without compression.