Category: Web Audio

I hate squashed and over-compressed music. It leads to ear-fatigue quickly, is often distorted and sounds dull and low-fi compared to dynamic music. And although the Loudness War apparently is over, there’s still the need for proper loudness metering, so that people don’t fall into the trap of making their music too loud and destroy the liveliness of their precious recordings.

A few years ago, the European Broadcasting Union (EBU) has released a recommendation on how to measure loudness and how to distribute audio material with the right loudness. After that, some metering plugins for DAWs popped up but I haven’t seen anything like that for the web.

That’s why I created something called LoudEv, an open-source online loudness evaluator, which is compliant to EBU R128.

LoudEv uses the Web Audio API, Web Workers and the great wavesurfer.js by katspaugh to do its thing: Analyzing an audio file (on the client-side, no server upload necessary) and then creating a two-dimensional loudness map of the song as well as a dynamics map. The loudness map shows the song’s short-term loudness over time. The dynamics map shows the peak to short-term loudness and indicates if and what sections of a song are too loud. If it gets red-ish, the dynamic range is at or below 8 LU. If it’s black, you can hardly call that music anymore. If most sections of your song are green-ish, you’re on the safe side. This color scheme derives from the recommendations of mastering engineer Ian Shepherd. According to him, your masters should never become louder than 10 LUFS to prevent a potention loss of punch, impact and space in your mix. You should listen to him, he knows what he says and his masters sound great.

The technical side

To obtain the subjective loudness of a piece, the EBU reccomendation demands of R128-compliant meters to apply some filters (a lowpass and a shelving filter) to the signal. These filters are described in the ITU loudness standard document. But unfortunately, the document does not provide frequency, Q or gain values for these filters. Instead it gives us filter coefficients for a biquad filter that only works with audio of a sampling rate of 48 kHz.

So all incoming audio had to be resampled to 48 kHz, because I wanted to use these filter coefficients. But how to do resampling in JavaScript? I googled a lot about this topic until I came across a test for Google Chrome, where an OfflineAudioContext is used, that is set to the target sampling rate. An AudioBuffer with the source is applied to a SourceNode within this context and played. Then the OfflineAudioContext is rendered, which gives as a new AudioBuffer with the target sampling rate. It seems to me that there is no other convenient way to resample audio with the Web Audio API.

Having obtained a 48 kHz version of my audio, I decided to implement the biquad filter function myself, after learning that, as of today, the creation of custom IIR filters with the Web Audio API hasn’t been implemented in Chrome yet.

Due to my initial lack of knowledge in implementing biquad filters myself, I had a tough time of it with the biquad filter equation, but then the great Audio EQ cookbook by Robert Bristow-Johnson came to the rescue and showed my code that I could use:

 y[n] = (b0/a0)*x[n] + (b1/a0)*x[n-1] + (b2/a0)*x[n-2]
                        - (a1/a0)*y[n-1] - (a2/a0)*y[n-2]

So finally, I had my R128-compliant values for the short-term loudness.

Measuring True Peak

After that, I tried to implement a true-peak meter which considers inter-sample peaks. The recommendation suggests the following way to do this: Resample (upsample/zero-stuff + interpolate) the signal to 192 kHz and then seek for the sample with the absolute maximum (see Annex 2 of the ITU document).

I was like “Yippieh, I know how to resample in JavaScript, I can do this!”, just to learn, that Chrome did not resample the waveform to 192 kHz the way I wanted. Using a very loud song with digital clipping (Sowing Season by Brand New), that means a waveform with a sample maximum of exactly 1, gave me another flat clipped waveform were as flat and clipped as before the resampling, even when reducing the gain of song by 0.5 before resampling. I’m not a DSP expert, but this looks to me like Chrome does not resample by zero-stuffing and then low-passing the signal, but by copying the samples. So no true-peak yet.

Even if it would work, I had to learn that by creating an OfflineAudioContext and an AudioBuffer of 192kHz often results in a crash.

Chrome allows for a memory limit of about 200 MB per web page. This limit is reached very quickly when you deal with 192kHz audio.

Next, I will try the filter suggested by the ITU document. It provides filter coefficients for a FIR interpolation of an upsampled (zero-stuffed) signal. Russel McClellan at iZotope has written an insightful assessment of this filter.

That is the end of the first chapter of bringing R128 onto the web. There’s a lot going on with the Web Audio spec at the moment so I expect to be able to do things soon that I cannot do now.

Let me know, if you know things that I don’t know or if you wish to contribute. The source code of LoudEv is on GitHub.

Try it out here and let me know what you think:

https://webaudiotech.com/sites/loudev

Please be aware, that it only works with mono/stereo files and audio file types that are supported by your browser. Both Chrome and Firefox accept MP3, for example.

Happy Metering!