How can I attractive embed mp3 audio files on my Web pages?

There are a variety of different ways you can tackle this, depending on how fancy you want to get, but I have to say that my preference is to use either a Flash-based audio player control (I like the one associated with Google Reader) or the less glamorous but still effective Quicktime Audio player. The difference? I guess the biggest difference nowadays is that Apple's iPad and some other devices are still not Flash-friendly, so if you use a Flash controller and someone with an iPad views your page, well, they won't see anything.

The other options are a Windows media player widget or a Real Audio player, and they also have pros and cons. Let's stick with Flash and Quick time for now, though...

Let's start with the Quicktime widget in case you are expecting that not everyone who visits your site will be using a computer and Web browser. It's a bit tricky, but here's an example of the controller appearance:

<object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="290" height="27" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="http://eblogblogspot.blogspot.in/embedded-audio-sample.mp3">
<param name="autoplay" value="false">
<param name="controller" value="true">
<embed src="http://eblogblogspot.blogspot.in/embedded-audio-sample.mp3" width="290" height="27" autoplay="false" controller="true" pluginspage="http://www.apple.com/quicktime/download/">
</embed>
</object> 

I've highlighted in bold face the two spots you should replace my URL with your own, but otherwise you can just copy and paste and you're good to go.

Now, if you want to be a bit annoying you can automatically have the audio start to play by changing both occurrences of auto play, one that says "autoplay value="false" and the other that's simply autoplay="false", to "true". Then when someone loads your page, the audio will automatically start up, which might be good for your purposes, but could also annoy the heck out of people visiting your site. Use with discretion.

Flash Mp3 Audio File Controller

 So what about the Flash based controller? Well, it definitely looks nicer, as shown here:

Is it easier to work with? Surprise, it's more succinct and easier to tweak too:

<embed type="application/x-shockwave-flash" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" quality="best" flashvars="audioUrl= http://eblogblogspot.blogspot.in /embedded-audio-sample.mp3" width="320" height="25"></embed> 

Personally I think it's nice that there's no autoplay option, and as with the Quicktime controller, you can tweak and fiddle with the size attributes to get the result you seek.

I hope that's given you some useful options in terms of embedding audio files on your site!