SoundManager 2 & WordPress
April 29th
This is the first in what will be many posts explaining various bits of code that I’ve been working on for this — and other — websites. This post will detail how to get SoundManager 2 working with WordPress — and how you can have unobtrusive and stylish links to play MP3’s directly from your blog posts.
And just as an example, this is what we’re going to be working toward:
(make sure to click on it a few times to see the various states)
First up, you’re going to want to download SoundManager 2 from the website (click on “Download SoundManager 2″). You’ll then need to unzip the folder that you’ve downloaded, and I would suggest renaming it to something like “soundmanager2” while you’re at it. Then go ahead and upload the entire folder to your base directory (I’m going to assume here that if you have WordPress up and running properly, then you’re familiar with the ins and outs of FTP).
You can now navigate to http://yourwebsite.com/soundmanager2 (make sure to change “yourwebsite.com” to your actual domain!) and see if everything’s working. I’d also recommend checking http://yourwebsite.com/soundmanager2/doc/getstarted/index.html#troubleshooting to verify that you have no SM2 start-up problems. If you do have any problems with your install at this point with I’d recommend visiting the discussion forums for SoundManager 2.
I’ll assume that everything is running fine, so you can now see just what we’re going to be using for our unobtrusive MP3 playable links at http://yourwebsite.com/soundmanager2/demo/play-mp3-links/basic.html. Try clicking around a little to get an idea of just how it all works.
Now we’re going to start moving some files around. Firstly though, I have various directories within my current theme folder to better organise all my code. These are /js/, /css/, /images/, /mp3/ and /mp3/. Obviously everybody has different ways that they feel work better for them, so if you have your directory laid out a little differently to mine then put the files were you would prefer and update the latter links accordingly.
There are 4 files that we will be moving from the /soundmanager2/ directory — so navigate 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 “yourtheme” with your current theme name). We will then copy the javascript 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 following 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 WordPress in the base directory of your website, if you have not done this then you will need to add the directory name for your WordPress installation before /wp-content/, also — remember to again change “yoursite” and “yourtheme” to the appropriate names).
The first file you need to modify is /wp-content/themes/yourtheme/js/inlineplayer.js. Scroll all the way to the bottom and you will see:
soundManager.url = '../../swf/'; // path to directory containing SM2 SWF
This needs to be changed to the absolute directory 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 giving the link a line-height of 18 pixels, this is to properly align the MP3 playable link to the horizontal baseline that is running throughout the website. Make sure that you replace the current 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 commented, 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 website better.
And now we’re ready to add a playable mp3 link to any blog post we choose! Simply add the code below to a post — making 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 playable link that looks much the same as the one I posted at the beginning of the article.
You can now turn off debugging mode by finding the following line near the bottom 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 questions in the comments section below.






