Generate playlists automatically from mp3s attached to your post/page
Audio support in WordPress makes me cry. No native player, the fields in the Media library are just wrong, and let’s not get into ID3 tag support. The audio shortcode and player provided by Jetpack is a step in the right direction. However, the ability to directly create a player or playlist on a post/page from attached mp3s makes me sad again. Writing that shortcode is nasty business for anything beyond a file or two.
For example of said nastiness, take a look at the docs (obviously slanted towards wordpress.com users): http://en.support.wordpress.com/audio/
When inserting into a post, make sure to click the None button for Link URL and then click the Insert into Post button (as illustrated in the image below). If your file is an mp3 file, this will insert the audio player shortcode into your post or page.
Nope! Doesn’t work if you’re hosting your own installation of WP. And what about the [gallery] shortcode for images? So easy to round up all your attached pictures and display them all automagically. Again, no love for audio.
This plugin acts as a wrapper for Jetpack’s [audio] shortcode. It rounds up all the mp3s attached to your post/page and adds them as a playlist in the Jetpack player. Simply attach your mp3s to your post/page and use the shortcode [[jplaylist] where you want your playlist. You can also print a playlist, add links, randomize the tracks and add a pop-up button. You can still use all the options from the vanilla [audio] shortcode.
Installation and Usage:
- Upload the plugin, either via ftp or the Plugin-in dash.
- Activate the plugin through the ‘Plugins’ menu in WordPress.
- Bulk upload and attach mp3s to your post via the “Add Audio” or “Add Media” button, but do not insert them.
- Order mp3s in “Gallery” tab.
- Use the [jplaylist] shortcode to display a playist of all the mp3s attached to your page/post
Walkthrough (updated for new Media Uploader):
Add those mp3s (but remember we aren’t inserting them).
You’ll need to upload the mp3s you want to associate with the page/post here. You can’t just select songs arbitrarily from your Media Library. All the songs in a particular playlist have to be all uploaded against a specific page/post. Note that you can play the mp3s uploaded against page A on page B though, though, if you like. One page/post, one playlist!
If you want your playlist player to actually have intelligble title/artist info, you’ll need to fill out these fields. Title of song goes in “Title,” artist name goes in “Caption” field (herp derp).
You can drag-and-drop your mp3s in the order you like, left to right corresponding to descending order.
Example:
This player generated from the mp3′s I attached to this page. No messy [audio] shortcode was written: honest!
Shortcode [jplaylist bgcolor=0xEAEAEA] produces:
FAQ:
=How do I order the songs in the playlist?=
Click on “Add Audio”. Go to “Gallery”. Drag and drop your mp3s into the order you want (it ignores images and other crap). The plugin goes by ascending order.
= How do I change the title and artist info for a mp3? =
Song title corresponds to the “Title” field, and song artist corresponds to the, um, “Caption” field (I know this makes not a ton of sense, but I’m working with what I’m given, folks. I may have the plugin change this field title in a future release). WordPress makes a guess as to the title of the mp3 when you upload it. I recommend you change this info as soon as you upload inside the post/page. You can also change this in the media library.
= What about other audio formats than mp3? =
Sorry, other audio formats aren’t supported by Jetpack’s player.
= What about accessing the player options (color, size, etc)? Can I do that? =
Yes! You can use any of those options. You can either use the janky pipe (|) method to connect everything like you’re told to with the [audio] shortcode, or you can use proper attributes.
Example:
[jplaylist bgcolor="0x000000" lefticon="0x00ff00" righticon="0xFF0000" animation="no" loop="yes"]
or
[jplaylist bgcolor=0x000000|lefticon=0x00ff00|righticon=0xFF0000|animation=no|loop=yes]
makes
= Can I make playlists from attachments on other pages? =
Yah. You use the “pid” attribute with a post/page id or permalink slug.
Examples:
[jplaylist pid="173"]
[jplaylist pid="software/jetpack-easy-playlists/"]
= How do I turn on “list mode?” =
Use [jplaylist print="ol"] for an ordered list, [jplaylist print="ul"] for an unordered one.
= How do I make my playlist have links? =
Turn on list mode and then use [playlist linked="true"]
= How do I turn on “random mode?” =
Use [jplaylist random='true'] for random song ordering. This is per page load.
= How do I add a pop-up button =
Use [jplaylist external="true"] for a window with the dimensions 350×500. If you want to customize the dimensions, then use a comma separated width and height, like [jplaylist external="600,800"]. The playlist window will use the title of your post/page. It will also be linked to your default theme stylesheet so you can make it pretty. I leave it to the user to suss out the page structure of the pop-up.
You can, of course, combine all these options!
= Can you support my favorite player WordPess player plugin xyz? =
Maybe! You can talk to me about it at least.
= I’m hitting an upload limit. Help! =
Welp, that’s nothing to do with the plugin or even WordPress. You can edit (or create) the php.ini file in your root directory to tweak this. Better yet, contact your host re: increasing your upload size. Hint.
This is amazing. Yay, finally an easy playlist. XOXO
It could be that I am being really stupid, but where you’ve written “Nope! Doesn’t work if you’re hosting your own installation of WP” are you referring to how dumb wordpress.com support is for audio, or the fact that the plugin you’ve written doesn’t work for own-hosted wordpress? I am self-hosting a blog here and would love to use your player. Sorry if I am being a dumbass.
Please discount my last comment, I figured it out. Your plugin is awesome.
Glad you figured it out, Felix. I think WP support for audio is just all around stupid dumb
I am wondering if there is a way to show the player in a list mode, I am working with MP3-jPlayer 1.7.3 which has some great visual features, but it is not going to be easy for the client to simply upload mp3′s within the ML and attach them to a post to have them automagically appear. Instead, there is a long shortcode in which the client will have to manually enter mp3 titles, and I am afraid they will mess it up when editing in the default visual mode.
@tsummers – Yes, I’ve just coded an option to show “list mode” and will be updating the playlist tomorrow.
@tsummers – list mode is added!
Hey this is a great plugin… thanks! It looks like the latest version of WordPress does not let you reorder media files in the same way. Is there some way to shuffle/randomize the track listing instead?
Nevermind… I figured out how to rearrange media in the new WordPress! Might help to update the screenshots though
Thanks again!
Any way to display list of media attached to the post?
Not only “one-by-one” track, but a list of all attached media.
@Danilo – sure, if you look at the code of the project, can can look at the loop I use to grab attachments. Just don’t filter by mp3.
Will this work by uploading MP3 files to a particular folder? And then additional files automatically show up in hopefully newest first order? Also is this HTML5 compatable?
I am running 3.5.1 on my own hosted site.
I installed JetPack as well as this plug in and nothing seems to be as described in the instructions. I dont’ see a gallery tab at all, i can’t order any of the music, it seems like this add on isn’t even working. I checked and it’s activated, but I don’t see any indication of that anywhere.
I found out how to reorder the audio tracks in the new WP (Add Media->uploaded to this page->select them all->edit) but no matter what order I put them in, the plugin’s pulling them in a the uploaded order. Do I need to reset something to get it to use my new order? Also, this plugin is awesome! Thanks!
@RCP, yes this is HTML5 compatible. You have to add files via the WP media uploader.
@shazoo00oo, no interface/indication for my plugin, you just attach mp3s to a post/page and use the shortcode. My screenshots were pre 3.5 and the new Media Uploader, though. I’ve updated. Let me know if things aren’t clear now.
@RCP, @Jason: Click the to “Media Library” tab, and filter by “Uploaded to this post.” You can arrange the order there.
@james – Thanks for those instructions! I don’t know why I could get it to work for me before. I really thought I did that, but after following your really short instructions, everything seems fine.
Hi, I’m on Chrome and I can’t see the plug in any website. Any idea?
It’s a JetPack bug. See: http://jamesfishwick.com/audio-embed-shortcode-flash-fallback-not-working-with-jetpack-a-fix/
Hello James, I’m new to wordpress and would like to have an audio file (one file) play on a pop up window. I have tried to insert your plugin with one and with two files, but I can’t make it work.
This is what I do: create a new post, name it and “add media” upload the file to this post and “close” (x on the upper right side, as you said not to insert). on the post page go to HTML (the “text” part, not “visual”) and paste the code [jplaylist external="true"] publish and nothing happens.
Forgive me if the correction is something in “coding 101″ as I know nothing!!