How long does it take to generate a waveform in WavePlayer?

The time required to analyze the audio content of a file and generate its waveform can be affected by several factors. The most relevant one is the size of the file. Since WavePlayer needs to fully load an audio file in order to analyze its content and generate a waveform, the longer is the audio track, the longer it will take it to generate its waveform. Usually, we consider that it takes 1 or 2 seconds per minute of audio recording. So, for example, the waveform of a 5-minute track should render in 5 to 10 seconds.

Of course, also a higher bitrate will affect the time required to generate a waveform.

The player seems to load fine, but no waveform is displayed. What can I do?

Most of the times, this problem is connected to a newly uploaded file or, in any case, to a file that has never been played back by a WavePlayer instance. When WavePlayer loads a file for the very first time, it needs to analyze its audio content and generates a small peak file where it saves the waveform data. This process only takes place the very first time an audio file is loaded in WavePlayer: once the process is done, the same audio file will always load almost instantaneously.

What is a peak file?

A peak file is a small file (usually around 12kB) where WavePlayer saves the waveform data of your audio files. This allows the players on your page to display a waveform much faster than it would do if it had to analyze the actual audio content every time a file is loaded.

WavePlayer does not show any waveform when I move to a different page, unless I reload the browser.
How can I fix this?

The main script of WavePlayer initializes every instance of the player after the page completes loading.

If the theme you are using on your website loads pages through AJAX – which means that only a specific part of the content of the page gets updated without reloading the whole browser page – the script has already been invoked and cannot initialize those instance that are present in the new content of the page. In order to properly display the new players, it is necessary to call the initialization command right after the AJAX page loading completes. This command is:

WavePlayer.loadInstances();

If the theme implements callbacks triggered at the completion of the AJAX loading, it will be enough to add the line of code specified above to have all the instances of the player initialized.

How can I add a cover art picture to an audio file?

Audio attachments are pretty much like any other post types, in WordPress. Therefore, even for an audio attachment in the Media Library, it is possible to set a Featured Image.

How to proceed:

  1. Go to your Media Library
  2. Click on any audio file
  3. In the Audio Details dialog that pops up, click on the link Edit more details
  4. In the post editor, you can change any details for the audio file, like you do for any other post or page: click on the “Set Featured Image” and choose the image you want to use as a thumbnail for this audio track.

After completing this process, that specific audio file will have the selected picture as a thumbnail in any instance of WavePlayer.

Alternatively, it is possible to embed the cover art picture in the MP3 file before uploading it to the Media Library. When you do so, WordPress extracts the cover art picture from the audio file, adds it to the Media Library and attaches it as a featured image to the audio file it extracted the picture from, without any further action from the user.