This is the first in what will be many posts explain­ing vari­ous bits of code that I’ve been work­ing on for this — and other — web­sites. This post will detail how to get Sound­Man­ager 2 work­ing with Word­Press — and how you can have unob­trus­ive and styl­ish links to play MP3’s dir­ectly from your blog posts.

And just as an example, this is what we’re going to be work­ing toward:

(make sure to click on it a few times to see the vari­ous states)

First up, you’re going to want to down­load Sound­Man­ager 2 from the web­site (click on “Down­load Sound­Man­ager 2″). You’ll then need to unzip the folder that you’ve down­loaded, and I would sug­gest renam­ing it to some­thing like “soundmanager2” while you’re at it. Then go ahead and upload the entire folder to your base dir­ect­ory (I’m going to assume here that if you have Word­Press up and run­ning prop­erly, then you’re famil­iar with the ins and outs of FTP).

You can now nav­ig­ate to http://yourwebsite.com/soundmanager2 (make sure to change “yourwebsite.com” to your actual domain!) and see if everything’s work­ing. I’d also recom­mend check­ing http://yourwebsite.com/soundmanager2/doc/getstarted/index.html#troubleshooting to verify that you have no SM2 start-up prob­lems. If you do have any prob­lems with your install at this point with I’d recom­mend vis­it­ing the dis­cus­sion for­ums for Sound­Man­ager 2.

I’ll assume that everything is run­ning fine, so you can now see just what we’re going to be using for our unob­trus­ive MP3 play­able links at http://yourwebsite.com/soundmanager2/demo/play-mp3-links/basic.html. Try click­ing around a little to get an idea of just how it all works.

Now we’re going to start mov­ing some files around. Firstly though, I have vari­ous dir­ect­or­ies within my cur­rent theme folder to bet­ter organ­ise all my code. These are /js/, /css/, /images/, /mp3/ and /mp3/. Obvi­ously every­body has dif­fer­ent ways that they feel work bet­ter for them, so if you have your dir­ect­ory laid out a little dif­fer­ently to mine then put the files were you would prefer and update the lat­ter links accordingly.

There are 4 files that we will be mov­ing from the /soundmanager2/ dir­ect­ory — so nav­ig­ate there first. Then copy the two .swf files (“soundmanager2.swf” and “soundmanager2_flash9.swf”) from /soundmanager2/swf/ to /wp-content/themes/yourtheme/swf/ (make sure to replace “your­theme” with your cur­rent theme name). We will then copy the javas­cript file from /soundmanager2/demo/play-mp3-links/script/inlineplayer.js to /wp-content/themes/yourtheme/js/, and also the css file from /soundmanager2/demo/play-mp3-links/css/inlineplayer.css to /wp-content/themes/yourtheme/css/.

You will then have to add the fol­low­ing code to your header in-between the <head> and </head> tags:

<link rel="stylesheet" href="http://yoursite.com/wp-content/themes/yourtheme/css/inlineplayer.css" type="text/css" media="screen" />

<script type="text/javascript" src="http://yoursite.com/wp-content/themes/yourtheme/js/soundmanager2.js"></script>
<script type="text/javascript" src="http://yoursite.com/wp-content/themes/yourtheme/js/inlineplayer.js"></script>

(note that the above code assumes that you have installed Word­Press in the base dir­ect­ory of your web­site, if you have not done this then you will need to add the dir­ect­ory name for your Word­Press install­a­tion before /wp-content/, also — remem­ber to again change “yoursite” and “your­theme” to the appro­pri­ate names).

The first file you need to modify is /wp-content/themes/yourtheme/js/inlineplayer.js. Scroll all the way to the bot­tom and you will see:

soundManager.url = '../../swf/'; // path to directory containing SM2 SWF

This needs to be changed to the abso­lute dir­ect­ory of your SWF file as below:

soundManager.url = 'http://yoursite.com/wp-content/themes/yourtheme/swf/'; // path to directory containing SM2 SWF

