Making Audio Playback also visually appealing is not the easiest task to do for website designers. A Javascript library that makes this a lot easier is wavesurfer.js. It generates a waveform of the played audio file (as you might know it from Soundcloud) with many other options to include. A playlist or even the inclusion of a written script is possible. There is just a slight problem: Javascript is a client-side language. And because the Waveform is generated by the Javasript itself, the audio file needs to get downloaded completely for generating the waveform image. Audio files can easily be 10 or 20 MB big. In a world that goes more and more to mobile first approaches, this can be quiet challenging. Luckily they integrate an option to precalculate the peak data. The process is a bit scary at first and involves handling the console of your operating system as well as getting a Python installation ready.
The way to go can be found here.
After using the provided way I ended up with a JSON file that didn't show me the right waves. I ended up with some waves in the beginning but a silence line for approximately 80% of the file. After some testing, I came up with the following solution:
Use the fallback option backend: 'MediaElement' to get the HTML5 media object and adjust the audiowaveform generator code to the following line. This way, I got the fitting length of peak data:
audiowaveform -i audio_file.mp3 -o audio_file.json --end LENGTH-IN-SECONDS --bits 8
This solution requires the length of the mp3 file as a parameter but it can be easily read e.g. with ffmpeg.
The problem that I had is that my project runs on managed webspace. My server doesn't have a running Python installation and no opportunity to run the other tools. The files have to be generated on the local machine. To simplify and streamline this experience every time, we have to upload a audio file, I wrote a small tool that can be used to put all this script work under a shiny graphical User Interface. Have a look at my GitHub page.
Stay safe everyone!