How to add an audio file to your website

Introduction

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.

Player graphics

Click thumbnail to view full-size
These are my colors; you can choose whatever colors you like.  :)
These are my colors; you can choose whatever colors you like.  :)
These are my colors; you can choose whatever colors you like. :)

Recording

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.

Audacity Screenshot

Audacity window after recording.  The data is the sound data.
Audacity window after recording. The data is the sound data.

Podcasting with Audacity

Embedding Audio

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>

 

Conclusion

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.

More by this Author


Comments 33 comments

hot dorkage profile image

hot dorkage 8 years ago from Oregon, USA Author

What? Nothing to say? Nobody gonna try to tell me they know a better way, or that I'm all wet or that their boobs are bigger than mine? There is no comment repellent here. What is here is just a little stain of brain juice, and it's not toxic. I promise; it's actually GOOD for ya!


Research Analyst profile image

Research Analyst 8 years ago

Thanks HD, I really can use this information. I am building a new website and I want to use my voice, so visitors can listen to some of my blogs, interviews and local city highlights. Keep up the good work.


hot dorkage profile image

hot dorkage 8 years ago from Oregon, USA Author

Thank you for the comment RA, I am really hurting for comments here because I am a mind numbingly analytical geek (boring to everyone but other geeks) but if u need any help don't hesitate to ask. I look forward to hearing your personality come through on your blogs. Too bad we cant put them on hub pages.


guidebaba profile image

guidebaba 8 years ago from India

This is good job. Many people don't know how to add audion files to their site. I did this long back on my Company's website. And just because you wanted to know: Urad dal sabut = whole black gram.

You can learn more here:

http://hubpages.com/hub/Cooking---Glossary


Mike 7 years ago

Thanks for this. I've been looking everywhere for something like this. I'm sure people going to my site appreciate it too because I originally had the audio playing everytime the site came up.


Tris 7 years ago

This is exactly what I've been looking for! Amazingly I expected a real hassle before searching but found you and your info, used it and very quickly it was working. You are the best audio 'geek' on the web! Cheers greatly. Well written and perfect to follow and get working.

I hoped you could elaborate on the ID tags as I am about to put around 7 players on my site. I would love a quick guide like above if possible?

Also, do you happen to have a code with easy modification to add color, fwd and reverse buttons? I'm trying to use the stand alone info page but am a bit stuck?

Again - one of the best tutorials I've ever used. !


hot dorkage profile image

hot dorkage 7 years ago from Oregon, USA Author

I'll answer you here Tris. I think this particular player is pretty much as you see it -- I don't think you can do a FF or reverse. The colors you can set up with parameters -- see my hot dorkage link in the tutorial for an example. for diferent id's f you have > 1 on a page you need to modify the id= in the javascript and make them all different. If I recall correctly it really doesn't matter what you call them.


Tris 7 years ago

Colleen.

You the best! Cheers. :)


hot dorkage profile image

hot dorkage 7 years ago from Oregon, USA Author

Tris, I tried to email you back with the addy you specified but it didn't work. I'll try one more time. Anyway I'm glad it's working for you.


Tris 7 years ago

Hi Coleen, sorry I did not get an email. I'll send you my email again. Cheers! but it is working great now you can check the site to see if you wish. Your info is the best - have a good one!


Glenn Stok profile image

Glenn Stok 6 years ago from Long Island, NY

Wonderful!!! Worked perfectly!!! I followed your instructions to install the embedded audio player on my web site. Then I made a test page with three players, each one playing a different mp3 file. Everything went really well.

I like the fact that this player waits to be played on demand only. That is the only reasonable way to have it. Otherwise people will get upset if sound starts automatically.

It would be neat if we had an audio capsule on Hubpages. I am working on my 4th hub, this one about singing Karaoke and I was thinking of placing a few links to mp3 files of 'me' singing. Ha Ha.

Thanks for this hub.


hot dorkage profile image

hot dorkage 6 years ago from Oregon, USA Author

Yah I asked for an audio capsule ages ago. They can't figure out how it would add value for their monetization is my guess why they don't have one.