Next is to modify the css file /wp-content/themes/yourtheme/css/inlineplayer.css. Note that for the example below I’m giv­ing the link a line-height of 18 pixels, this is to prop­erly align the MP3 play­able link to the hori­zontal baseline that is run­ning through­out the web­site. Make sure that you replace the cur­rent code in the file with this:

ul.flat	{
	list-style-type:none;
	padding-left: 0px;
	font-size: 10px;
	text-transform: uppercase;
	color: #222;
	padding-bottom: 18px;	}

ul.flat li	{
	padding-bottom: 0px;	}

ul.flat	li	a	{
	display: inline-block;
	padding: 0px 0px 0px 0px;	}

ul.flat	a.sm2_link	{
	/* default state: "a playable link" */
	border-left: 9px solid #222;
	padding-left: 9px;
	padding-right: 9px;	}

ul.flat	a.sm2_link:hover	{
	/* default (inactive) hover state */
	border-left-color: #34B0F8;
	color: #222;	}

ul.flat a.sm2_playing	{
	/* "now playing" */
	border-left-color: #34B0F8;
	color: #34B0F8;
	text-decoration: none;	}

ul.flat a.sm2_playing:hover,
ul.flat a.sm2_paused:hover	{
	/* "clicking will now pause/resume" */
	border-left-color: #34B0F8;	}

ul.flat a.sm2_paused	{
	/* "paused state" */
	border-left-color: #CCC;
	text-decoration: none;	}

As the code is com­men­ted, it should all be pretty self-explanatory what class does what. Note that I’m using the “flat” styles here as a base, and not the “graphic” styles as I feel it suits the style of our web­site better.

And now we’re ready to add a play­able mp3 link to any blog post we choose! Simply add the code below to a post — mak­ing sure to edit as necessary:

<ul class="flat">
<li><a href="http://yoursite.com/wp-content/themes/yourtheme/mp3/songtitle.mp3">Artist - Title</a></li>
</ul>

Now if you’ve done everything right, then you should have a play­able link that looks much the same as the one I pos­ted at the begin­ning of the article.

You can now turn off debug­ging mode by find­ing the fol­low­ing line near the bot­tom of /wp-content/themes/yourtheme/js/inlineplayer.js:

soundManager.debugMode = true; // disable or enable debug output

Make sure to replace this with soundManager.debugMode = false;.

Feel free to post any addendum’s or ques­tions in the com­ments sec­tion below.

26 Responses

  1. Geo, I’d recom­mend chan­ging the path in inline-player.js to an abso­lute url (ie. http://example.com/.…..) as men­tioned in the tutorial. That will likely fix your problem.

  2. Ryan on January 20th, 2010.

  3. Hav­ing probs.

    I’ve uploaded the entire Sound Man­ager folder to my root. (It’s a host with a few domains actually..it’s a URL that points to a folder). I’ve nav­ig­ated to the demo’s in that folder. They work fine.

    Mean­while, in my wp-content->theme->my theme dir­ect­ory I’ve copied the soundmanager2.js file and the inline-player.js to a JS folder in my theme dir­ect­ory. Also, I copied the two SWFs to a folder SWF in the themes directory.

    In the inline-player.js I changed the default ‘../../swf/’ to ‘../swf/’. Both JS files are added to the head.

    I am get­ting errors everytime:

    - Sound­Man­ager 2 failed to load (security/load error) –
    soundManager.disable(): Shut­ting down
    sound­Man­ager: Failed to ini­tial­ise.
    sound­Man­ager: Verify that ./soundmanager2.swf is a valid path.
    sound­Man­ager: No Flash response within reas­on­able time after doc­u­ment load. Likely causes: Load­ing soundmanager2.swf may have failed (and/or Flash 8+ not present?), Flash blocked or JS-Flash secur­ity error

    sound­Man­ager: Get­ting impa­tient, still wait­ing for Flash…
    soundManager._initMovie(): Wait­ing for Extern­al­In­ter­face call from Flash..
    soundManager._createMovie(): Try­ing to load ./soundmanager2.swf
    – Sound­Man­ager 2 V2.95b.20100101 (AS2/Flash 8), nor­mal polling -

    The things that is crazy is I uploaded the Troubleshoot folder to the themes dir­ect­ory and it seems to work and everything checks out.

    Sug­ges­tions would be awesome.

  4. Geo on January 20th, 2010.

  5. I’m afraid that I haven’t given it a go. Does it work for MP3 files?

    I’d recom­mend hav­ing a look at the example page for M4A files. If worst comes to worst you could always con­vert your files to MP3.

  6. Ryan on December 7th, 2009.

  7. Have you been able to get m4a files to play with you setup? No luck here. I have edited the soundmanger2.js and set the player to 9 and this.useMovieStar = true;. Still no luck.

    Any ideas?

  8. The House of Husar on December 7th, 2009.

  9. It shouldn’t be too hard to do Brian.

    From a quick look at the basic Page Player demo what you’re going to need is page-player.css and page-player.js. These will replace inlineplayer.js and inlineplayer.css from the tutorial (so make sure you link to them in your header cor­rectly too).

    Then view the source on the demo and copy everything between the first and last div tags. Paste that into a new post and make sure to change the .mp3 links to wherever yours are and you should be good to go.

    If you’re still hav­ing prob­lems with it I’ll see if I can get a tutorial up in the next few days.

  10. Ryan on September 22nd, 2009.

  11. Wow, this is amaz­ing. It’s also very frustrating.

    I’d like to cre­ate a playl­ist on my word­press blog (I’m self-hosting and in the pro­cess of switch­ing over), and this is SO CLOSE to what I need.

    Is there a chance you could update this tutorial to show how to do the same thing but with the page-player.js ??

    I’m try­ing to cre­ate a playl­ist that a) starts the next song auto­mat­ic­ally, and b) has some sort of pro­gress bar.

    In the mean­time I’ll use this way, thank you so much.

  12. Brian Park on September 22nd, 2009.

  13. Hi Ryan, have tried that. I think there has to be some­thing about IE7 in the way it can’t resolve over­lap­ping css styles [ tag in par­tic­u­lar], if all other browsers can man­age this. In fact even in the Word­Press audio player [another swf app], appar­ently IE can­not handle stream­ing mp3s. Strange thing is, I used to use the ori­ginal Inline mp3 plu­gin by Joep Ver­maat until a recent Nex­t­Gen Gal­lery upgrade con­flic­ted with it, but this used to stream mp3s ok when I turned NGG off.

  14. steve on June 16th, 2009.

  15. Well, look­ing at the out­put, IE seems to be load­ing everything up fine any­way, and I assume that you replaced your domain with http://www.mysite.co.uk in the out­put there.

    If try­ing to force stream­ing doesn’t work then I’d turn off everything that I can that might be caus­ing a con­flict within WP (as well as all styles), and start­ing from there.

  16. Ryan on June 16th, 2009.

  17. Hi Ryan,
    have given this some fur­ther thought and have a hunch this has to be some sort of con­flict within WP plu­gins as works fine in IE on root of my server — strange it doesn’t cor­rect itself when all oth­ers are dis­abled though.

    Do you think there­fore, if I spe­cify an AddType hand­ler in an .htac­cess file to force mp3 stream­ing within the swf that may work?

  18. steve on June 16th, 2009.

  19. OK — worked that one out! Here’s the out­put from IE7 & then Chrome, which does work:

    IE7:

    inlinePlayer.init()
    soundManager.initComplete(): calling soundManager.onload()
    -- SoundManager 2 loaded (OK) --
    (Flash): Enabling polling
    Flash security sandbox type: remote
    (Flash): _externalInterfaceTest(): JS to/from Flash OK
    Attempting to call Flash from JS..
    -- soundManager.init() --
    soundManager._initMovie(): Waiting for ExternalInterface call from Flash..
    soundManager._initMovie(): Got OBJECT element (created via JS)
    soundManager._createMovie(): Trying to load http://www.mysite.co.uk/wp-content/themes/aeros/swf/soundmanager2.swf
    -- SoundManager 2 V2.95a.20090501 (AS2/Flash 8) --
    

    Chrome:
    Powered by Word­Press. Theme: Aeros [modified].

    soundManager.onload() complete
    inlinePlayer.init(): Found 57 relevant items.
    inlinePlayer.init()
    soundManager.initComplete(): calling soundManager.onload()
    -- SoundManager 2 loaded (OK) --
    (Flash): Enabling polling
    Flash security sandbox type: remote
    (Flash): _externalInterfaceTest(): JS to/from Flash OK
    Attempting to call Flash from JS..
    -- soundManager.init() --
    soundManager._externalInterfaceOK()
    (Flash): Flash to JS OK
    soundManager._initMovie(): Waiting for ExternalInterface call from Flash..
    soundManager._initMovie(): Got EMBED element (created via JS)
    soundManager._createMovie(): Trying to load http://www.mysite.co.uk/wp-content/themes/aeros/swf/soundmanager2.swf
    -- SoundManager 2 V2.95a.20090501 (AS2/Flash 8) --
    
  20. steve on June 15th, 2009.

  21. If you don’t have any styl­ing for the debug mode (and I assume you don’t or you would see it in a box in the bot­tom left, the same as the demo page) then it will appear at the bot­tom of the page, below all your content.

  22. Ryan on June 15th, 2009.

  23. Hi Ryan,
    I don’t — where would debug out­put be dis­played when switched on? Only I’d prefer it not to show up for too long.

  24. steve on June 15th, 2009.

  25. Steve,

    Do you have debug­Mode on? That should tell you if any­thing is going wrong any­where, and give you a little idea of just where you should start looking.

  26. Ryan on June 15th, 2009.

  27. ..ignore the last post; I’d upgraded to Flash Player 10 & by default they were being assigned to Win­amp! All styl­ing looks fine now but still not play­ing mp3 inline :(

  28. steve on June 15th, 2009.

  29. One last caveat; I’d noticed that within my theme that when I tried to place an instance of SM2 within a com­ment, the format­ting was dif­fer­ent [pos­sibly the UL tag] and still didn’t play the mp3 inline. Even though it appears not to work on reg­u­lar pages, I just removed all of the com­ment instances & now the ‘play’ image does not appear in IE but does in Chrome. Weird stuff!

  30. steve on June 15th, 2009.

  31. Oh, for­got to men­tion; IE works fine on the demo page which comes with SM2, both loc­ally & remotely, so assume it has to be a con­flict of either style sheets or scripts hap­pen­ing some­where within Word­Press? Have tried mov­ing the pos­i­tion of the SM2 code in the sec­tion of theme, to no effect. I can only think one of the other plu­gins is over­rid­ing SM2 css..

  32. steve on June 15th, 2009.

  33. Hi Ryan,
    I’m using IE7 on Vista but know it hap­pens on a friend’s machine on XP run­ning IE8, so know it’s not just a local prob. I read within the css file that there was a pos­sible issue with IE on the SM2_default beha­vior and wondered whether this could be it as the styl­ing appears to be OK [am using the graphic example class] but when you click on the link it launches an external app to play the mp3.

  34. steve on June 15th, 2009.

  35. Hi Steve,

    First up, what ver­sion of IE are you hav­ing the prob­lem with? I’d visit the demo on Schill­mania and make sure that it’s not a prob­lem with your sys­tem (ie. you don’t have at least Flash 8 installed, or have mod­i­fied IE to be more restrict­ive). And lastly, you say that you think it’s the style sheet, is that because you are not see­ing the mp3’s styled properly?

  36. Ryan on June 14th, 2009.

  37. Hi Ryan,
    Thanks for the great tutorial. I’m hav­ing probs with IE not play­ing my mp3s inline and launch­ing an applic­a­tion to handle this. Got a hunch the style sheet is con­flict­ing with other plu­gins but even after de-activating these in Word­Press, still get the same out­come. Works fine in Chrome, Fire­fox & PC Safari.

    Any thoughts?

  38. steve on June 14th, 2009.

  39. @Patrick — No prob­lem, glad that I could help.

  40. Ryan on June 6th, 2009.

  41. Hi Ryan,

    Good to know I’m not miss­ing some obvi­ous way of chan­ging things! I’ll stick with edit­ing inline­player for now, because the API looks a bit com­plex. Thanks very much for your help.

  42. Patrick Harris on June 6th, 2009.

  43. Hi Patrick,

    If you’re want­ing for this to hap­pen every time you call inline player then you could eas­ily enough edit inlineplayer.js to reflect that, but I don’t think that’s what you’re ask­ing here.

    I’d recom­mend not using inlineplayer.js, and instead set­ting up your own player using the Sound­Man­ager 2 API, which has a vari­ety of pre-made func­tions for you to mess around with. If you check out Demo 15 you will see the code for an auto­Play func­tion that could be eas­ily enough adapted.

    Thanks for your comment.

  44. Ryan on June 4th, 2009.

  45. Thanks for any help!

  46. Patrick Harris on June 4th, 2009.

  47. Hi Ryan, do you have any idea how I can change some of the con­fig set­tings when I cre­ate an instance of the player with the inlineplayer.js?

    In other words, I want to be able to do this:
    inline­Player = new InlinePlayer(config = {
    playNext: false,
    auto­Play: true
    });

  48. Patrick Harris on June 4th, 2009.

  49. First up, thanks for your comment.

    Your first point is a very good one, some­thing that I for­got in the time since I got it up and run­ning and the time that I wrote this tutorial — I’ve updated the post to reflect this. I’ve also added that you should be repla­cing the code rather than append­ing it. How­ever, your third point was a delib­er­ate choice by me as I figured it would be less confusing.

    Thanks again for the com­ment, I’m glad that you found this tutorial helpful.

  50. Ryan on May 15th, 2009.

  51. Finally, someone else out there is try­ing to integ­rate these two amaz­ing pro­grams. It seems like an obvi­ous per­fect match that I was sur­prised there was no plu­gin for Word­Press already. I spent sev­eral hours try­ing to use SM2 on my exist­ing blog and got it to work for a while, but I ended up for­get­ting how I got it to work and gave up until now.

    I thought I would men­tion a few things miss­ing from your tutorial:

    - you don’t men­tion that the path to the SWF needs to be mod­i­fied within “inlineplayer.js”. The rel­at­ive path that the demo uses will lead you to a non-existent dir­ect­ory in most cases. I have never got­ten it to work with a rel­at­ive path, so I just did an abso­lute path.

    - your CSS instruc­tions don’t spe­cify whether to append to or replace the exist­ing style attrib­utes. Not very import­ant, but a rel­at­ive novice might not know whether to add or to replace.

    - the links to the yourwebsite.com pages clearly link to “yourwebsite.com”. Just a sug­ges­tion, maybe you could link them to your /soundmanager dir­ect­ory within superpositionkitty.com

    Any­way, thanks for doing this, it helped me eas­ily con­fig­ure my blog for SM2 without much pain. And always glad to see that there is life in Dun­dee after Billy Mackenzie!

    Mat­thew

    Any­way, thank you for doing this.

  52. Matthew Rutledge on May 15th, 2009.


Leave a Reply

Details

'SoundManager 2 & WordPress' was posted on April 29th, 2009 in the Category: Tutorials.

You can subscribe to the comments on this post, or post a comment of your own



Related Posts

About Us

SuperpositionKitty is Ryan Smith & Jennifer Smith. Based in Australia, but operating out of the United Kingdom, they have been working together since roughly the turn of the century. Read More…

Get In Touch

You can get in touch with Ryan at ryan@superpositionkitty.com, or Jen at jen@superpositionkitty.com. If you have any questions, feedback, or suggestions for the website, then you can contact us at collective.

CompleteTrimmedSecond FrameAll SidesGluedGluing

Currently Saying

Jen:  Ryan: