SoundManager 2 & WordPress

UPDATE: There is now a new post detail­ing how to use a Muxtape-style UI with Word­Press here.

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.

27 Responses

  1. Any tip on how to use ui360 please ?
    thanks a lot

    2. mika on .

  2. 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.

    3. Ryan on .

  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 .

  4. 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.

    5. Ryan on .

  5. 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?

    6. The House of Husar on .

  6. 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.

    7. Ryan on .

  7. 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.

    8. Brian Park on .

  8. 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.

    9. steve on .

  9. 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.

    10. Ryan on .

  10. 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?

    11. steve on .

  11. 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) --

    12. steve on .

  12. 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.

    13. Ryan on .

  13. 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.

    14. steve on .

  14. 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.

    15. Ryan on .

  15. ..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 :(

    16. steve on .

  16. 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!

    17. steve on .

  17. 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..

    18. steve on .

  18. 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.

    19. steve on .

  19. 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?

    20. Ryan on .

  20. 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?

    21. steve on .

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

    22. Ryan on .

  22. 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.

    23. Patrick Harris on .

  23. 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.

    24. Ryan on .

  24. Thanks for any help!

    25. Patrick Harris on .

  25. 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
    });

    26. Patrick Harris on .

  26. 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.

    27. Ryan on .

  27. 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.

    28. Matthew Rutledge on .


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

Latest Posts


Recent Comments


Related Posts