Mamta 6 years ago

I have a standalone player embedded into my website and i need it to play a file after automatically downloading it over the internet. My mp3 file url looks something like this

https://websiteName.com/listen.php?id=randomNUmber...

If i open this link , i get an mp3 file. Downloading it manually and then playing it over the embedded player works however it doesn't work if i enter this link directly into the soundFile="link".

Please help.

Thanks,

Mamta


hot dorkage profile image

hot dorkage 6 years ago from Oregon, USA Author

The javascript can't resolve dynamic stuff like that. You would need to write a serverside script to resolve the listen.php?id=xxx to an actual mp3 file, upload it to your own web, then dynamically generate the player code, i.e., you need to embed direct static links directly to the actual target files. If you don't know how to do this I can do it for you as a professional service.


Mamta 6 years ago

Thank you so much for your help. I am going to try and do this today!!

Mamta


Ann 6 years ago

I'm wondering what is meant by, "create a file" on my website? I've uploaded the two files, and my mp3 file to the documents section of my website, and pasted the html code to the module, but nothing is coming up. Can you help? I want to put mp3 players, with excerpts from each of my upcoming novels, and my childrens book series on my site.


hot dorkage profile image

hot dorkage 6 years ago from Oregon, USA Author

You create a file by uploading a file to your website's folder on the server. The most common error is not aligning the references to one file within another file with the reality of how you actually have them laid out on your website's file system. I'd have to see it to be any more specific about why it isn't working.


Ann 6 years ago

Thank you! I went ahead and took your advice, signed up for a podomatic account. Works perfectly for me. Thanks again for your help.


hot dorkage profile image

hot dorkage 6 years ago from Oregon, USA Author

Hmmm... well I never adviced anybody to sign up for podomatic because I don't know what that is. Now I'm curious. Anyway I'm glad you got it all working. :)


hot dorkage profile image

hot dorkage 6 years ago from Oregon, USA Author

For the record, podomatic is a website that will host audio for you and mangle it into a player which you can embed in your website. It's a little slower of course, and there are limits how many podcasts and bandwidth you can have for free. This hub was how to host the audio yourself. Podomatic is pretty easy. You don't have quite the control though, and if they ever go away or change their rules you're screwed. That's why I prefer not to depend on third parties.


Ann 6 years ago

Oh, sorry, I must have gotten you mixed up with the lady on another website.

I'm still interested in doing my own, only, I still don't quite understand how to create a folder on the server? Which particular area I need to be in? There is a document gallery, template gallery, and an image gallery when I log on and click, 'design site.' I uploaded the three files to the documents section.


hot dorkage profile image

hot dorkage 6 years ago from Oregon, USA Author

It depends on how you communicate with your server. If you use some sort of FTP there should be a knob or something on your FTP software to create a folder. You would want to be inside of your web site's folder on the server when you do it, so your FTP will put the folder there. But it sounds like you have one of those management interfaces and they're all different. If you don't want to or can't create a new folder you could serve your mp3 files from where they sit. You just would need to alter the html code above so it points to the correct URL where your mp3 files actually are. http://www.yourdomain.com/documents/my.mp3 (maybe??)

and it is case sensitive. Your hosting support should be able to provide you the specific details you need.


Ann 6 years ago

I went into the Microsoft Office Live help section and found a bit of information. In order to create a folder with a link to my website homepage, I have to enable the third party site design software. The problem is, it would delete my whole site and I would have to redesign it manually. I know, sounds insane! Especially when all I want to do is create one 'audio' folder.

I'll try changing the url as you suggested at a later date. For now, I have a few more things to update on my site, and I need to add another animated video before tackling this issue. Hopefully podomatic will hang in there until I get time to add my own audio player...Lol!

Thanks so much for all of your help!


hot dorkage profile image

hot dorkage 6 years ago from Oregon, USA Author

That business with deleting the whole site seems unbelievably lame. Surely you could suck down a backup copy of your site, no? Oh wait. You did say Microsoft. Is my bias showing?


