A plugin to archive, present, and play collections of mp3s (or other html5 audio formats) as albums within your post.

1 Rangertwo
2 Heredrastic
3 Walking, Eating, Fighting, Driving
4 Silomic Tres
5 Dang Ol Mango
6 In The Night
7 Julia

Bones :: Walker – An awesome little album by the artist formerly known as Bones a.k.a. Bonedaddy and currently known as Dakota Bones. Check him out.

Just another music publishing project dropping out the airlock! If you publish your own music or if you have an active music review WordPress site or the likes, you might want to check out this neato little plugin for embedding albums in your posts. Nothing fancy, really, but it’s good looking, unobtrusive, and hopefully simple enough to be useful in a handful of different settings.



Features
  • Responsive – Sizes itself automatically to fill whatever container the player is in
  • Flash based fallback for Firefox MP3 Issues
  • Simple leveraging of built-in WordPress functionality
  • Simple, unobtrusive design
  • TinyMCE editor feature lets you choose an album from your collection for insertion into a post. No need to remember or type shortcode.
  • Optional download of tracks
  • Auto Player option can find audio links within post content and automatically set up a player w/ playlist.
Download & Install
  1. Download SE HTML5 Album Audio Player
  2. Unzip the downloaded archive
  3. Upload the unzipped folder to the /wp-content/plugins/ directory
  4. Activate the plugin through the ‘Plugins’ menu in WordPress
Usage
CREATE & INSERT ALBUMS
  1. Create an album from the “Albums” menu tab.
  2. Give the Album a title.
  3. Upload any number of audio files to this album by using the “Add Media” button. (NOTE: As of the last update of this plugin, I still recommend using .MP3 files for the widest reception across browsers).  Any audio files uploaded to this album will become it’s tracks. Drag the audio files into the correct album order. Rename tracks here in the media dialog if you like. The “Title” field of an individual audio upload will be used as the title of that track in the playlist.  (NOTE: WHen arranging an album’s tracks from the media dialog, it’s useful to select “Uploaded to this post” from the dropdown menu to filter out tracks and other content that is not part of the album.)
  4. Close the media Dialog. You do not need to “Insert into post“.
  5. Set a featured image for the album. This image will serve as the album cover.
  6. Now you’re ready to insert the album into a post or page. Edit or create a new post and use the Visual Editor button “SE Albums” to select an album from your collection to insert. This will insert a short tag like [SE_album_player album_id=23]
  7. If you want to allow your visitors to easily download the playlist tracks, select the DL version of your album from the TinyMCE “SE Albums” dropdown. This version will have a download button for each item in the playlist.
USE AUTOPLAYER

You might not want to create albums in advance and on occasion (or regularly) just use this plugin as an audio player for the tracks already embedded in your post. To use it this way is simple.

  1. Navigate to a new post or the post you want to insert the player into.
  2. Select the `Autoplayer` option from the SE Album TinyMCE dropdown. This will insert the shortcode and determine where your player will show up in your post.
  3. Any mp3, ogg, or wav files that are embedded into a post with the Autoplayer will be collected and made available to play through the player.
  4. If you want to allow your visitors to easily download the playlist tracks, select the Auto Player [DL] from the TinyMCE “SE Albums” dropdown. This version will have a download button for each item in the playlist.

Note: If you want to use a cover image for an auto player, add the following to the shortcode after it is inserted where XXXXX is the url of the cover image: `cover=XXXXX`
So in context it might look something like:

