Saturday, January 7, 2012

Adding audio with HTML

[sourcecode language="html"]
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="200" height="16">

<param name="src" value="fileName.mp3" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
<param name="autostart" value="0" />
<param name="pluginspage" value="http://www.apple.com/quicktime/download/" />

<!--[if !IE]> <-->

<object type="audio/x-mpeg" data="fileName.mp3" width="200" height="16">
<param name="src" value="fileName.mp3" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
<param name="autostart" value="0" />
<param name="pluginurl" value="http://www.apple.com/quicktime/download/" />

</object>

<!--> <![endif]-->

</object>

[/sourcecode]

IE and non-IE browsers treat audio objects in a web page two different ways. Therefore <Object> should be used carefully in order to play the audio in all browsers perfectly. In the code, there are two sections for IE and other browsers like FF.

IE looks for class Id before playing audio.  But other browsers do not use this attribute. They rely on the MIME type of the audio object. In the above code commented section is used by non IE  browsers to play audio.

Some Other sound formats

  • au (type="audio/basic")

  • wav (type="audio/wav" or "audio/x-wav")

  • ra (type="audio/x-pn-realaudio")

  • mp3 (type="audio/x-mpeg")

  • wma (type="audio/x-ms-wma")


Alternatives for class Id

  •  Quicktime player: classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"

  • Windows media Player: classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/ nsmp2inf.cab#Version=6,0,02,902"

  • Real Audio: id=RVOCX classid="clsid:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA"

  • Flash Shockwave Player : classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/ swflash.cab#version=8,0,22,0"

No comments:

Post a Comment

How to enable CORS in Laravel 5

https://www.youtube.com/watch?v=PozYTvmgcVE 1. Add middleware php artisan make:middleware Cors return $next($request) ->header('Acces...