Visualisation of audio as a waveform

[markusweigelt]

This PR adds a waveform to an audio element in the media view and includes tools for navigating within the waveform e.g. zoom, checkbox for centered cursor or forward and backward jumping.

The waveform in its default state without zoom.

This is what it looks like when something has been zoomed into the waveform.

In the project settings, the waveform must be enabled for this. This setting is only displayed if an audio folder has also been configured. By default, the waveform is disabled.

The Wavesurfer library is used for drawing the waveform. The library is well-supported and has been around for a few years. Additionally, the developer is very responsive to issues or inquiries.

During the development, I encountered the following problem, which has now also been included in the Wavesurfer FAQ.

There is a mismatch between my audio and the waveform. How do I fix it?
If you're using a VBR (variable bit rate) audio file, there might be a mismatch between the audio and the waveform. This can be fixed by converting your file to CBR (constant bit rate). See katspaugh/wavesurfer.js#2890 (comment) for details.

Another potential issue in the future could be that the files become too large. However, there is an option to pre-generate the peaks of the waveform. Evaluating these pre-generated files would need to be implemented as needed and is not part of this PR.

Does wavesurfer support large files?
Since wavesurfer decodes audio entirely in the browser using Web Audio, large clips may fail to decode due to memory constraints. We recommend using pre-decoded peaks for large files (see this example). You can use a tool like bbc/audiowaveform to generate peaks.

During development, I worked with an audio file that was approximately 30 minutes long and 30 MB in size. There were no issues regarding the length of the file. Additionally, in the current implementation, the peaks are cached on the client-side for use in the metadata editor.

[henning-gerhardt]

Good addition to the project.

Some remarks:

• Why is a configuration flag needed in the project settings? Displaying this or not could not be determinated by the mime type of the file?
• Waveviewer/Wavesurfer is licensed under condition as BSD-3-Clause license. This license should be added to the repo or? Maybe even add a new file which contains which file from "outside" is licensed under which condition and where to found is (project home page or something similar).

[markusweigelt]

• Why is a configuration flag needed in the project settings? Displaying this or not could not be determinated by the mime type of the file?

The configuration makes sense if only the audio files should be captured but no waveform is required, e.g. chapters or sequences should not be captured.

• Waveviewer/Wavesurfer is licensed under condition as BSD-3-Clause license. This license should be added to the repo or? Maybe even add a new file which contains which file from "outside" is licensed under which condition and where to found is (project home page or something similar).

Yes, that definitely needs to be done. Currently, there are no direct templates available. I will take a look at how other repositories handle this, or do you have a template that we can use as a reference?

[markusweigelt]

• Waveviewer/Wavesurfer is licensed under condition as BSD-3-Clause license. This license should be added to the repo or? Maybe even add a new file which contains which file from "outside" is licensed under which condition and where to found is (project home page or something similar).

Yes, that definitely needs to be done. Currently, there are no direct templates available. I will take a look at how other repositories handle this, or do you have a template that we can use as a reference?

I have added the LICENSE file directly to the "lib/wavesurfer" folder. According to my understanding of this license, that should be sufficient.

In the future, you could potentially consider using a JavaScript package manager for these libraries. This would require adding an additional build step for downloading the libraries. With this approach, you could easily manage the libraries and their versions.

[oliver-stoehr]

I found only a few minor things mainly regarding code style. Functionality is fine!