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

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

Posted in how-to, tutorials | Tagged , | Leave a comment

Yahoo Design Tools: Yahoo’s hidden gem

yahoo-developer-network

With all the fuss surrounding the will they/won’t they merger of Microsoft and Yahoo, it has been surprising to see just how many cool and interesting things there are buried inside the Yahoo corporation.  There is much more to Yahoo than search, directories, Flickr and del.icio.us.  A quick scan of Yahoo! Everything reveals a whole bunch of stuff from the new social news service Buzz to online video editing with Jumpcut to the Zimbra collaboration and instant messaging service.  However, what is possibly the most interesting to web geeks is the unsung Yahoo User Interface (YUI) and Yahoo Design Pattern Library, both part of the Yahoo Developer Network.

The YUI is a collection of cross-browser controls and utilities written in Javascript that are intended to be used in developing rich internet applications (think AJAX and DHTML).  It is freely available under the BSD licence for anyone to use in commercial applications or otherwise.  Included in the YUI is a collection of Cascading Style Sheets including a comprehensive style sheet providing a large range of different grid design options for page layout.  The YUI has too many cool things to list here, but some of the cooler applications include a rich text editor, calendars and drag and drop utilities.  The YUI is quite a technical collection and is essentially a giant repository of server and client side code.

The Yahoo Design Pattern Library is a practical application of the industrial strength code in the YUI.  The patterns are an attempt to offer comprehensive solutions to a wide-range of interface design problems and pull together different pieces of the YUI code.  There are design patterns for navigation options (things like tabs and indexes), calendars, page layouts and slideshows.  Like the YUI, the Design Pattern Library is free to use by all comers and is licensed under a Creative Commons By Attribution licence.

To keep up to date on new additions to both YUI and the Design Pattern Library, keep your eyes on the Yahoo! User Interface Blog at http://yuiblog.com/blog/

Note: as far as I am aware, no part of techwhimsy.com uses either YUI or the pattern library.  Now that I know they exist, there’s a very good chance some of the features will make their way into techwhimsy v2.0

Posted in design | Tagged | 2 Comments

Trent Reznor does it again

I’ve got a guest post up at sarahintampa.com (the blog of Grand Effect and ReadWriteWeb writer Sarah Perez) on the new Nine Inch Nails release The Slip and how Trent Reznor continues to lead the way in ‘music 2.0’.

Over the last few months, Sarah has quickly become one of my favourite tech blogger so of course I jumped at the chance to provide this guest post.

NIN does it again. Are you watching, Thom?

Posted in administrivia, opinions | Tagged | Leave a comment

Twitter censorship?

sayer

childs

chieftech

smperris

Trust Australians to take a frivolous and whimsical web service that was starting to take itself too seriously and get really immature with it.

:D

Bless each and every ███████ one of you, you █████!

Posted in news | 2 Comments

Data Portability: do normal people even care?

DP-Logo-GreenData portability is the idea that individuals have control over their data online and can determine how they and others can use that data (if at all). Some examples of what data portability could be include:

  • your profile ‘auto-filling’ when you join a new site
  • exporting details of your social network contacts to an external contact manager
  • easily migrate blogs between different service platforms
  • easily moving photos from one web service to another (eg from Flickr to Zooomr)

(more examples of possible use cases for data portability here)

There is no denying that data portability is a hot issue amongst the tech community. There is the Data Portability Project, Google’s Open Social initiative for widgets/gadgets/apps in the social networking space, uber blogger, PR machine and the loudest echo in the chamber Robert Scoble avidly pushing data portability at every turn before accepting that there are roadblocks to data portability and the recent announcement by Yahoo! that it is rewiring its network of internet properties for social graph and data portability. However, all this is for the geeks and the techies. What about the real world and real, normal people who don’t live and breathe this stuff.

Do normal people care about data portability? As always, when it comes to finding out the opinions of the tech savvy but not tech obsessed, I turned to my wife, who although she spends a lot of time online, she is very far removed from the echo chamber that many people find themselves in. She couldn’t tell you how much Google spent on buying the latest start up, or who Jason Calacanis is, what Twitter does, who Duncan Riley is angry at this week or any of the other things that fill the pages of Techmeme on a daily basis.

What my wife can tell me is what normal people (ie not early adopters) think. Her extensive network of online friends, although from large and varied backgrounds with wildly different views on many things, share a common thread – they use the internet as a tool, not as a game, or a money making machine or as a way of life.

I asked my wife, “Does anyone care about data portability?” I then had to explain about ideas such as exporting your Facebook contacts to Outlook, or moving photos from Flickr to Zooomr, or shifting a Blogger blog to WordPress and so on. The blank, uncomprehending stare slowly became more focused as she began to understand what I was trying to say. “Outlook? Why would I want to do that? Flickr? Don’t most people just keep a copy of their photos on their hard drive anyway? I know you can move from Blogger to WordPress fairly easily. […..] did that and it worked fine” and so on.

Data portability. Do normal people care? Probably not. Right now, it just doesn’t affect them. Normal people don’t hop from web service to web service. Normal people don’t seem to have extensive collections of media online and even if they did, they’ve still got the original files floating around. Rudimentary services that work more or less good enough already exist for the bigger services, especially where there is a commercial imperative to make importation easy.

Is data portability important? I believe so. However, until data lock in has an impact on the online experience of the slow adopters, no one will really care.

Posted in opinions | Tagged | 10 Comments

How to stream mp3s with Yahoo Media Player

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:

Posted in how-to, tutorials | Tagged | 5 Comments

Has Radiohead missed the point?

