MP3 and Audio MP3 and Audio

There are quite a few ways to add sound and music to your webpages.

I tend to avoid background music and players that start automatically, as these tend to annoy website visitors.

If you want to add single voice files, single music files such as MP3's or even whole playlists, there are several easy ways to do this and I have listed some below.

***You'll have to excuse my choice of example MP3 files :-) ***



Convert Your Audio Files

In order to get music or even voice audio onto your website, you really need to make the files as easy to play and as compact as possible.

Down here in Australia, even with DSL we have a pretty hard time listening to audio files on the web, as some formats take forever to load either because of their file format and what player they are designed to play in, or because the files are just huge.

So for that reason, I think using MP3 files for the web is the easiest....both for playing and for the fact that they are smaller files than "WAV" files for example but the quality is still very good.

Audacity is the easiest program to use when you want to make a voice file for a webpage, or for converting wav files to MP3 (smaller in size) and optimizing the bit rate of the files so they won't be too big.....and it's FREE.

You can also edit your files....get rid of unwanted parts, add files together, create effects and much more.

If you want to make a voice audio, and don't like the sound of your own voice, you can change the pitch, making you sound male or female (I'd avoid the "chipmunk" voice though)

To export files in MP3 format you also need to download and install the MP3 encoder LAME in addition to Audacity....but the instructions on how to do this are easy to follow.

If you are exporting a voice file, the bit rate doesn't have to be that high, so you can set the bit rate before exporting to MP3 to about 80 kbps. (edit - preferences - file formats and choose bit rate from the drop down list)

If you have a music file then exporting the MP3 at around 128 kbps is probably the best for the web. You can go higher, but then the file will be much bigger.

Media Convert is an online site which allows you to convert various file formats including audio files such as WAV to MP3.

Mediaconverter is another file converter available online which sends you a link to your converted file via email when finished.

The Zamzar online file converter is another free to use site which converts both music, video, document and image formats.

The program I use for quick file conversions (both audio and video) is Replay Converter.

Replay Converter has an interface which is very easy to use and you can both convert files to different formats and also choose the quality of output.

replay convertor screen shot


Adding Voice Audio To Your Website

You've made a MP3 or WAV voice file...you want to add it to one of your webpages.

The SIMPLEST way I have found to do this is by using this neat FREE little program.

Website Audio Maker is a terrific free way to add audio quickly to your website by turning your WAV or MP3 file into a flash file with it's own button player.

Example:


(and if it's your birthday, well it's your lucky day...lol)

It has a simple step by step interface which also includes the option to either choose a file or record your own.

You are given a range of buttons to choose from and you can change the color and size of the buttons also.



Once you have made your file, you just have to upload the file to your site and copy and paste the code it gives you into your webpage. (remembering to keep the SWF file you upload to your site in the same directory as your webpage)

You don't have to use it for just voice files either. You can use it to add a single MP3 music file to your webpage as well.

I've seen a virtually identical program on the internet selling for around $27.


Audio Maker Pro ($47.95) is a similar program to the one above, but it has a few more features (such as having the option to have the files on a different server and being able to change the audio that a visitor hears from subsequent visits to your website) It also has slightly more professional looking buttons.





Adding Music MP3 files and MP3 Playlists

The flash interface is the easiest way to add music to your website.

There can sometimes be problems with some MP3 files sounding like "chipmunks" when you put them through a flash player.

This has to do with sampling rate of the MP3 files. Flash players like MP3's which have a sampling rate of 22,050 and 44,100 samples per second.

If your MP3's are sounding too fast, or too slow, then make sure you encode all your MP3's at 11.025 kHz 22.050 kHz or 44.100 kHz. You can do this with Audacity or LAME.
and this page here discusses how.


XSPF Web Music Player

If you want to play a single MP3 on your site, or a playlist, the XSPF Web Music Player is an easy way to do it.

Basically, you unzip the player, and upload the xspf_player.swf and xspf_player.fla files to a directory on your website.

You then upload the MP3's you want to play.

Once the MP3's are there, you can create a playlist for them in notepad (and save that file with the extension .XSPF) Then upload this playlist file to the directory where you uploaded the player files.

You just add the direct URLs to your mp3's and your images and add a title to each one. (items in bold below are what you need to change) You don't need to have a different image for each MP3, you can use the same one for all.

Example Playlist

<?xml version="1.0" encoding="UTF-8"?>
<playlist version="0" xmlns = "http://xspf.org/ns/0/">
<title>test tracks</title>
<trackList>
<track>
<location>http://www.yourwebsite/yourmusic.mp3</location>
<image>http://www.yourwebsite/image.jpg</image>
<annotation>your mp3 title</annotation>
</track>
<track>
<location>http://www.yourwebsite/yourmusic.mp3</location>
<image>http://www.yourwebsite/image.jpg</image>
<annotation>your mp3 title</annotation>
</track>
<track>
<location>http://www.yourwebsite/yourmusic.mp3</location>
<image>http://www.yourwebsite/image.jpg</image>
<annotation>your mp3 title</annotation>
</track>
</trackList>
</playlist>



An example of the player





You can also choose to have the "slim Player" which just shows the track currently being played as below:


Links to both these players can be found here, plus extra documentation on additional parameters you can add to make the player do things such as auto play, repeat playlist etc.

(one thing I did change where the code is concerned for the larger player is the width and height. I found that using width="400" height="153" made the player align better than the default 400 X 700)


JW Flash Player

JW MP3 Player

Excellent MP3 flash player (see examples of the player here. Just choose an example setup from the drop down list.)

The player also has the added advantage of having plugins for inserting the player in various popular CMS systems (eg Drupal, Wordpress etc)


MP3 Widgets

Want to get music or other audio onto your site fast with a minimum of fuss? Just use a widget.

Here's a few that I set up within a few minutes.

Google Audio Widget

A simple widget from over at Widgetbox that will let you play one MP3.

You just have to add the direct URL to your MP3 file before you get the widget.



MySpace MP3 Players

They work on more than just MySpace!

You can get an assortment of flash players here which work on MySpace, Orkut, Friendster, Xanga, blogs, websites and more!

You can add one MP3 or a playlist.







Yourminis MP3 Player

Yourminis MP3 Player is an easy to customize player and lets you play any web-based playlist (xspf). You can also link it to just one MP3.

You can change the size, color even add your own background image if you wish.