New Plugin, “Audio”

Posted on by

UPDATE: Audio now supports Ogg Vorbis

That being said, it is off to a good start. In my quest to 1) encapsulate all the code I end up writing 5 million times into re-usable / one-click-installable Plugins and 2) fix how WordPress deals with/doesn’t deal with Media, I have written a pretty sweet plugin for Audio. It is not feature-complete and definitely needs to come with some more Theme options out of the box, but for advanced developers who want to start managing their MP3s / MP3 playlists in a much easier way immediately, it is already pretty powerful.

I claimed the Subversion repository late last week without having written a line of code, but I did have a mission statement which I included in the Plugin’s description:

Audio allows you to use simple functions in your theme to display audio you have attached to Posts/Pages/Custom Post Types in your Media Library. Your player is styled 100% with CSS/images (if you want). Your audio player uses your browser’s native HTML5 capabilities when available with a fallback to Flash when necessary. Allows you to play audio inline on mobile browsers that support HTML5 Audio (heeeey, WebKit!)

Let’s take it step-by-step:

1) You can now output an Audio playlist into your page through 2 EASY methods

  • Shortcode in the editor =
  • the_audio() in your Theme code

These both do the same thing: they create the code necessary for jPlayer to handle player clicks and for you to style your player. The optional take an argument of “layout” if you want to include the list of your tracks below the player:

  • Shortcode in the editor = [audio layout="list"
  • the_audio('list') in your Theme code

In plugins/audio/audio.php, you can configure your URLs to be open to the world or obfuscated, the default is obfuscated. To change this, set this at the top of the file:

define('SECURE', false);

2) The player is styled 100% with CSS and some images I boot-legged from jQuery UI. I HIGHLY-ADVISE you to override all of the styles I have provided. In fact, if you put an audio.css file in your Theme directory, it won’t even load mine! You should copy and paste the code from plugins/audio/css/audio.css and then change it to your own site’s vibe.

3) HTML5 Audio!

The plugin is built on top of jPlayer, a jQuery audio plugin. In Chrome and Safari, your MP3s will play as native HTML5 Audio. Same goes for Android and iPhone. All other browsers that don’t support MP3 natively will fallback to Flash. Firefox supports Ogg Vorbis, but I didn’t have the energy to write support for Ogg Vorbis into the plugin yet. I am trying to de-couple all of the default functionality of Audio from Shuffle, but you should probably use them in tandem to get the benefits of associating thumbnails (album covers) with audio uploads, and later, Ogg Vorbis uploads with MP3s (I still haven’t decided how I’m going to do this).

The description for the plugin now reads:

HTML5 Audio (on supported browsers), Flash fallback, CSS-skin’d player, hAudio Micro-formats, attach images to MP3s (when used with Shuffle)

4) I have decided to get super-semantic and use the hAudio micro-format for the audio data that the plugin outputs. When adding meta data to your MP3s in the Media Library, Title – Caption – Description will be used for Song – Artist – Album.

http://wordpress.org/extend/plugins/audio/