Radiohead - Nude coverart Radiohead has once again hit the headlines with an ‘innovative’ new media way of promoting the band and the music. They have broken down their latest single ‘Nude’ into 5 stems (vocal, guitar, bass, drums, the rest) and made each available to buy exclusively at the iTunes music store for fans to download, remix and uploaded their mixes to the Nude Remix site.  Despite the media hype, the question to me becomes is Radiohead at the forefront of new media or the rearguard of old media?

I have a number of concerns with how Radiohead is approaching this release:

  1. The stems have to be downloaded individually, each at the cost of an individual track ($1.69 here in Australia), making it more expensive than some EPs.  Some people might think that this is still a fair deal (after all, how often do you get the chance to remix a track yourself?) but it doesn’t offer anything extra to the  buyer.  In times past, Nine Inch Nails have released multi-tracks for free (remix.nin.com has more information).  As a less extreme example price wise, BT released ‘The Technology’, 6 track EP of remixes and included the multi-track files for 3 singles of the album ‘Emotional Technology’ back in 2004.  Nine Inch Nails was free and BT added something extra.  Radiohead does neither.
  2. The stems are only available through the iTunes music store.  Big Radiohead fan but no iTunes music store in your country? Too bad, my friend. No remix for you.
  3. The Nude Remix terms and conditions are not very friendly at all.  You sign over all rights to the remix to Warner/Chappell Music (the publishers). It doesn’t specify if this only applies if you upload the track to the remix site. In my own experience, if it is not specified, it is a blanket approach.  Also, the Radiohead band members are given sole writing credit.  When you submit your remix, you can not ‘exploit’ it in anyway without prior approval of Warner/Chappell and Radiohead.  In other words, we own your song, you will receive no credit for your work and you can’t do anything with your own remix without permission.  To Radiohead’s credit, they do also undertake to not commercially exploit your work without contacting you first. Nice.
  4. There’s no competition or prize attached. While a competition or prize is not essential, in the context of the previous three points, throw your fans a bone guys!  Seriously. It doesn’t have to be a huge prize.  Maybe the best remix could get a signed copy of the the 7″ vinyl single, or something equally token but meaningful to a hard core Radiohead fan.  Surely that wouldn’t be too much to ask.  Instead, remixers get a guarantee that the ‘Radiohead will listen to the best remixes’.  Woo.

Are Radiohead reaching out to the fans by offering individually downloaded components, or are they taking 5 bites from the same cherry?  Is it innovative new media thinking or classic old media record label money grubbing?

What do you think?  I really want to know what other people think about remixing ‘Nude’

Posted in opinions | Tagged | 4 Comments

Stream your own mp3s with the Google Reader player

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.

Posted in how-to, tutorials | Tagged | 20 Comments

Server problems

UPDATE 15/3/08: everything seems to be fixed now, but if you had any bookmarks they might not work. You may wish to bookmark any pages again. Sorry for the inconvenience and I’m looking into setting up some redirects as well.

A quick spot of housekeeping to say that I’m currently experiencing server problems and that everything except for the front page is returning a 404 error. The problem has been logged with my host but it doesn’t tend to respond all that quickly to anyone outside of the US, I’m afraid.

In the meantime, if you want to reach me try email (shane at techwhimsy.com), twitter (smperris) or Jaiku (smperris) and I’ll get back to you as soon as I can.

Posted in administrivia | Leave a comment

Mobbing the echo chamber

Two issues dominated the tech blogosphere this week:

  1. Jason Calacanis dared to suggest that people working for a startup might need a different work ethic to someone punching in 9-5; and
  2. Business journalist Sarah Lacy apparently bombed an interview with Mark Zuckerberg, CEO of Facebook, at the South by Southwest (SxSW) conference (remember when SxSW used to be about the music, man? It’s changed, dude. It’s changed).  The meltdown was fuelled by an angry TwitMob feeding its dissatisfaction to the broader tech community, 140 bilious characters at a time.

Both of these issues took on a life of their own and the dominated the space despite the fact that they are of limited interest and aren’t really that important in the scheme of things anyway.

The conversation around Calacanis’ post can be summed up as:

Jason sucks

I disagree

He’s a prick

Well I think Jason’s right

Well I think he’s just a prison warden, nyer nyer nyer

And I think he’s got it backwards, too

Um, I actually work for Jason. Can I say something now?

… and so on.  It’s hardly world-changing stuff, but I bet a whole heap more people have heard of Mahalo now! (personally, I think Jason sounds like my type of boss – free coffee so I don’t have to leave my desk? Sure thing. Paid for lunch so I don’t have to go outside and get it or brown bag it? Just sign here and initial there? Comfortable chairs, two monitors and a laptop for work at home? Damn straight! All this and I’m a family man.  Try working 9 to 5 while constrained by laws governing public administration and spending of tax dollars and then tell me you wouldn’t work for Jason in a heartbeat …)

As for the apparent ‘crash and burn’ of Sarah Lacy, I feel like I was the only one who thought “Sarah who?” before proceeding to not care that an interviewer misjudged her subject and crowd and had an off night. The only newsworthy aspect of the whole thing is that it was at a tech conference and therefore plenty of people were pumping up opinions live on Twitter (wisdom of the crowds or rampaging mob? You decide.)

The most startling thing for me was that in both cases it was astounding how quickly a mob will turn when the Silicon Valley/Bay Area echo chamber starts feeding upon itself at so spectacularly.  I’m somewhat saddened that from my antipodean perspective in Australia, in a week where Apple releases an iPhone SDK, a Gmail archive program turns out to be a front to scam your login details and REM streams its new album through iLike a week before its release date (I couldn’t care less but I know lots of people who do care), and this insider First World Problem dross is the best people can do.

*sigh*

Posted in opinions | Leave a comment