katspaugh/wavesurfer.js

A different spectrogram plugin

danijel3 opened this issue · 1 comments

I've tried using the provided spectrogram plugin, but found it a bit lacking. Maybe I could spend more time fine-tuning it and fixing some bugs, but I found a different solution.

The EMU project has a beautiful spectrogram that is very similar to what "pros" use for doing phonetics in programs like Praat (the de-fact standard for research in phonetics). It also provides a slightly different philosophy to drawing the spectrogram. Instead of hogging the main thread for processing large files, it draws the spectrogram only for the visible chunk of audio and does so using a background worker instead of the main thread.

You can view it by visiting https://ips-lmu.github.io/EMU-webApp/ and choosing a demo from the button on the top of the interface. Scrolling through the audio is done using 'w','a','s','d' on the keyboard. You can find other neat keyboard and UI tricks in the documentation accessible by clicking the emu logo on the top left of the screen.

I really dig EMU and think it is (was) a great project. The only problem (why I can't use it myself) is it's an Angular app and not a simple component I can embed everywhere.

I managed to adapt their spectrogram worker to wavesurfer in this fork: https://github.com/danijel3/wavesurfer.js

I don't claim coming up with this method and it was fully adapted from the original project (https://github.com/IPS-LMU/EMU-webApp). The worker is a 1-to-1 copy from their repo. I just made the plugin that adapts the worker and documented as much as I could.

Screenshot from 2024-10-19 14-57-00

What do you suggest I do with this? Can we add it to wavesurfer or is there something else we need to do?

Great idea! That repo seems to have a MIT license so I guess it’s fine to just copy that worker code and add a comment on top crediting them.