Geo, I’d recommend changing the path in inline-player.js to an absolute url (ie. http://example.com/.…..) as mentioned in the tutorial. That will likely fix your problem.
Ryan on January 20th, 2010.
Having probs.
I’ve uploaded the entire Sound Manager folder to my root. (It’s a host with a few domains actually..it’s a URL that points to a folder). I’ve navigated to the demo’s in that folder. They work fine.
Meanwhile, in my wp-content->theme->my theme directory I’ve copied the soundmanager2.js file and the inline-player.js to a JS folder in my theme directory. 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 getting errors everytime:
- SoundManager 2 failed to load (security/load error) –
soundManager.disable(): Shutting down
soundManager: Failed to initialise.
soundManager: Verify that ./soundmanager2.swf is a valid path.
soundManager: No Flash response within reasonable time after document load. Likely causes: Loading soundmanager2.swf may have failed (and/or Flash 8+ not present?), Flash blocked or JS-Flash security error
soundManager: Getting impatient, still waiting for Flash…
soundManager._initMovie(): Waiting for ExternalInterface call from Flash..
soundManager._createMovie(): Trying to load ./soundmanager2.swf
– SoundManager 2 V2.95b.20100101 (AS2/Flash 8), normal polling -
The things that is crazy is I uploaded the Troubleshoot folder to the themes directory and it seems to work and everything checks out.
Suggestions would be awesome.
Geo on January 20th, 2010.
I’m afraid that I haven’t given it a go. Does it work for MP3 files?
I’d recommend having a look at the example page for M4A files. If worst comes to worst you could always convert your files to MP3.
Ryan on December 7th, 2009.
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?
The House of Husar on December 7th, 2009.
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 correctly 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 having problems with it I’ll see if I can get a tutorial up in the next few days.
Ryan on September 22nd, 2009.
Wow, this is amazing. It’s also very frustrating.
I’d like to create a playlist on my wordpress blog (I’m self-hosting and in the process of switching 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 trying to create a playlist that a) starts the next song automatically, and b) has some sort of progress bar.
In the meantime I’ll use this way, thank you so much.
Brian Park on September 22nd, 2009.
Hi Ryan, have tried that. I think there has to be something about IE7 in the way it can’t resolve overlapping css styles [ tag in particular], if all other browsers can manage this. In fact even in the WordPress audio player [another swf app], apparently IE cannot handle streaming mp3s. Strange thing is, I used to use the original Inline mp3 plugin by Joep Vermaat until a recent NextGen Gallery upgrade conflicted with it, but this used to stream mp3s ok when I turned NGG off.
steve on June 16th, 2009.
Well, looking at the output, IE seems to be loading everything up fine anyway, and I assume that you replaced your domain with http://www.mysite.co.uk in the output there.
If trying to force streaming doesn’t work then I’d turn off everything that I can that might be causing a conflict within WP (as well as all styles), and starting from there.
Ryan on June 16th, 2009.
Hi Ryan,
have given this some further thought and have a hunch this has to be some sort of conflict within WP plugins as works fine in IE on root of my server — strange it doesn’t correct itself when all others are disabled though.
Do you think therefore, if I specify an AddType handler in an .htaccess file to force mp3 streaming within the swf that may work?
steve on June 16th, 2009.
OK — worked that one out! Here’s the output from IE7 & then Chrome, which does work:
IE7:
Chrome:
Powered by WordPress. Theme: Aeros [modified].
steve on June 15th, 2009.
If you don’t have any styling for the debug mode (and I assume you don’t or you would see it in a box in the bottom left, the same as the demo page) then it will appear at the bottom of the page, below all your content.
Ryan on June 15th, 2009.
Hi Ryan,
I don’t — where would debug output be displayed when switched on? Only I’d prefer it not to show up for too long.
steve on June 15th, 2009.
Steve,
Do you have debugMode on? That should tell you if anything is going wrong anywhere, and give you a little idea of just where you should start looking.
Ryan on June 15th, 2009.
..ignore the last post; I’d upgraded to Flash Player 10 & by default they were being assigned to Winamp! All styling looks fine now but still not playing mp3 inline :(
steve on June 15th, 2009.
One last caveat; I’d noticed that within my theme that when I tried to place an instance of SM2 within a comment, the formatting was different [possibly the UL tag] and still didn’t play the mp3 inline. Even though it appears not to work on regular pages, I just removed all of the comment instances & now the ‘play’ image does not appear in IE but does in Chrome. Weird stuff!
steve on June 15th, 2009.
Oh, forgot to mention; IE works fine on the demo page which comes with SM2, both locally & remotely, so assume it has to be a conflict of either style sheets or scripts happening somewhere within WordPress? Have tried moving the position of the SM2 code in the section of theme, to no effect. I can only think one of the other plugins is overriding SM2 css..
steve on June 15th, 2009.
Hi Ryan,
I’m using IE7 on Vista but know it happens on a friend’s machine on XP running IE8, so know it’s not just a local prob. I read within the css file that there was a possible issue with IE on the SM2_default behavior and wondered whether this could be it as the styling 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.
steve on June 15th, 2009.
Hi Steve,
First up, what version of IE are you having the problem with? I’d visit the demo on Schillmania and make sure that it’s not a problem with your system (ie. you don’t have at least Flash 8 installed, or have modified IE to be more restrictive). And lastly, you say that you think it’s the style sheet, is that because you are not seeing the mp3’s styled properly?
Ryan on June 14th, 2009.
Hi Ryan,
Thanks for the great tutorial. I’m having probs with IE not playing my mp3s inline and launching an application to handle this. Got a hunch the style sheet is conflicting with other plugins but even after de-activating these in WordPress, still get the same outcome. Works fine in Chrome, Firefox & PC Safari.
Any thoughts?
steve on June 14th, 2009.
@Patrick — No problem, glad that I could help.
Ryan on June 6th, 2009.
Hi Ryan,
Good to know I’m not missing some obvious way of changing things! I’ll stick with editing inlineplayer for now, because the API looks a bit complex. Thanks very much for your help.
Patrick Harris on June 6th, 2009.
Hi Patrick,
If you’re wanting for this to happen every time you call inline player then you could easily enough edit inlineplayer.js to reflect that, but I don’t think that’s what you’re asking here.
I’d recommend not using inlineplayer.js, and instead setting up your own player using the SoundManager 2 API, which has a variety of pre-made functions for you to mess around with. If you check out Demo 15 you will see the code for an autoPlay function that could be easily enough adapted.
Thanks for your comment.
Ryan on June 4th, 2009.
Thanks for any help!
Patrick Harris on June 4th, 2009.
Hi Ryan, do you have any idea how I can change some of the config settings when I create an instance of the player with the inlineplayer.js?
In other words, I want to be able to do this:
inlinePlayer = new InlinePlayer(config = {
playNext: false,
autoPlay: true
});
Patrick Harris on June 4th, 2009.
First up, thanks for your comment.
Your first point is a very good one, something that I forgot in the time since I got it up and running and the time that I wrote this tutorial — I’ve updated the post to reflect this. I’ve also added that you should be replacing the code rather than appending it. However, your third point was a deliberate choice by me as I figured it would be less confusing.
Thanks again for the comment, I’m glad that you found this tutorial helpful.
Ryan on May 15th, 2009.
Finally, someone else out there is trying to integrate these two amazing programs. It seems like an obvious perfect match that I was surprised there was no plugin for WordPress already. I spent several hours trying to use SM2 on my existing blog and got it to work for a while, but I ended up forgetting how I got it to work and gave up until now.
I thought I would mention a few things missing from your tutorial:
- you don’t mention that the path to the SWF needs to be modified within “inlineplayer.js”. The relative path that the demo uses will lead you to a non-existent directory in most cases. I have never gotten it to work with a relative path, so I just did an absolute path.
- your CSS instructions don’t specify whether to append to or replace the existing style attributes. Not very important, but a relative novice might not know whether to add or to replace.
- the links to the yourwebsite.com pages clearly link to “yourwebsite.com”. Just a suggestion, maybe you could link them to your /soundmanager directory within superpositionkitty.com
Anyway, thanks for doing this, it helped me easily configure my blog for SM2 without much pain. And always glad to see that there is life in Dundee after Billy Mackenzie!
Matthew
Anyway, thank you for doing this.
Matthew Rutledge on May 15th, 2009.