May

22

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

Filed Under how-to | Leave a Comment

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!

May

12

Yahoo Design Tools: Yahoo’s hidden gem

Filed Under how-to | 2 Comments

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

Apr

16

How to stream mp3s with Yahoo Media Player

Filed Under how-to | 2 Comments

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:

Mar

29

Stream your own mp3s with the Google Reader player

Filed Under how-to | 3 Comments

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 id="musicPlayer" style="border-right: rgb(170,170,170) 1px solid; border-top: rgb(170,170,170) 1px solid; border-left: rgb(170,170,170) 1px solid; width: 400px; border-bottom: rgb(170,170,170) 1px solid; height: 27px" 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 id="musicPlayer" style="border-right: rgb(170,170,170) 1px solid; border-top: rgb(170,170,170) 1px solid; border-left: rgb(170,170,170) 1px solid; width: 400px; border-bottom: rgb(170,170,170) 1px solid; height: 27px" 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.

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.

Mar

9

Local Development: How to install Joomla on your local Windows machine

Filed Under how-to | 1 Comment

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

Feb

29

Local Development: Installing Mambo

Filed Under how-to | Leave a Comment

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

Feb

22

Local Development: How to install Movable Type 4 on your local machine

Filed Under how-to | 4 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.

Feb

15

Local Development: Installing Wordpress

Filed Under how-to | Leave a Comment

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.

Feb

8

Local Development: Installing XAMPP

Filed Under how-to | 33 Comments

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.

Feb

1

Local Development

Filed Under how-to | Leave a Comment

“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, Wordpress.com, 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.

Next Page →