streaming

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 }