How to Stream Live Audio to your Website

This page will describe how to quickly and easily post a live audio stream on a webpage. Note that the described method is a bit dated, and there are likely other options available, and possibly even easier.

The audio stream I use is a 24khz mono mp3 stream. It is encoded live by the winamp DSP plugin and streamed to an icecast server application on my webserver. On the client side, a flash applet loads the appropriate stream url, and plays back the streamed audio, with a short buffer that usually results in a 6 second delay. For this demonstration, I'm assuming you're using some version of windows on the computer that provides the source of the audio, and linux on the computer that hosts the audio server. Later, I will discuss some alternatives to accomplish the same thing.

What you will need:

Any 32+bit version of windows (windows 95 or later).
Winamp (just get the latest version)
The shoutcast DSP plugin for Winamp

Server: Linux (any distro will work)
Flash MP3 player

The Server

On your trusty linux system, install icecast. This program accepts connections from source streams, which feed it the live audio data, and clients, which it streams the audio data to. Icecast can handle streams in both MP3 and OGG formats, but for this document, we're demonstrating the use of MP3.

Once the application has been installed, edit the icecast_shoutcast_compat.xml configuration file included with the icecast distribution. Change all of the "hackme" passwords that were included by default, and set the port you want to use if you wish to use something other than 8000/8001. Once you have accomplished this, launch icecast.

The Source

Start by installing winamp and the dsp plugin. Both should be reasonably straightforward. If you don't currently use winamp, you will want to pay special attention to the file associations if you have another media player you wish to continue using by default. Winamp can and will play most audio and video files, but if you prefer to use some other player, be sure to not let winamp associate anything you care about.

Once winamp and the plugin are installed, lauch winamp, Click on Options/Preferences/Plug-ins/DSP/Effect and select Nullsoft SHOUTcast Source DSP v1.9.0.

This will launch another window from which you configure the dsp plugin. The first tab isn't useful in any way, but it looks pretty, so I'm showing it to you anyway.

The second tab labled Output contains the host configuration settings. The Address field will be the hostname of your server. The Port field specifies the port that will be used by icecast for the source and client connections. Use the port and password you specified when you configured Icecast. Check the Automatic Reconnection on Connection Failure and Connect at Startup checkboxes.

On the third tab, select Encoder 1 on the left menu, and choose MP3 Encoder and 24kbps, 22.050kHz, Mono in the drop-box fields. Note that these are the minimum settings that this plugin will provide, and are typically more than sufficient for broadcasting from a microphone. However, if audio quality is REALLY important to you, or you actually DO have two or more microphones and can thus take advantage of the stereo option, then by all means, crank up the quality and knock yourself out. Keep in mind, the higher the bitrate, the more bandwidth will be required for streaming, and the more likely you will encounter buffering problems.

The Input tab lets you select the source of your audio, either through a mic or line input, or the actual winamp music playback. Assuming you want to stream your voice live, you'll want to select Soundcard Input in the Input Device dropbox.

Once you're done with the configuration, return to the Output tab and click Connect. If the byte field starts counting upwards, you've successfully connected and are now streaming your audio to the server.

The Client

The web browser of the end user will play the audio stream by loading a flash applet. The one I use is called, incidentally, Flash MP3 Player. An included html file will demonstrate the code needed to post the applet in your own page. The only element of the configuration that needs to be changed is the flashvars variable file. One small problem with the version I use, a bug requires the url to contain the text mp3 somewhere in the url. It was expected that you would be playing an mp3 file which is accessible from the internet, and therefore would end with a .mp3 extention. However, since we're not playing a file, but instead a stream, we won't have an extention to appease this requirement. I solved the problem by creating a mp3 subhost for my domain, which points to the ip address of the icecast server. This is how the applet will appear on the page:


The method thus described is only one way to accomplish live audio streaming. Assuming you wish to stick with mp3 as your streaming protocol, the following are alternatives. For the source, you can use Liveice, which runs on linux. On the server side, you have the shoutcast server, which icecast was originally based off of. Icecast and shoutcast will both run on windows as well. On the client, before using the flash applet, I had the browser launch the configured player for mp3 streams (usually winamp or windows media player). It's also possible to playback the audio streams using almost any mp3 player whether a browser is involved or not.

You can also stream in formats other than mp3. Although I'm not sure which applications are best to use, flash has support for both audio and video streaming. This would be free if using one of the public webcam sites such as Ustream, Stickam, or, although you'll then be constrained by their terms of service. To set it up on your own, especially with video, will take quite a bit of bandwidth, and possibly money for the licenses. More research will be required on this issue.

Software Links:

DSP plugin.
MP3 Flash Player.