Reading tracks and playlists from Soundcloud

WavePlayer 3 gives you the ability to read your favorite tracks or playlists directly from Soundcloud, incorporating them into your website without worrying about the visual aspect of the player not fully matching the style of your page. With WavePlayer you are always in full control.

Adding tracks or playlists from Soundcloud

Adding a single track or a full playlist is as easy as copying the URL of the track or playlist from Soundcloud…

Copy the URL of a playlist from Soundcloud

…and paste it in the URL field of the WavePlayer instance you are creating (in the following picture you can see a Gutenberg Block but this method is valid for an Elementor widget, as well as the Classic Editor and the regular WavePlayer shortcode).

Paste the URL of the Soundcloud playlist to the WavePlayer block

What WavePlayer does is reading the track information directly from Soundcloud, including the URL of the audio files, the titles, the artists, even the thumbnails. It then generates a single-track instance or a playlist based on the data retrieved from Soundcloud.

With this method, you don’t have to worry about updating your posts or pages of your website every time a playlist changes. WavePlayer automatically updates the playlist on your page every time a visitor loads it. The following player shows the content of this playlist from Soundcloud.

How waveform are generated

When you load a track from Soundcloud that was never played back before, WavePlayer analyzes the audio file and generates a peak file, storing it in the /wp-content/uploads/peaks/soundcloud folder. Since Soundcloud uniquely identifies each track with an ID, WavePlayer uses that to name the peak file so that, every subsequent time the same track is loaded in the player, the rendering of the waveform can be nearly instantaneous.

It is worth noting that, unlike the waveform on Soundcloud that are stored as PNG image files, WavePlayer stores the waveform information as an array of sample values. The number of samples is large enough to guarantee a high-resolution rendering even on the largest screen and when the player occupies the full width of the browser. The use of peak files makes it also possible to render the same waveform with different visual configuration without any need to regenerate the peak file. For example, the following players show the waveform of the same audio track with different visual configurations. All players use the same peak file.

This answer in the FAQ offers more details about the peak files.

Powered by BetterDocs

0:00
0:00