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.

Is my theme compatible with the WooCommerce integration of WavePlayer?

WavePlayer integrates with WooCommerce using its action and filter hooks. So, as long as your theme is compliant with WooCommerce theme developing guidelines, you should not find any problem integrating WavePlayer with WooCommerce using your theme. For example, this website is based on the official Storefront theme, developed by the WooCommerce team and fully compliant with their developing guidelines, and the integration is absolutely seamless.

Some themes, though, use various forms of customization that might conflict with WavePlayer integration. For example, a CSS rule of the theme could prevent an element in the player to display correctly. If you are not familiar with coding, we would recommend you to contact us, sending an email to [email protected]. We will do our best to point you in the right direction in fixing your issues.

What is a preview file?

A preview file is an audio file that shows your customer the content of the audio products you are selling. WooCommerce uploads the downloadable files to a special folder that is not accessible unless you buy the product. For that reason, it is necessary to upload different audio files that can be safely incorporated into the pages of your website.

Preview files allow you to upload a reduced quality or shorter or audio watermarked version of your downloadable files, so that you are always sure that nobody can access the high-quality tracks you are selling.

Please consider that, due to most web server limitations, WavePlayer cannot generate preview files from the downloadable files. That is something you have to do yourself, uploading separate files for download and for preview.

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:


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.