"YouTube Waveform" is a YouTube plugin which implements a floating window. The floating window shows the real-time Waveform of the video's audio. The waveform is drawn using the
Canvas API and the waveform data is got from the
How it gets the Waveform?
WebAudio API gets the sample data from the video's audio then streams it through
AnalyserNode has a method called
getFloatTimeDomainData which analyses the waveform data. The time-domain data ranges is in between
And, the whole bitstream stuff it handles internally.
The visualisation of this workflow:
MediaElementAudioSource -> AnalyserNode -> AudioContext