How to host and stream your own mp3s with JW media player

by Shane Perris on Thursday, 22 May, 2008

in how-to,tutorials

Note: this tutorial was for version 3.15 of JWPlayer. It is now up to v4.2. The customisation wizard may or may not work with v3.15. An older version of this post demonstrated the customisation by changing colors. However, that code no longer works and has been removed. Hopefully I will provide an updated tutorial soon.

While using someone else’s media player to stream mp3s hosted on your site can be fun (see the tutorials on how to use the Google Reader player and how to use the Yahoo media player), nothing quite beats the thrill of rolling your own media player and controlling it on your own server. Below are some simple steps anyone can take to use the free jwplayer from Jeroen Wijering.

JW FLV Media Player

The JW FLV Media Player is the brainchild of Jeroen Wijering. It is made with Adobe Flash technology and will play not only flv files but any other media format supported by Flash, including our self-hosted mp3. You can get the jw flv media player up and running with a few simple steps:

  1. Download the source files for the media player from here
  2. Unzip the source files and upload them to your own hosted server. I created a new folder on my account called ‘mediaplayers’ and then created another folder called ‘jwplayer’. Take note of the location of the files as you will need this later.
  3. Go to the jw flv media player setup wizard
  4. The JW Media Player configuration wizardConfigure the wizard as desired.  I’ve included a screenshot of my wizard configuration and I’ve kept it very basic. The wizard lets you do things such as change colour, size, add playlists (if you have those set up already), add a stop button – stacks of features all up.  When you’re finished configuring, click the ‘Update and preview code’ button to see what your player will look like and the code you need to cut and paste into your own site.As a quick explanation, the ‘source’ option is where you have uploaded the media player files on your server and the file option is where you have stored your mp3.  Also, the ideal height for the slim player is 20 pixels (the default setting) for a single mp3.  Larger sizes are useful for when you have a playlist of tracks you want to display.
  5. Copy and past the code into your webpage.  As an example, the code generated from my options is:
    <embed src="" width="440" height="20" allowscriptaccess="always" allowfullscreen="true" flashvars="height=20&width=440&file=" />

Embedded, the final version looks like this:

And If you are having problems with the embed code (for example, the code shows up as standard text in your blog), try removing all the line returns and replacing them with a single space instead. Also, for some reason that escapes me (but you clever bunch out there probably know), you need to have a space between the end of the code and the closing “/>”.


How to stream mp3s with Yahoo Media Player

by Shane Perris on Wednesday, 16 April, 2008

in how-to,tutorials

A nod of the head to Amit at Digital Inspiration for pointing me in the right direction for the Yahoo Media Player with his post “How to embed mp3 audio files in web pages”.

There are two versions to the Yahoo Media Player – a javascript based version and a Flash based version.

For the javascript version, first you need to link to the file. For example:

<a href=”″>31_Ghosts_IV</a> which looks like:


Then, you insert the javascript for the media player somewhere on the page:

<script src="" type="text/javascript"></script>

After that, a little ‘play’ button should appear next to your media file link. Click the button and the player launches.

This method has occasionally been reported to not work on self-hosted WordPress blogs like this one. To get the Yahoo Media Player to work in WordPress if the above method hasn’t worked, try inserting the script tag in your header file.

You will also notice that off to the left hand side is the miniaturised version of the player which you can also launch just by clicking on it.

Using Yahoo Media Flash Player

Yahoo also offer a Flash player with a handy Yahoo flash player configurator at You plug in the url of the page or file, choose some options such as colour, size, autoplay or rounded corners and it will generate the Flash embed code for you. My configured player looks like this:


Stream your own mp3s with the Google Reader player

by Shane Perris on Saturday, 29 March, 2008

in how-to,tutorials

Many of you will, at some stage of your life, want to host and stream your own mp3 file of some sort. Some of you will want to host a podcast (egads! don’t do that on your own sever! Use a content distribution network or risk having your bandwidth devastated the minute you get popular…), link to a one-off interview or just link to a sound file you think is kind of cool.

There are options, of course. Services like the micro-blogging platform Tumblr support this feature natively. You could also use a free podcasting hosting service such Odeo. However, the true hard core amongst us all (you can spot them if you look – just follow the tell tale trail of corn chip crumbs and hints of wispy neck beards) will want to host their own sound files and damn the bandwidth consequences. If you are an apprentice hard core (don’t worry if you can’t grown a decent neck beard – I feel your pain, I really do), this post is for you.

I am going to make a few big assumptions:

  • you have sufficient access to your own webserver to upload the mp3
  • you have sufficient access to your webpage so that you can either embed flash objects or add javascript
  • you actually have some sort of reason to do this (‘Because I can!’ is reason enough)

The file I have chosen to use as an example is 31 Ghosts IV (available under a Creative Commons 3.0 Attribution, Non-Commercial license).

Note: Please don’t link directly to my mp3 file for your own testing purposes or listening pleasure. My hosting services provider won’t appreciate it, and I could do without the excess usage bill. Thanks.

Using Google Reader Flash Player

A big thank you to Eduardo Salguero for the heads up on how to access the mp3 player used in Google Reader.

This method takes advantage of IFRAMES. IFRAMES have been the cause of a number of web browser vulnerabilities over the years (too many to link to – try this Google search for iframe vulnerabilities). However, don’t let that you stop you!

All you need to do is paste the following code into your site:

<iframe style="border: 1px solid rgb(170, 170, 170); width:400px; height: 27px;" id="musicPlayer" src=""> </iframe>

In the above code is the phrase “audioURL”. This is the sound file you want to link to. In my case, this is The code becomes:

<iframe style="border: 1px solid rgb(170, 170, 170); width:400px; height: 27px;" id="musicPlayer" src=""> </iframe>

The final result of the above code looks like this:

This may not work inside of Internet Explorer 7. I’m still investigating why this is the case.  (Note, in checking back, I’ve had even more trouble. I have been unable to get this method of embedding Google Reader’s audio player to work in Internet Explorer 7 and FireFox 3. It does work in Chrome, Opera 9.5 and Safari 3).

As you can see, the Google Reader player has a minimalist interface – fast forward, play/pause, rewind, a ‘scrub’ function to skip directly to where you want to be in the song, a timer and a volume slider. It also has that slick, bubbly Google interface which can be a nice addition to a site that already has a minimalist aesthetic overall. There aren’t any extra features that you don’t need.

One downside is that the interface isn’t configurable at all. There doesn’t even appear to be anywhere in the code that you can fiddle around to change colours. This is not surprising as you are pulling the files for the flash player interface straight off the Google servers.

Coming Up…

Google Reader isn’t the only option. In the coming weeks I will also look at how to use other hosted media players as well as a couple of options for hosting not just your own mp3s but your own media player as well.


Joomla! is a free and open source content management system with just about everything a webmaster could ask for.  Originally created as a fork of the Mambo content management system (see how to install Mambo on Windows for more information on Mambo), Joomla! has since grown to become a full system in its own right including static pages, blogs, polls, RSS feeds, printable page versions and language internationalisaton.

Joomla! is simple to install and can be administered quite easily from the browser-based web interface.

Below is a 17min screencast that will walks through the step-by-step process to install Joomla! on your local Windows machine with the aid of the XAMPP server stack.

Show Notes

Joomla! requires PHP and MySQL.  If you follow the tutorial on how to install XAMPP on your local machine, all your bases will be covered.

Official Joomla! webpage

Free Joomla! Templates – listing of “free templates” category on the official Joomla! website


Local Development: Installing Mambo

by Shane Perris on Friday, 29 February, 2008

in how-to,tutorials

Mambo is an open source Content Management System (CMS) that was originally developed in Australia as a commercial application in 2000 and was subsequently released to the open source community.  It takes advantage of the traditional Apache/MySQL/PHP stack which makes it perfect for use locally with XAMPP.

Mambo has a checkered past and has suffered from developer dissatisfaction, substantial legal issues and an apparent ongoing tension between different developer groups.  I don’t intend to wade in to the history of Mambo. I simply do not know enough about what is obviously a very complex issue.

Contrary to my comments in the video below, Mambo is not “getting on in years” but continues to be under active development.  I mistook a series of developmental point releases to be simple bug fixes.  Mea Culpa.

[Note to Google Reader readers: I appear to be having some difficulty with these screencasts hosted on not showing up in Google Reader. I understand that the team is working on this but in the meantime, please click through to the site to watch the video. If you can see the screencast just fine in Google Reader, please let me know in the comments.  Thank you.]


Movable Type is a blogging engine developed by Six Apart (other notable Six Apart products are the hosted blog solutions Typepad and Vox).  The latest version, MT 4.1, is available under a range of licenses including free for personal use, education and non-profit licenses and commercial licenses depending on the number of users.  The release of MT 4 also saw the introduction of an open source licence available from the MT community at

Written in Perl and supporting a number different databases, MT4 includes many of the features users have come to expect from a modern engine including themes (called “styles”), plug-ins, widgets, blog stats and multi-user options.  With the introduction of the open source licence, there is very little to separate Movable Type from its competitors such as WordPress, although WordPress seems to have a bigger community of theme and plug-in developers (or maybe I just don’t know where to look).

Below is a 17 minute screencast that demonstrates how easy it is to install Movable Type on your local machine for development and design purposes. Toggle the flash player to full screen for best results. As always, all comments are most welcome.


Local Development: Installing WordPress

by Shane Perris on Friday, 15 February, 2008

in how-to,tutorials

WordPress is a free (as in beer and speech) open source blogging engine originally built upon the code of the b2 blogging engine.  In time it has become one of the most well known and used platforms in the blogosphere (and is the platform of choice for  WordPress comes in two flavours –, a free blogging service similar to Google’s Blogger, and the software package for installation on your own server, available at

WordPress is extensible with themes that are easy to edit and a plethora of plug-ins and widgets.  It is also famous for its famous “5 minute installs”.

The video below demonstrates just how easy it is to install WordPress on your Windows machine using the download available from and the basic install of XAMPP to act as your web server, MySQL database and PHP host. Toggle the fullscreen view for best results.


Local Development: Installing XAMPP

by Shane Perris on Friday, 8 February, 2008

in how-to,tutorials

image There will come a time when the beginner blogger wants to take more control and choose to host their own blog. When it comes to development, testing design tweaks, different templates, plug-in compatibility and overall usability, nothing beats having a version of your blog sitting on your very own desktop (or laptop) computer. The easiest way to host a local version of your blog on Windows is to use the popular local server package XAMPP. This post will explain what XAMPP is and does and will give the reader a step by step tutorial on installing XAMPP on Windows.

What is XAMPP?

XAMPP is a variation of the commonly used acronym LAMP which stands for Linux, the Apache web server, the MySQL database and the languages PHP and Perl. Many websites run on a variation of LAMP (or the not quite as popular WAMP for Windows etc.). XAMPP runs on multiple platforms (hence the ‘X’) and installs versions of Apache, MySQL, PHP and Perl specifically tailored to run on your local machine rather than on a server openly available on the internet. The emphasis on local installation also means that XAMPP is inherently insecure and should not be deployed on systems accessible from outside your own network.

Some of you reading this may have tried to install all of these components separately and came to the same conclusion I did: it’s hard and generally not worth the time and effort invested. XAMPP makes all of this extraordinarily easy and the rest of this post will show you just how easy it really is.

Installing XAMPP

Although XAMPP is available for Windows, Mac OSX, Linux and Solaris, this tutorial will be for Windows only. I don’t have a Mac (I’m saving for one) and my Linux install is a work in progress (I’m still not confident using it but I’m working on it). As for Solaris….well, I choose to work on the theory that if you’re running Solaris at home, chances are you’re already way beyond my area of expertise and I have no idea why you’re reading this post, or indeed this blog. In fact, if you are reading this and you want to write something seriously techy hard core for the Solaris crowd, we should talk.

Step 1 – Downloading XAMPP

The latest version of XAMPP can always be downloaded from the Apache Friends XAMPP site. The most recent version is v1.65 (although this tutorial uses version 1.63a). (Please note that v1.65 has some compatibility problems with Perl, which could be an issue further down the track. Previous versions of XAMPP can be downloaded from Sourceforge) On this page you will find the version for your platform. The Windows version has three downloads – an installer file version, a zipped package version “for the purists” and a self-extracting zipped archive. The simplest option is the Windows installer. Go ahead and download the installer version. I don’t mind waiting.

Step 2 – Installation

Installation really is easy. Double click on the exe file you downloaded. If you’re running Vista, the following warning message may pop up:


Just follow the advice and you will be fine. Click “OK” to continue.

The usual installer welcome screen is next. Click “Next” to continue.


XAMPP will ask you to choose a destination. Vista users should keep in mind the earlier warning message and make sure that XAMPP installs in to your main system folder. I have chosen to install XAMPP directly into my C:\ drive at c:\xampp. Once you have selected a location, click “Next” to continue.


You need to install the web server and database services for XAMPP to be useful for local blog development. At the next screen of the installation, ensure that the boxes are checked for Apache service (the web server) and MySQL service (the database).


The Filezilla option is for the installation of an FTP service. You are probably already familiar with FTP (File Transfer Protocol) but it is not required for our purposes here. I have left that option unchecked.

The shortcuts are also useful but not necessary. I have chosen to let XAMPP install the shortcuts.

Click “Install” to let the XAMPP installer do its thing, which will look something like this:


You might get an error message like the following once the installation is finished:


I am going to admit that I have no idea why this error message appeared. I waved the rubber chicken and clicked “OK”. Since then, everything seems to have worked just fine. My advice: go with the flow on this one.

Step 3 – Check your installation

XAMPP sets up a local web server on your computer that is accessed by typing http://localhost/ into your web browser. Do this now to see if XAMPP installed correctly with the required services running. If you’re lucky, your browser looks like this:


For some reason, one or more of the required services might not be running (for example, the Apache service might not be running because the ports were already in use). You can see which services are running in the XAMPP Control Panel. If you chose to have shortcuts installed, you will find a shortcut to the Control Panel conveniently placed on your desktop. If not, you will also find the program sitting in the main XAMPP folder (the file is called xampp_control.exe).

The control panel looks like this:


The most important services are Apache and MySQL. If they’re not running, you can start them in the Control Panel. Once your control panel looks like the one above, try localhost again.


XAMPP is now installed and ready for business. In the coming weeks I will show you how to install a number of blogging engines on your local machine such as WordPress and Movable Type.

If you are still having problems getting XAMPP up and running, drop me a line in the comments and I will try and help you get it working.


Local Development

by Shane Perris on Friday, 1 February, 2008

in how-to

“Local development” – the practice of hosting a copy of your blog on your local machine (desktop or laptop) for the purposes of testing changes to your blog.

Having a blog can be an exciting experience. Blogging virgins often choose to have their blog hosted by someone else (eg Blogger,, Livejournal, Typepad to name a few). This is usually a good thing as the hosting service takes care of all the trickier aspects of blog hosting like free (or nearly free) hosting, bandwidth issues, image hosting, bug fixing, and general trouble shooting. This enables the beginner blogger to focus on the important things like content and trying to maintain the rage after the three month honeymoon period is over.

Why local development is a good thing

New bloggers become veteran bloggers (if they survive aforementioned honeymoon period). With experience comes a desire to have greater control over the type of experience provided to the blog’s readers. The common remedy is to organise your own hosting with a web host provider and make your own designs on design, templates, plug-ins and so on.

One problem with hosting is that it can be difficult to spend time tweaking your blog, testing for changes. Every change you make to your blog on your host’s servers is published and goes “live” straight away. There is little room for trial and error. It is in this situation that local development excels.

Hosting a copy of your blog on your local machine gives you the luxury of making as many changes as you like without worrying about whether those changes will break your blog and cast it into cyber purgatory. You also don’t need to worry that everyone will see that change you made to the colour scheme at 3am that seemed like such a good idea at the time but in the cold light of day resembles far too closely the colour of the tabouli that was on your kebab while you sat at the keyboard tapping in the RGB colours when you should have been sleeping (or at the very least still at the club and not changing your template colours at 3am, even if The KLF proclaims it as eternal)

Don’t sweat it – it’s easy

Although it may sound like a complicated idea, hosting your own blog is easy to do. All you need is some server software (such as Apache), an SQL compatible database (such as MySQL or PostgreSQL) and an installation of one/all of PHP, Perl and Python. Luckily for you dear reader, it is a doddle to get all of this in one simple, easy to install package for Windows, Mac OS X and Linux – XAMPP.

What can be installed locally?

Many blogging engines can be installed locally. The most popular of these include WordPress, Movable Type (which is the core of Six Apart‘s Typepad service), Drupal, Joomla! and Mambo. You can also install technologies like MediaWiki that serve an allied service and ideal.

Coming up

In the coming weeks, TechWhimsy will provide tutorials on how to install XAMPP as well as some of the more popular blogging engines like WordPress and Movable Type.

Stay tuned!

Photo credit: Downtown Champaign: Taking Out of Storage by grifay.


Fixing Hibernate Problems in Windows Vista

by Shane Perris on Friday, 25 January, 2008

in how-to,tutorials

One of the most regularly reported problems with Windows Vista is that the hibernate function – one of the power-saving modes – does not work. I have been using Vista daily since February 2007 and although the experience has been generally positive, hibernation has failed to work a number of times. Through trial and error (and a lot of time spent trawling through blogs of both users and Windows developers) I have come across some solutions that seem to work for most people.

Hibernation problems on Vista fall roughly in to three categories:

  1. the computer fails to wake up from hibernation
  2. the computer fails to hibernate
  3. the computer keeps waking up from hibernation when it is supposed to be sleeping

Waking Vista from hibernation

Right from when I bought my laptop (a Dell Inspiron 1501, a mere matter of weeks before they sexed up the Inspiron range with colours, new gadgets and upgraded specs that make my laptop blush with shame at being so weak and puny and unworthy of calling itself a “computer”), my computer would not so much hibernate as enter into a terminal coma from which there was no waking.

The number one reason that Vista fails to wake from hibernation is a problem with video drivers. In my case, the answer was simple. All I needed to do was to update the drivers for my Radeon Xpress 1150 onboard video chipset. A quick visit to the ATI drivers page to download the latest drivers and I was back in business. As easy as that.

Making Vista hibernate

Sometimes the hibernation option is not available, or your hardware key combination (on my Dell it is Fn -> F1) simply does not work. The first thing you need to check if your computer supports one of the hibernation options. To do this, go to the start menu and type Command in the search box. In the results, right click and select “Run as Administrator”. When the command prompt opens up, type powercfg -a which shows you all of the available types of hibernation that your hardware supports. In the video below you will notice that my laptop supports s(3) which is the “deep hibernation” that saves the state of the system to disk before shutting the hardware down.

If your hardware does support hibernation but it still stubbornly refuses to bunker down for the winter, either the hibernation option has been disabled or the Hibernation File Cleaner has been deleted by the Disk Cleanup Utility. Both these options are easily fixed using the powercfg utility again. To turn hibernation back on, type powercfg -h on. The short video below shows you how easy this really is (toggle full screen mode on the flash player for best results).

I can personally vouch for this method as well. Like many people, when I first ran the Disk Cleanup Utility, I saw the the Hibernation File Cleaner took up around 1GB of disk space and I thought “Surely it wouldn’t be an option if it wasn’t safe to delete it? Surely?” Like many people I learned the answer was “Hmm. Not so much” which isn’t exactly grammatically correct but does get its meaning across while inspiring a healthy dose of Friends nostalgia and yearning for Courtney Cox that I thought had long since worn off. Not so much, obviously. But I digress. In my case, the option to hibernate had disappeared from my shut down options and Fn -> F1 didn’t work either. powercfg -h on worked immediately.

Vista Keeps Waking Up From Hibernation

This one is a tricky one. In theory, hibernation physically shuts down your machine so issues such as scheduled tasks (eg system updates, virus scans and so on) shouldn’t be able to wake the machine back up. However, I have seen reports all over the internet of Vista machines waking up and doing strange things. I have never experienced this problem myself but the following suggestions have worked for various people at various times:

  1. if your computer wakes up at a consistent time, make sure there are no scheduled tasks (Start menu -> search for “task scheduler”)
  2. check your BIOS settings to make sure that “Wake on LAN” (also sometimes known as “Wake on Ring”) is disabled. Check your bootup screens to see what key combination you need to hit to access your BIOS
  3. check in Device Manager (Start menu -> search for “device manager” – your life will be much easier if you run this program as Administrator) and see if any of your devices have an option that allows it to wake the computer. I’ve seen reports that blame everything from a wireless mouse to an ethernet device that isn’t plugged in to the network for waking a computer from hibernation.

If any of the above suggestions help, or you have an even better suggestion to make about Vista hibernation modes, why not drop me a line in the comments?