.:[July 23rd - 17:30 CET/GMT-0500]:.

Tips & Tricks to RFC Compliant (x)HTML

Topics:

Document Types
Embed Flash objects in HTML
Switch pages to SSL (https://)
Embed audio in HTML
Prevent MSIE Browser using Mod Rewrite

Audio in HTML

Many people uses the <bgsound> and the <embed> elements to play background music on their website(s). This is just so wrong, neither element is in the HTML RFC, bgsound is a MSIE element, and embed is for Gecko/Netscape browsers. Stop using them– Use the <object> element instead, it is the same method as if you were embedding Flash content in your HTML as described in the Flash satay.

In HTML5 you can simply use the <audio> element, see the 5th example, and more info at W3Schools

Here are 5 examples on how to use the <object> and <audio> element to play music

MiME type: audio/mpeg


	<object type="audio/mpeg" data="filename.mp3" style="height:20px;width:200px;">
		<param name="src" value="filename.mp3">
		<param name="autoplay" value="true">
		<param name="autostart" value="1">
		<a href="filename.mp3">Click to Play</a>
	</object>
					

MiME type: audio/x-wav


	<object type="audio/x-wav" data="filename.wav" style="height:20px;width:200px;">
		<param name="src" value="filename.wav">
		<param name="autoplay" value="true">
		<param name="autostart" value="1">
		<a href="filename.wav">Click to Play</a>
	</object>
					

MiME type: application/ogg


	<object type="application/ogg" data="filename.ogg" style="height:20px;width:200px;">
		<param name="src" value="filename.ogg">
		<a href="filename.ogg">test.ogg</a>
	</object>
					

MiME type: audio/x-midi


	<object type="audio/x-midi" data="filename.mid" style="height:20px;width:200px;">
		<param name="src" value="filename.mid">
		<param name="autoplay" value="true">
		<param name="autostart" value="1">
		<a href="filename.mid">Click to Play</a>
	</object>
					

HTML5


	<audio src="filename.ogg" controls="controls">
		<a href="filename.ogg">Click to Play</a>
	</audio>
					

Notes:

  1. Replace filename.ext with the actual path and filename
  2. If you want to hide the player then set the height and width values to 0
    Make sure autoplay is on if you do.
  3. The <a> element is used as an alternative if the browser doesn't know how to handle the object.
  4. To disable autostart change the value of autoplay to false and autostart to 0
    Both are required cause browsers handles autoplay differently; Stupidly the browser-makers can't use 1 standard.
    Safari ignores both, and plays the sound as soon as the page is loaded.
    As well as ogg files always starts automatically.
  5. MSIE≤8 can't play ogg files natively, or at least my IE8 can't, and several Google search results says the same. I don't know about IE9.
  6. You need the DirectShow Filters from Vorbis' website to play ogg files in Mediaplayer (WMP).
  7. I have had little luck getting Chrome v/8.0.x on Linux to play any of the 4 <object> examples,
    All I get is this crappy error:
    [15992:15992:2994450359198:ERROR:webkit/glue/plugins/webplugin_delegate_impl_gtk.cc(133)] Not implemented reached in bool WebPluginDelegateImpl::WindowedCreatePlugin() windowed plugin but without xembed. See http://code.google.com/p/chromium/issues/detail?id=38229
  8. MSIE might ask the visitor if they want to run the Active-X object (Mediaplayer), once for each object.
  9. Getting midi files to play in Firefox on Linux is a pain, and I am not giving you a HoW-To… You should be able to play them with the timidity++ and mozplugger packages. If they aren't in any of your repos, you'll have to compile them from source, best of luck, I had zero of it.
    See these external sources for more info:
    Playing Midi Files in Linux Firefox, this Forum Topic at Ubuntu Forums, and of course your best friend Google.
  10. …Anything I left out, forgot, or simply just didn't write. :-)

Top

Related pages