84 thoughts on “New Plugin, “Audio””

  1. Pingback: My First Plugin: “Shuffle” | Scott Taylor

  3. I’m an experiencing an issue across Firefox, Safari, and Opera. Only in Chrome does the plugin work, but in the other browsers a Javascript error appears when trying to play the audio file. It reads:
    /***************/
    jPlayer 1.2.0 : id=’jquery_jplayer’ : Error!

    Problem with Flash component.

    Check the swfPath points at the Jplayer.swf path.

    swfPath = /wp-content/plugins/audio/js/
    url: /wp-content/plugins/audio/js/Jplayer.swf

    Error: a._getMovie().fl_play_mp3 is not a function
    /******************/

    Any idea what the solution is?

    • if your website’s root path is not “/”, you need to edit line 123- in plugins/audio/js/audio.js:

      $(id)
      .jPlayer({
      swfPath: '/wp-content/plugins/audio/js/', <---- EDIT ME, ROOT PATH

      • Fantastic! It works in all current browsers now. Check it out here.

        Your solution is extremely simple to implement and I have to recommend anyone interested in hosting their own audio files on their website to use this HTML 5 player plugin. Thanks again, Scott.

        • I just checked in version 0.2, includes support for Ogg Vorbis (when used with another of my plugins, Shuffle) – should be available in 10 minutes or so

  4. Pingback: “Audio” plugin now supports Ogg Vorbis | Scott Taylor

  5. I’m testing this plugin on a test site and I’m loving it!

    One request (I hope requests are alright): it would be awesome if there was a “Download File” option.

  6. Pingback: Audio Plugin | Wordpress Plugins

  7. Hey,

    I’m trying to understand how exactly to use this plugin correctly. How can I embed the player in the header of my theme so that it will show up on every page? I’ve changed the swfpath since my wordpress is in a subdirectory and I’ve added in my header.php but it doesn’t seem to show up. Also, how do I tell it what files to play? Can I specify in the function call which files?

    • if you want it to show up on every page — make a page or post and attach MP3s to it. In your header, call the_audio(ID_OF_THE_PAGE_OR_POST_WITH_THE_MP3s) wherever you want the player to show up. If you don’t know how to find the ID, let me know…

  8. Hey Scott,

    Thanks for the help. I got it working. It’s awesome, thank you for the great work! Two quick followup questions. First, is there a way to call the function and pass a parameter for autoplay? Second, is the player capable of playing through all songs, and putting in on repeat? I guess I should ask if you have a list of parameters anywhere.

    Thanks,
    John

    • If you want to autoplay the tracks – set AUTOPLAY in /wp-content/plugins/audio/js/audio.js on line 77 equal to true

      It will loop back to the beginning after the last track

  9. Thank you for this great plugin, I’ve been waiting for this for many years now!
    I’ve installed this player to my blog and just got one question now.

    1. I am using [audio src="#"] to embed my songs.
    But when I have many mp3’s in one post, the player plays them all. FOr example, I have three songs with own players each, but all three players plays three tracks. Is there any way to make it plays one individual file/or make playlist manually? Thanks.

    Happy New Year!
    Cheers,
    Alex

    • To return separate players for each track, you need to have elements with a class of audio-playlist and tags with an attribute named data-mp3 set to the MP3 – the shortocode is meant to output all of the audio tracks for a post and play them in one player

      Here is an example of what I am talking about – for 3 separate players:

      <div class="audio-playlist"><a data-mp3="PATH_TP_MP3"></a></div>
      <div class="audio-playlist"><a data-mp3="PATH_TP_MP3"></a></div>
      <div class="audio-playlist"><a data-mp3="PATH_TP_MP3"></a></div>

      • Hey Scott –

        The example you gave here creates three separate players, but they’re all empty – any ideas? I’ve replaced the PATH_TP_MP3 with the absolute path to each individual file.

        Also, I saw that you posted about doing song title and artist using the haudio micro format – it would be wonderful to be able to hard-code it for single tracks; do something like [audio path="foo" artist="hoobastank" song="man we suck hard"]

        Thanks for the great plugin!

  10. Hi! How exactly do I used the shortcode [audio]? I have a wordpress page with 10 songs linked to their mp3 files, where do I insert the shortcode? Is there going to be a player for each of the tracks or one player for all 10 tracks? Sorry for these very basic questions… just trying to understand how the plugin works!
    thanks for your help!
    S.

    • there will be ONE player – attach the MP3s to the post in the Media Library for it to work – the [audio] shortcode will output everything and hook it up for you

  11. Hey, just to re-itterate the previous question, a little more explanation of how the short code should be used would be very useful.

    I’m very keen to use the JPlayer but i’m a designer rather than a developer so any help you can offer would be great.

    • use the Media Library to attach MP3s to a post or page – in the Edit screen for your Post / Page, just drop in [audio] and the source code will be created for you / hooked up automatically

  12. Pingback: Music… gotta have music… | Abject

  13. How do I sub this in for the TSG Podcasting Plugin? I don’t want to disable it, because it provides feed data, but I want to override the flash player somehow. Any way to do that?

  14. Actually, I can’t get the plugin to do anything whatsoever. Inserting “[audio]” doesn’t pick up any MP3 links. What else is needed?

  15. Suzanne and Matt – You can reference the general “shortcode” [audio] usage notes at the WordPress.com Support – Audio page. For a basic song use [audio src=http://www.yoururl.com/upload/2011/01/page/song.mp3] or similar and for playlists use the exact same thing, but just upload all of your songs first using the little music note icon upload button at the top of your WordPress page (version 3.0+).

    To customize the look and feel of it, I would definitely suggest manually editing the audio plugins CSS at /wp-content/plugins/audio/css/audio.css.

    Good luck!

  16. Scott I LOVE this plug in, its great to at last have a simple player that’s html5 with fall back. I do have a problem though…or rather I have created one! lol

    In trying to change the players colors and with very little knowledge of what I am doing, I have managed to make the play, forward, back buttons vanish!
    Plus I have made color changes that I now don’t know how to rectify and change back 🙁 if I delete the plug and then re install the plug in, it just picks up the old colors again that I messed up with. What can I do?
    Do you have any ideas please? Also do you have a page that shows what changes are where within the code???

    Please help if you can. Thanks David.
    Ps. Web site is with player page is here: (No Laughing) http://dd3.tv/category/podcasts/life/dyslexia/
    I was doing my best to brand it to the site logo colors lol
    I now think it would be better to leave it how you had other than say just change the text to red.

    • if you supply your own audio.css file, it won’t use mine AT ALL – your best bet is to copy the CSS from /wp-content/plugins/audio/css/audio.css and adjust it to your liking

  17. Hi Scott,

    0.5.1 – I’m getting the following error in IE8 (works fine in FF, Chrome, Safari for windows… ):

    jPlayer 2.0.0 : id=’jquery+jplayer_1′ : Error!
    No solution can be found by jPlayer in this browser. Neither HTML nor Flash can be used.
    Review the jPlayer options: support and supplied.
    Context: {solution:’html, flash’,supplied:’mp3′}

    Any suggestions?

  18. Hey Scott,

    Great work. This is a glorious plug in. I was wondering if you have a way to get the player to play automatically when it is loaded. ( Some sort of autoplay function)? Any help would be great.

    Thanks for the help,
    Mike

  19. Hi Scott,

    i would like to try your plugin, but it doesn’t show up. I’m using the shortcode in a page
    [audio src="http://www.somedomain/somefolder/somemp3.mp3"]

    i have tried with and without quotes, but no joy.

    it’s a new 3.0.4 install, running twenty ten, no other plugins. The mp3’s do exist (other plugins play them ok). I don’t upload to the library, don’t do the clunky attach thing, so i just would like to play some url’s directly. Is that possible?

    Can’t find a demo, not even a screencap of what this plugin looks like on a page. Also the only help seems buried in this thread. Giving up for now, but any help/pointers would def be much appreciated!

    best,
    J

    • this plugin doesn’t work like the wordpress.com Audio plugin – you need to attach MP3s to a Post / Page in the Media Library and then simply drop the shortcode [audio] in the Editor for the Post / Page

  20. Scott I just want to tell you how DAMN NICE your plug in is and give you my thanks for your hard work and skill. Its Appreciated!

  21. Hi Scott

    Thanks for the effort you’ve put into this player it really is cool! 🙂

    I have a question for this plugin – I read through the comments
    and found a bit of advice to make separate players for each track (see below), have tried this code with absolute paths on my local machine but to no avail, I have tried it in a post and page and it doesn’t seem to do anything… How do you implement this in a post or page (or page template) so you get separate players for each track?

    Thanks!
    H

    ‘Here is an example of what I am talking about – for 3 separate players:



    ‘

  22. Hi, I’m sort of a rookie when it comes to writing “code” or html for my website.
    If you would be so kind, could you please assist me in showing me what I would have to type in my post page to get this to work???
    Any help would be extrememly helpful.
    Thank you and God bless!!!

  23. Hi Scott,

    Fantastic plugin here! I have tested a lot of HTML5 audio ones and yours is truly the greatest, in terms of performance, stability and also openness) ! Thank you very much!

    I have to 3 questions :
    1. Is there a way to make the player capable of playing through all the songs without activating the AUTOPLAY ?

    2. How is computed the order of the songs from the media library ?
    It seems that it is not based on the chronological order of the addition to the media library. Am I wrong ?

    3. Do you know if it is possible to add a media to the media library without using the wordpress GUI (that duplicates the media in the wp-content folders) ? In my case, all my medias are already stored on my server but in another directory than the wp-content one, and it is really uncool to copy those media each time they have to be inserted in the Media Library… I would prefer to add references to the existing files…

    Thanks for your support.

    Regards,
    Simon (a newbie in JSCSSPHP… languages)

  24. Hi Scott,
    First of all, thank you for this geat plugin.
    I have been using it for a couple a weeks and everything was going well so far. However, now I start having troubles and from time to time I get the following error message:
    jPlayer 2.0.0 : id=’jquery_jplayer_1′ : Error!
    Media URL could not be loaded
    Check media URL is valid
    Context:
    http://www.mysite.com/wp-content/uploads/2011/02/mymusic.mp3

    It seems that the pluing works well with a limited number of mp3 in my website. If we put to many posts with mp3 (in my case 5 posts containing 10 mp3 in total), then we start having this error message.
    The more mp3 we put the more error messages we get.

    Would you have a solution for this problem?

  25. WONDERFUL plugin — needs to get more recognition.

    I wanted to move to HTML5 audio player about 6 months ago, and there was a plugin to do it, but it wasn’t clever enough, so auto-played everything (as is the default for the audio element in many browsers) which skewed download stats. Now we can go flash free at last – where the browser allows it, woo. Thank you so much.

    My wish list requests would be 1) volume control options and 2) extending the shortcode as per other requests here for specifying the audio source, rather than going to attachments.

    I find the WP media library ‘attachment’ idea quite cumbersome – eg you need a plugin to detach attachments. My preference for auto choosing audio files would be to take the files in the ‘enclosure’ custom field instead – this would include anything linked to in the post, and used in basic podcasting. I might have a bit of a hack around with your code to see if I can do this actually, I’ll post again if it turns out to be simple enough.

    Cheers, and thanks again – a terrific and smooth job.

  26. Oo, one more request – the the_audio function that gets the attachments, it would be helpful to add ‘suppress_filters’ => false in the get_posts parameters, as the default is true (ie suppress), which means other plugins don’t get a chance to play with eg the post/attachment guid, and then your apply_filters(‘the_title’ in audio_item_formatted() would be unnecessary too.

  27. oh lord – now i look like a crazed sp@mm3r. re my comments on attachments being awkward… I’ve only just taken a proper look at what SHUFFLE does! You are teh awesomes

  28. Hello Scott!

    I want to use this so badly! Any plans to get it working in shortcode-enabled text widgets? I won’t be attaching audio via the Media library.

    Thanks in advance!

    Did I say this plugin really rocks yet?

  29. Great Work !!

    I have a dumb question,

    I could I have the player play the track (and keep playing it in a loop) even if the visitor goes to another page of my WP site..

    I have about 10 pages in my site and I would like the player to start the sound track and keep playing it in a loop even if people click on a different page of my site…

    Is there anyways to accomplish that!

    Sorry I am new to WP…

    Thank you,

    David

  30. i’m running wordpress 3.1 multisite and i can “network activate” the plugin, but when i look at an individual site, it’s not listed on the plugins page for some reason (active or inactive). i read something about some plugins not being usable in a multisite installation. do you know if there are any issues?

    thanks!

  31. I can’t get this to do anything, unfortunately. My error console keeps showing “AudioPlayer is not a constructor” in audio.js?ver=3.1 line 226.

    The simple shortcode [audio], as well as the embedded in the theme template, return empty boxes.

    [audio layout="list"] returns a two-column table with the file names and titles, but no players.

  33. Two questions for ya (I know you’re busy so I’ll make it short)

    How do I get the songs to auto advance to the next track? I already have autoplay set to true.

    Also, is there any way to get a jplayer skin to completely take over natively? I tried to get the Blue Monday theme going but it seems to move things all over the place.

  34. heya scott, i’ve been wanting to use this plugin for weeks, been trying to get this guy to fire on a site to no avail. using the plain old shortcode, though i’ve tried to isolate the issue by commenting out most all of the extra code, but nothings working and i keep getting this error:

    Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ‘}’ in /home/content/t/n/l/tnlorg/html/wp-content/plugins/audio/getid3/getid3/getid3.lib.php on line 17

    shows up if i use the php too (instead of the shortcode). any thoughts?

    thank you for your hard work and attention to support in your comments. is there documentation/forums on usage for this guy? i feel kinda bad posting support questions on your personal blog.

  35. Hi there, I’ve read through everything, including the comments, and am having trouble implementing your lovely plugin. Similar to one of the above commenters, I would like place the code in my header file so that it plays on all pages. My problem is I’m not overly familiar with php and so am not sure what to put and where. If you could please explain this to me like I’m an idiot (because quite frankly I feel like one right now), it would be greatly appreciated. Thank you.

  36. Hi Scott,

    I entered in the details of the plugin code as I wanted to make the songs in a playlist to follow each other automatically (this was one my question previously).
    Thanks to a debugger and the reference guide of jPlayer, I think that I have found the mistake in the plugin code. In audio.js, you have written a line whose role is to insure this behavior (.jPlayer(‘onSoundComplete’, doNext);)
    As per the reference guide of jPlayer 2.0, “onSounComplete” event is no more supported. So, if I replace this line by :
    .bind($.jPlayer.event.ended, doNext)
    it works fine ! 🙂
    I’m a newbie in PHPJSetc.., so please comment if you consider there is a bug in my syntax.
    Hope it will help some of the other users of this great plugin (that works fine with WP3.1).

    Regards,
    Simon

  37. Scott the plug in Audio if we don’t have an mp3 located on our server in wp but we have an mp3 podcast file living on say libsan servers for rss how do we get that file to play? I have promoted your player to some Podcasting friends and just realized I have only used it with mp3 files in my wp blog media folder! Please help if you can. Thanks David

  38. I am getting the following issue when I click on an audio file. The player is showing up. Site is not installed at root but in subdirectory called blog/

    jPlayer 2.0.0 : id=’jquery_jplayer_1′ : Error!

    jPlayer’s Flash fallback is not configured correctly, or a command was issued before the jPlayer Ready event. Details: this._getMovie().fl_clearMedia is not a function

    Check your swfPath option and that Jplayer.swf is there.

    Anybody have any insight?

  39. Scott how do we set this up to play an mp3 podcast feed?
    That’s resident on another server?

    Please help with this one.
    David.

  40. Running plugin in WP 3.1.x… There seems to be an issue with the flash rollback not showing the ‘play’ button and the music timer not working. Music still plays when you click ‘next’ or ‘previous’ buttons along with the track in ‘list’ view.

    Anybody else seeing this?

  42. Pingback: “Audio” plugin now supports Ogg Vorbis | Scott Taylor

  43. Hmm. I just updated to ver .06 and it broke my audio insert. Now, in all browsers, its shows “Array” on the page instead of the audio clip. Any suggestions?

    • I just pushed a fix – the Audio plugin was removed from the plugins repo so I updated it, but I didn’t know it was already live… sorry about that!

      • I had the same ‘array’ issue but did reinstall. Now I get a blank player even though my media is attached to each blog entry. Any reason why the player is now void of media? (seems to be the case in ALL browsers).

  44. Pingback: Audio Redux + Updated Plugins | Scott Taylor

  45. I have reinstalled the plugin after the update to Version 0.6.1 and now have an empty player. MP3’s are attached properly via the Media Library but no track information seems to be linking to the player now. All controls show up. Just no track. Might have to have to revert back to FLASH player if I cannot get the new version to work 🙁

  46. Hi Scott, first, thanks for your superb work and great post. Second, I am in the process of building a community at howdoisound.net, and I’m wondering if you can help me understand a bit more about your audio plugin.

    I would like to allow users to upload their tracks to the site. Would your plugin help to enable this capability?

    A user story might look like: as a I want to soe I can .

    Thanks in advance for your help!

    Dan

  47. Hi Scott, first, thank you for your superb work and great post. Second, I am building on online community, howdoisound.net, and am wondering if your plugin would the requirements of it.

    A user story might look like this: as a I want to so I can . I’d pull some data in from the users profile to show on the audio player, which would be aggregated to the front page as a rolling list of uploads. Further, users can filter by genre, etc (think soundcloud.

    Thanks in advance for your help!

    Dan

  48. Hey Scott and friends!

    So I’m having an issue with the audio plugin. I feel like it must be something relatively simple that I’m just not doing, but I’d appreciate the help. Basically, I’m trying to embed multiple audio files on a page using the plugin. When I was using it before, I just pasted the link to the wp-content folder where the mp3 resides. But I had to go in and redo a bunch of stuff and basically reinstall wordpress, etc, etc. So now that doesn’t work, just shows the link on the site, no media player. So I foudn the shortcode and put that before the link and it worked fine, except now it shows every other mp3 on the page as the first mp3 I listed. So if the first song was “Jumpin’ Jack Flash” and I did [audio]linktojumpinjackflash.mp3, and then down the page did a different song as [audio]linktodifferentsong…different song still shows up as Jumpin’ Jack Flash. Does that make sense? How do I fix this? Is there some other piece of the code that I just don’t get?

    Thanks!

  49. Pingback: About Plugin – 3 Ply SEO

  50. Hello there, what does this player looks like?
    Any screen shots / working examples?

    Thank you me friend!

  51. Hi Scott, Can you help?
    For some reason since I updated WP to 3.4.1 all the colors and customization I have done to the player have gone! Non of the players load with any color now. Any ideas or help??
    Thanks
    David
    Ps: I am using the latest version of the player.

  55. Dear Developer, please include the screenshot of the player. And some FAQ page on the WordPress plugin repo would be great.

  56. I cannot get this plugin to allow me to have more than 1 track on a page. I’m using the shortcode [audio layout="list"]url to file[/audio]… I’ve tried wrapping each url in the shortcode, wrapping all url’s in one, each url on its own line, separated by commas… Can anybody tell me what I’m doing wrong?

    • I have the same issue. layout=”list” do nothing
      However it adds all attached mp3 to player’s playlist but does not play next song automatically. The user needs manually click “next” button.

    • Howdy! Same issue.
      [audio layout="list"] only shows one track. Otherwise this is a great plugin. Using in conjunction with the WWMM plugin by Ollie Jones to manage the ID3 tag mapping to WP meta fields.

      Any help on this would be appreciated!

      Cheers,
      John

  57. Hi there,

    Where might I add the the_audio(‘list’) in my Theme code if I do not want to use shortcode? Theme functions, style.css, etc?

  58. 1st off THANKS SO MUCH this is a lifesaver!!! I did a lot of CSS styling and love the way I set up here: http://www.theviralz.com/ Secondly, I’m having a problem utilizing the artist function. My player shows the title for now playing then “by” and then blank… my theme has NO META DATA related to ‘track.artist’. I tried adding a custom field… but didn’t know what to name it. Lastly, I would REALLY like to get a ‘back’ button up there and can’t seem to place it correctly. Did you hide it? 🙂

Comments are closed.