Posted on

How to add audio files and audio playlists to WordPress using Gutenberg

Gutenberg currently only has an audio block for inserting single audio files into your WordPress blog, and not an audio playlist option.

Easiest way round this I have found is to just add a new ‘Classic’ block using Gutenberg, and then create your audio playlist in the normal ‘classic’ way. It may not be the best looking playlist but it works very well and remember if you add a featured image to your audio file it will show up in the top of the playlist when selected.

Also, if using the audio block in Gutenberg to add multiple audio players on one page, then annoyingly starting one player does not stop an existing player. So if adding a few audio players on a page I find it better to use an html block and add audio in the old way, with the shortcode:

[audio src="https://www....mp3"]

However, what this lacks over the Gutenberg audio block is a download option. To fix this, you can add a Gutenberg file block and link it to the same audio by selecting it from your media library. (you can also upload a new file)

This will create a title and download button, but you can delete or edit the title if preferred, like I have here and place it under your audio player.

TIP! If you want to edit the file in the download button later, click the three dots in the block options and chose: ‘Edit as HTML’.

Edit as HTML