How to add an audio file to your website

There has been audio on websites since the early days of the web. It has historically been awkward and not always cross browser compatible. There have also been many ways to put audio in a website. I suspect I have tried all of them. What I am going to describe to you in this hub is a modern way to have an mp3 audio file with an embedded player that works slick and also works on most browsers. The process basically consists of two pieces:

• creating the audio in the first place
• embedding the audio in a web page

If you already have an mp3 file ready to rock and roll, you can skip the recording section and move directly to the embedding section. I wish to warn you, however, to please be mindful of copyrights when publishing audio media that you didn't create. Duplicate content detection is getting better and better as we speak; and I'd bet that duplicate audio is not that far behind duplicate graphics and duplicate text detection. I would also beg you to please be considerate of your web visitor and never never use an autoplay setting to blast the audio at your visitor as soon as your page loads. This is considered extremely rude, and many surfers will leave your page immediately if you do it. Let the visitor choose to play the audio, and you will have many more friends.

As an aside, it would be great if Hubpages wrapped audio functionality in its interface and let us create audio capsules; if that were possible I'd put an example of one right here and let you try it. However, within HubPages' current technical limitations, that's not possible, so I'll put a picture of what an audio player looks like and refer you later to a working example on a third party site.

Okay, having issued those warnings and digressed a bit, let's get on with it.

You can use either a standalone digital audio recorder or you can use a software recorder on your PC. I have used both. If you use a standalone digital audio you can post process with your audio recording software. My favorite recording software is a piece of extremely powerful freeware called Audacity. It is available from http://audacity.sourceforge.com and there are versions for Windows, Mac, and even Linux.

If you do not use a separate recorder, you will also need a microphone to use with Audacity or any other direct recording software you have. Librivox have detailed descriptions of recommended recording equipment for speech and a couple models to avoid. Here are the Librivox recommendations on equipment.

Whether you record to a digital recorder or not, you will probably end up using Audacity to splice or do voiceovers. It is incredibly easy to use -- to record, you basically open the application to a new blank window, hook up your mike, and start making noise. To splice, you open up the two files in separate windows, then just cut and paste the data from one after the tail end of the other. Check out the tutorial video below on using Audacity. I'd like to point out that Audacity can directly export to mp3--no need to run it through some web converter as the tutorial suggests.

If you are doing a speech recording, it is a nice professional touch to frame it with your audio brand. This can be a signature music clip or sound effect. It is also a good idea to finish with an ending clip cut from the same cloth. You can reuse these frame clips to build audio brand recognition.

Now for the part you been waiting for: How to make that cool little player pop up on your web page. It does require that you have some measure of control over your website on the server, that is to say, be able to specifically upload files to it, either that or your content management system (CMS) has to have an interface for audio, and the procedure for doing that would be specific to and different for each CMS. And example of a CMS is hubpages itself. Unfortunately hubpages currently does not provide an interface to include audio. So I am describing the most basic way to do it: upload some files to your server and then set up the html code to invoke the player to play your audio.

Wordpress Blogging software is a popular CMS of sorts that has a plugin for dealing with audio. That's nice if you happen to have a wordpress blog, but if you don't, you can download it anyway from 1pixelout.net, cannibalize the working guts of it and set up the html code block by hand. It is more tedious than difficult. After you've downloaded and unpacked the plugin package you will find several files in it. The worker bees are called audio-player.js and player.swf. Create a folder in your website with the suggested name of audio. Dump those two worker files from the plugin package in there, and also your mp3 file, let's say it's named audioblog.mp3. Now, all you have to do is put the following block of html code on your webpage where you want the player to appear (changing all the URL's of course to match your domain.

<script language="JavaScript" src="http://www.fakedomain.com/myname/audio/audio-player.js"></script> <object type="application/x-shockwave-flash" data="http://www.fakedomain.com/myname/audio/player.swf" id="audioplayer1" height="24" width="290"> <param name="movie" value="http://www.fakedomain.com/myname/audio/player.swf"> <param name="FlashVars" value="playerID=1&soundFile=http://www.fakedomain.com/myname/audio/music.mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object>

There you have it. Once you have set up the audio folder, you don't have to reupload the worker files to it each time you add another audio file. You can just dump the audio file in with his brothers, then modify the html block accordingly to have it's URL for the playfile. One final little thing to note: If you have more than one audio player on a web page you have to give them different id's. As with most errors I've BEEN THERE, DONE THAT. If you try this and you run into any trouble, I'm happy to help you out. Members of my club can contact me directly, and non members, please just leave a comment and we'll try to get your website making some noise.

About the author:

Colleen Dick is a long time webophile who was experimenting with multimedia on web pages before mp3 or flash even existed. If you would like to see some further musings on multimedia, visit her hot dorkage blog and see working examples embedded right in the blog, and other interesting audio how-to's.