tutorials

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="http://techwhimsy.com/mediaplayers/jwplayer/mediaplayer.swf" width="440" height="20" allowscriptaccess="always" allowfullscreen="true" flashvars="height=20&width=440&file=http://techwhimsy.com/31_Ghosts_IV.mp3" />

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 “/>”.

{ 0 comments }

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=”http://techwhimsy.com/31_Ghosts_IV.mp3″>31_Ghosts_IV</a> which looks like:

31_Ghosts_IV

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

<script src="http://mediaplayer.yahoo.com/js" 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 next.yahoo. 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:

{ 5 comments }

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="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=XXXXX"> </iframe>

In the above code is the phrase “audioURL”. This is the sound file you want to link to. In my case, this is http://techwhimsy.com/31_Ghosts_IV.mp3. The code becomes:

<iframe style="border: 1px solid rgb(170, 170, 170); width:400px; height: 27px;" id="musicPlayer" src="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=http://techwhimsy.com/31_Ghosts_IV.mp3"> </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.

{ 20 comments }

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

{ 18 comments }

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 blip.tv not showing up in Google Reader. I understand that the blip.tv 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.]

{ 0 comments }

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

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.

{ 8 comments }

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 techwhimsy.com).  WordPress comes in two flavours – WordPress.com, a free blogging service similar to Google’s Blogger, and the software package for installation on your own server, available at WordPress.org.

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 WordPress.org and the basic install of XAMPP to act as your web server, MySQL database and PHP host. Toggle the fullscreen view for best results.

{ 0 comments }

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:

xampp_vista_warning

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_setup_wizard_1

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.

xampp_setup_wizard_2_install_loc

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

xampp_setup_wizard_3_services

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:

xampp_setup_wizard_4_install_progress

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

xampp_setup_wizard_ports_ERROR

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:

xampp_install_success

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:

xampp_control_panel

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.

Hooray!

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.

{ 63 comments }

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?

{ 172 comments }

Opening ODT and DOCX – are they human readable?

by Shane Perris on Friday, 18 January, 2008

in how-to,tutorials

One of the supposed benefits of XML is that documents produced in this format are able to be opened as a text file and read by normal people, allowing the content to be recovered, even if the formatting was unavailable Tired of wondering just how human readable either format was, I decided to take a look for myself.

I created a simple document in both Open Office as .odt (Open Document Text) and in MS Office 2007 as .docx that had a heading, some paragraphs, an unordered list and an ordered list. I used the Loren Ipsum generator that can be found at Lipsum.

(click on images for larger versions)

Screenshot of an open document text file.

A screenshot of a Windows Office 2007 docx file

.odt is followed by .docx

To start off with, I opened both documents up in Wordpad to see what they looked like. Not at all human readable.

Screenshot of an odt file opened up in a text editor

Screenshot of a docx file opened up in a text editor

A quick trawl through a Google search revealed that .odt is a container format that compresses all the relevant file parts in to one file. I changed the file extension from .odt to .zip and opened it up to have a look. 

Screenshot of an odt file opened up as a zip file

Screenshot of the xml of an odt f

 

 

What worked for one format might work for the other. I took a punt, changed the file extension from .docx to .zip, held my breath, crossed my fingers, closed my eyes and double-clicked…

 

Screenshot of a docx file opened up as a zip file

Screenshot of the xml in a docx file

 

…and discovered that in .docx, the goodies are there, albeit buried a little deeper.

Both .odt and .docx are human readable, after a fashion. If for some reason in the distant (or not-so-distant) future either format is unreadable in its container form, with some effort the data could be extracted. It may even be possible to extract large parts of the formatting, but that’s beyond my ability to assess.

In my assessment, .odt comes out ahead slightly in the human readable stakes: it isn’t buried quite so deep and comes with less additional XML-related formatting and overhead. As to which is the better format overall, I’ll leave that as an exercise for the reader (although I wish I could create .odt inside of Office 2007 – I do love the new Office user interface).

{ 0 comments }