May

22

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

Filed Under how-to 

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 just to prove how easy it is to change colours etc, here’s another version created with the wizard: 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 “/>”.

If you're new here, thanks for stopping by. If you like what you read, you may want to subscribe to my RSS feed. Thanks for visiting!

Like this post? Please consider submitting it to one of the following services:

Spread the Word!

Comments

Leave a Reply