How to Create an Audio and Video Playlist in WordPress

WordPress 3.9 “Smith” is released and it comes with some exciting new features. As always, some of these are brand new features and some are improvement from the earlier versions. The new version of WordPress now offers live widget previews, new theme browser, better image editing, gallery previews and also allows users to create audio and video playlists. In this short tutorial, you’ll learn how to easily add audio and video playlists in WordPress.

With WordPress 3.9, you can create audio and video playlists just like creating image galleries. Creating a playlist helps you to keep your audio and video together in the same post, and your site visitor can play all the tracks from a single post or page. So without any further talk, let’s get started.

Creating Audio and Video Playlists in WordPress

Step 1: Click on the usual Add Media button and then upload all your audio and video files. You can simply drag and drop all your media files to the media uploader.

Media library is usually very crowded with media that you’ve uploaded to other posts and pages. To view media that you’ve uploaded only to this post, select “Uploaded to this post” from the drop-down box.

Step 2: On the left side, you’ll find options for Create Audio Playlist and Create Video Playlist. So if you’re creating an audio playlist then click on Create Audio Playlist, and if you’re creating a video playlist, then click on Create Video Playlist.

create-playlist

Step 3: In this step, you can deselect any files that you don’t want in the playlist. Also you can add title, caption and description for each individual file and when you’re done, click on the “Create a new playlist” button.

create-audio-playlist-wp

Step 4: You can now change the sorting order of tracks in this step. Simply drag and drop files to arrange them as per your wish. In the playlist settings section, you can find options for: show tracklist, show artist name in tracklist and show images. Simply deselect the options that you don’t need.

edit-playlist

WordPress will automatically try to fetch album cover artwork using the ID3 tags present in your media file. If you don’t want to display the artwork, then deselect “Show images” option. Finally click on the “Insert audio playlist” button (or Insert video playlist button depending on what you’re trying to do).

WordPress will now insert the newly created playlist in the visual editor, and you’ll also be able to see a preview right in the editor itself. Click on Publish button to publish your new post or page.

playlist-visual-editor

This is how your newly created playlist will look like to your site visitors. The playlist will have play/pause button, mute and volume buttons. Click on the respective track to start playing it.

wordpress-playlist

So go ahead and embed an audio and video playlist in WordPress using this method. If you’re a musician, have a video blog, or just a regular blogger, you’ll find this option very useful.

Comments

  1. daniel says

    How we can upload the image for the song ? I can’t find anywhere for that. In my website it’s not show the play button. Something wrong or conflict ?

    • says

      You don’t need to upload images manually, as those are grabbed from the ID3 tags present in your media file. Regarding the play button, I think your theme might not support this feature. I have tried this on the new Twenty Fourteen theme and it works great.

  2. says

    I was able to successfully make a playlist for videos that were small enough to upload. However I have much larger videos that won’t upload via media in wordpress. I put them on a folder on my site. How can i access them to build a playlist? I know how to access them individually to be seen on a page in my site, however, how can they be seen in media to create a playlist? Or what short code can i use to see them (besides iframe) that allows them to be compiled into a list?

    • says

      I don’t think that’s possible. But try posting this question on WordPress.org forums and perhaps they can find a solution to this.

Leave a Comment