[SE_album_player album_id=autoplayer dl=true cover=http://www.metalsucks.net/wp-content/uploads/2013/03/Monkey-Mia-MJK-Australia.jpg]

**Note: You can wrap the player shortcode in html and further style the player with your own CSS. The player assumes the full width of its container so if you want to give the player a specific width (fluid or fixed) or float it left or right, just wrap it in a div and style accordingly.


  1. Zac says:

    I downloaded the plugin inside wordpress, and activated it. But I don’t see it listed in any of the menus to edit the album and add songs. It is listed in the plug-ins section and the only options are to edit/deactivate. When I click edit, it takes me to the HTML editor.

    Do you have any idea how to fix this?

    Thank you,
    Zac

    • sethness sethness says:


      Hey Zac,

      Are you sure you can’t find the “Albums” tab (as a top level menu item) in the menu on the left of your admin area?

      After you find this menu, you can add a new album from the expanded menu option, “Add New”, or yu can just click it and add an new album from the next screen. (You’ll find the button to “Add New” on the top of the next page. See pic below).

      Once you find these menus/buttons, you should be able to get going by following the instructions in the README.txt file or from here: http://wordpress.org/plugins/se-html5-album-audio-player/installation/

  2. kai says:

    Hi Seth.

    I just downloaded your plugin and I’ve managed to get it working. The only problem i seem to have, is that I don’t have the the option to add the featured image.

    Any thoughts?

    • sethness sethness says:

      This is likely because your WP theme has not activated the built-in post-thumbnails / featured image functionality.

      I will try to add a check for this within the plugin and then activate the featured image functionality for themes who have not done so already. Hopefully will get to it this afternoon.

  3. Jon says:

    Can I put the player in the sidebar?

    • sethness sethness says:

      Yes, if you are comfortable modifying your theme files. It’s real easy: just place < ?php echo do_shortcode( "[SE_Album_player album_id=XXX]" ) ?> where XXX equals the album post ID into a theme file where you want to see the player.

      The plugin is not wrapped as a widget currently, but it shouldn’t be too difficult for you to modify it in whatever way you see fit.

  4. Ajax says:

    I’m liking the possibilities with this app. However, in Edit Album there are a few troubles i’m having.
    1. after using Add Media, selected files do not show up on the edit album page where they would be arranged for order in the player.
    2. previously uploaded files, selected after hitting Add Media, also do not appear on the edit album page and are not in the player once the album is selected in a post and that post is published. The player renders but the mp3′s aren’t present.
    The files that do work in the player are only those that are uploaded specifically after hitting Add Media and selecting Upload.
    Also, the “mini” AudioPlayer, that collects inserted mp3 links, works great.

    Other than those troubles are you adding Download Linking for tracks within the player? This app meets my needs perfectly so i hope i can make it work. Thanks for your time.

    • sethness sethness says:

      The download idea you suggest is great. I’ll try to add that soon. For your other troubles, however, I think you should take a look at the readme.txt file. I have a feeling you might have missed a detail or two in the usage section.

    • sethness sethness says:

      I’ve added the track download option to the plugin. Check out version 1.0.8 for this feature and check the README.txt for instructions. Should be pretty simple.

  5. Dan says:

    I can’t seem to add files to an album. Every time I ‘Insert into Post’, nothing happens. I still have a blank page: i.e. “Edit Album” at the top, “Insert Media” underneath that, and then a blank space underneath that.

    • Dan says:

      sorry being retarded and not reading installation instructions properly. working now. my apologies.

      • sethness sethness says:

        No prob. Happens to the best of us. Glad you thought to check the readme and glad that it helped!

  6. dan says:

    Hi, i read the readme, i follow the method, but then i get this error when i use the shortcode : Warning: Invalid argument supplied for foreach() in /homez.85/cfmjhcyz/wordpress/wp-content/plugins/se-html5-album-audio-player/functions.php on line 89

    i guess this is because it doesnt find any file. i added them as part of the document.
    When i add files they do not appear in the album section so i cannot order them. i read the readme but maybe i dont get it because my english is not too good.
    help!

    • sethness sethness says:

      Audio files must be added to the Media Library from WITHIN the album post using the Upload Media button if you want to later embed a specific album into a regular post or page.

      If you want to use the AutoPlayer then the audio files must simply be represented in the post content of your post as anchor tags (e.g. <a href="URL OF AUDIO FILE" rel="nofollow">Song</a> )

  7. Dan says:

    Thought it was working but have a problem. Not 100% sure if its a plugin issue or something else, so I’ll just lay it out:

    On Chrome (and chrome only), the buffer bar reaches the half way mark very quickly and then slows down a lot. More often than not the music will catch up with the buffer bar, and once that happens the audio cuts out and you can skip ahead / backward to resolve it. However, if you just pause and then play before the audio reaches the buffer bar, then the rest of the track buffers up really quickly. It’s bizarre. Works fine on all other browsers, and some people who have tested it on chrome say it works fine for them! I’ve run out of ideas as to what it might be.

  8. Anthony says:

    Working great! Only problem, when I change the song on the player the name of the new song being played is not displayed

Comments are now closed.