Ann 6 years ago

Bias? Lol!

GOT IT! I just uploaded the two files, along with my three mp3 files to the documents section. I then right-clicked on each file to get the url, and I added it to the code. It was so easy that I'm ashamed now. :D

Thank You! I'm so anal about being defeated by anything. I'm very tech-savvy, and it bothered me that I couldn't figure it out. I had to do it before getting to bed, or else I would have dreamed about podomatic disappearing and my voice clips needing to be redone, another thing on my to-do list.

Thanks again... you're a genius!


hot dorkage profile image

hot dorkage 6 years ago from Oregon, USA Author

I'm also considered somewhat tech savvy, yet sometimes I get confused by systems that were designed for non techs. It's because I am a control freak. Sometimes you can push their little GUI buttons without really knowing what's going on and everything works, but if you want to do anything outside of normal then you have to sieze control. I doubt podomatic will disappear tomorrow but its funny how I have a history of setting those third party things up and forgetting them and if the website lasts any time at all they drop out of play leave big holes and possibly it drives users away before someone finally tells me.


Ann 6 years ago

Alright, I've embedded all three of them, and even changed their colors. The sound is crytal clear, wonderful!

My online portfolio is coming along great.

There are just a few minor things, there is no slider and the counter doesn't move at all in internet explorer. It says connecting the whole time the clip is playing.

In firefox, on my 'coming soon' page, the name of the person and the name of the clip shows. The slider can also be seen visibly moving, only, the audio on my children's page doesn't show up at all in firefox. It's like there's nothing there. Can I fix that? I suppose I should just hope people accessing my site will be using internet explorer.

I'm done fighting around about it, for real this time! I'm moving on to obssess about my teaser trailer now.

Thanks again. I've definitely save your website for future references.


exjwlaurie 5 years ago

Wow--your knowledge of this is intimidating to say the least! It is all "geek" to me however, I still have no idea where to begin to tackle adding a audio file.

Are you saying that there is no way that we can add a podcast or audiofile to a hub, even if the audiofile is hosted elsewhere? It is simply impossible?

I have a hubsite and I really wanted to upload a 35 minute podcast, 'AS' a hub. Is that impossible to do--in general I mean, not just because I am woefully un'geek'able?

I see many hubsites with 'You Tube' video's embedded in them, I would think an audio file would be easier to embed than video 'with' audio. Then again, I can barely check for voice messages on my disposable phone.

So, my question is--is it possible to have an audio file or podcast embedded on hubsite as a hub. And if it is somehow possible--could you help me do it? Or do I need to open an account with another "blogsite" in order to make this happen?

At any rate--I am in awe of your knowledge and ease with all things tech related! I voted you up and awesome!

-Laurie


hot dorkage profile image

hot dorkage 5 years ago from Oregon, USA Author

Thanks for the kind words Laurie. If you want audio you could just create a video using your audio with nice "filler" still pix for the video upload it to youtube and embed it in your hub. To my knowledge there's no way to directly embed straight audio only in a hub.


exjwlaurie 5 years ago

I had considered that, but I think they only allow a 10 minute video on You Tube. My audio is longer than that, so I will probably hold off for now--and hope that hubpages will decide to enable an audio function sometime down the road!

Thanks for the good option! You are great to share your knowledge with us!


hot dorkage profile image

hot dorkage 5 years ago from Oregon, USA Author

I have never embedded anything except youtube on hubpages but I believe they allow other video services which might have a longer length limit.


GusTheRedneck profile image

GusTheRedneck 4 years ago from USA

Howdy Colleen (hot dorkage) - I am more or less sure that you already know about installing audio files (like MP3s made using Audacity) onto PDF text and image pages. It's a real piece of cake to do and it works nicely, allowing the viewer to click to start or stop sound. As you also already know, this is not suitable for use directly on HubPages.

Enjoyed your fine article here. Thanks.

Gus :-)))


hot dorkage profile image

hot dorkage 4 years ago from Oregon, USA Author

Don't you need some other tools to make PDF files?

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working