Let’s continue working with audio files in WordPress 3.9. I’m going to upload some more so that we can create a playlist just like we did with the video playlist. I have a bunch of mp3s in my documents that are ready to go.
Playlist Option Shows After First Audio is Added
We’re going to keep working on this same page that we added the first audio file to. I’ll edit the page and delete that first one. Then go to Add media and now we’ve got the choice of adding an audio playlist. So I’m going to upload some mp3 files.
Playlist Settings
Now that those are uploaded we’re going to create a new playlist. We’re going to leave all the playlist settings checked so that’s show a tracklist, show artist name of the tracklist and show the images.
Add Playlist to Page
Now we’re going to insert the audio playlist, update it and view our page. And now we’ve got this audio player here.
Add an Image to the Audio Playlist
We don’t actually have an image for “VoiceBunny”. So if we want to change these audio files to have images we have to go back over to our media library. Let’s go to media library and let’s add an image to each one of those 3. So we’ll add that image to that one, update and then we’ll come back over to library.
“VoiceBunny” is the source that I use to read the script so let’s edit that. “Jim Wants to Build”, and then we’ll add another thumbnail image to this one. In this case, there’s Jim, we’ll let Jim be the thumbnail image and then we’ll update that one and let’s take a look. Okay, one more time, oh that’s right, it’s not the Thesis thumbnail that I want. We’ll set the featured image to Jim and then we’ll just go to the library one more time and we’ll set a featured image for “Bill” as well.
Now, when we refresh this, okay there’s the Jim picture, there’s the Bill picture, there’s the Anthony picture and you have the controller. It’s the title that’s showing up for the audio files, so that’s “anthony-builds-a-website-beep”. Let’s fix that to show “Anthony Builds a Website”.
Show Artists Name
Let’s look at the library one more time for that. Add that to the title and the description here says, “Anthony Builds a Website” and then we’ll add in the artist, Some Chris Rock Impersonator. Update that, come back over refresh the page. Now when the audio file is playing it shows the title and artist, Anthony Builds a Website, Some Chris Rock Impersonator.
Obviously you can do this kind of audio playlist and video playlist quite simply now in WordPress 3.9. It used to be a lot more cumbersome than it is. It comes with all kinds of default styling and things that you can hook to so you can make your own styles yourself. It’s actually quite easy to do that.