We Keep Coding

How can we make audio works in all browsers, what primitive can we use if a browser doesn't support it?

Well I am writing a web application using JavaScript and HTML5 and I have to put a sound notification in my web page, this is how I am calling it in JavaScript:
sounds: {
bip: new Audio('/sounds/bip.mp3')
}
But I want to make sure that this audio works in all browsers. So I have two questions:
How can I check if the audio works in all browsers?
I saw all the answers here and I also found solutions here:
DETECTING HTML5
FEATURES.
Using document.createElement() to test for browser support for an
element
So there was an answer for this question:
var test_audio= document.createElement("audio"); //try and create sample audio element
var audiosupport=(test_audio.play)? true : false;
But my problem now is:
How can I make sure that the audio will always play in all browsers? How can I replace the Audio() element with an alternative and compatible one?
How can I manage this?

You need this as an alternative for browsers that do not support audio element
<object data="/sounds/bip.mp3" >
<param name="src" value="/sounds/bip.mp3"/>
</object>
With JavaScript you could use something like this:
var obj = document.createElement('object'),
param = document.createElement('param');
param.name = "src";
param.value = "/sounds/bip.mp3";
obj.appendChild(param);
document.body.appendChild(obj);
You can check wether to use this or notusing Modernizr or with your code (have not tested):
var test_audio= document.createElement("audio"); //try and create sample audio element
var audiosupport=(test_audio.play)? true : false;

As you mentioned above you can easily check the compatibility, but I think as you can see in the comments this feature is rarely unsupported and there are few old browsers that doesn't support it and the main problem here is the MP3 codec support which you can test it with canPlay() and you can assure it like this:
var audio=document.createElement("audio");
audio.controls="controls";
//The mp3 source
var mp3Source=document.createElement("source");
mp3Source.src="myFile.mp3";
mp3Source.type="audio/mpeg";
//the ogg source
var oggSource=document.createElement("source");
oggSource.src="myFile.ogg";
oggSource.type="audio/ogg";
//Append the source elements to the audio
audio.appendChild(mp3Source);
audio.appendChild(oggSource);
Your currently used new Audio() construtor provides access to the properties of <audio> elements, as well as methods to manipulate them using :
mySound = new Audio([URLString]);
Take a look at MDN HTMLAudioElement Specifications where you can see that the new Audio() construtor is basically supported by approximately all browsers as you can see below:

how to check flash player is installed and enabled or not in IE and Chrome

I need to check whether Flash player is installed and enabled or not in IE/Chrome.
((typeof navigator.plugins != 'undefined' && typeof navigator.plugins['Shockwave Flash'] == 'object') || (window.ActiveXObject && (new ActiveXObject('ShockwaveFlash.ShockwaveFlash')) != false));
and
!!(navigator.mimeTypes["application/x-shockwave-flash"] || window.ActiveXObject && new ActiveXObject('ShockwaveFlash.ShockwaveFlash'));
Both are fine for all the browsers in all OS except Chrome.For chrome it gives true even if I disable the Flash Player. But for IE it is behaving differently on different systems also not working in IE6 at all. How to check for IE/Chrome if flash is installed and enabled or not.

Too tired to write up a whole thing, so here is a fiddle with some flash/silverlight detection i wrote a while back. Feel free to play with it and remove the silverlight part if you don't need it.
It basically boils down to looping through all plug ins like this:
function get (name) {
for (var i = 0, l = navigator.plugins.length; i < l; i++)
{
if (navigator.plugins[i].name === name) {
return navigator.plugins[i];
}
}
return undefined;
}
http://jsfiddle.net/nQ7fk/

I guess you might have already ruled this out but I would recommend using swfobject to manage your flash insertion:
http://code.google.com/p/swfobject/
It does have features that let you detect if flash is installed and it also can trigger the installation process and manage your general flash insertion in a cross-browser, standards compliant way.

Are there any javascript code (polyfill) available that enable Flexbox (2012, css3), like modernizr?

I'm looking for any javascript library that like modernizr (which actually does not) enables flexbox for "older browsers" (a polyfill).
Yea I know this is a really new feature (infact "there aren't" is a valid answer), but I'm hoping for something like this, I always have hard time with horizontal + vertical centering, this will really help and shorten the work.
I mean this flexbox: http://weblog.bocoup.com/dive-into-flexbox/ (the newest)

It might be too early for this. WebKit implemented it fairly recently, there's no hint of support in any mobile WebKit at all, Opera just released support for it, and Gecko's implementation is still in alpha. IE? Hah.
But as far as I can tell, no, there's no polyfill for the new flexbox. Flexie supports the old flexbox, and has a ticket open to support the new syntax... maybe you could give them a hand?
You could always use the old flexbox, I suppose, but then you're obsolete out of the gate. Sucky situation.

You're going to have to create your own.
http://www.sitepoint.com/detect-css3-property-browser-support/ has a section titled "Rolling Your Own Detection Code"
Basically you'll need something like this:
// detect CSS display:flex support in JavaScript
var detector = document.createElement("detect");
detector.style.display = "flex";
if (detector.style.display === "flex") {
console.log("Flex is supported");
}
else
{
console.log("Flex is not supported");
}
To expand on that and create a function:
function DetectDisplayValue(val)
{
// detect CSS display:val support in JavaScript
//
var detector = document.createElement("detect");
detector.style.display = val;
if (detector.style.display === val) {
console.log("Display value: " + val + " is supported");
}
else
{
console.log("Display value: " + val + " is not supported");
}
}

How to Check if the browser supports HTML5?

EDIT I have changed some Javascript now, so if I can find a javascript function that detects HTML5 Video support, it should work.
I have a HTML5 video player that has flash fallback, if HTML5 isnt supported, I want it to fallback to flash. Im currently using
<!--[if !IE]><!--> then load my custom player
else use SWFObject to render it.
Is it possible to do the folllowing:
` If (HTML5 supported browser) {
<some html and script> (My custom player)
}else{
<different html and script> (I would call SWFobject here)
}
`
Trying to find a nice easy solution idea.
Usually I would be able to have an additional <object> in the video tag, but this won't be possible due to the way the player is inserted into the page.
Even though I can detect HTML5 support with a possibly unreliable method, I'm not sure how to have my HTML based on the output of the support

Have you had a look at http://www.modernizr.com/docs/#features-css
It can do feature detection

The better solution is to use something like Modernizr to do your feature detection on the client-side.Modernizr is an open source, MIT-licensed JavaScript library that detects support for many HTML5 & CSS3 features.
If your browser does not support the canvas API, the Modernizr.canvas property will be false.
if (Modernizr.canvas) {
// let's draw some shapes!
} else {
// no native canvas support available :(
}
Ref
Another solution if you are using JQuery:
Checking for support for the canvas element of HTML 5
var test_canvas = document.createElement("canvas") //try and create sample canvas element
var canvascheck=(test_canvas.getContext)? true : false //check if object supports getContext() method, a method of the canvas element
alert(canvascheck) //alerts true if browser supports canvas element
Ref

One liner check...
// Plain JavaScript
(typeof document.createElement('canvas').getContext === "function")
// Or... Using lodash
_.isFunction(document.createElement('canvas').getContext)

Check out everything at Dive into HTML5 especially the 'Detecting HTML5 Techniques' section. It has pretty much everything you may need.

Here is how w3schools does it:
function checkVideo()
{
if(!!document.createElement('video').canPlayType)
{
var vidTest=document.createElement("video");
oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');
if (!oggTest)
{
h264Test=vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
if (!h264Test)
{
document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
}
else
{
if (h264Test=="probably")
{
document.getElementById("checkVideoResult").innerHTML="Yeah! Full support!";
}
else
{
document.getElementById("checkVideoResult").innerHTML="Meh. Some support.";
}
}
}
else
{
if (oggTest=="probably")
{
document.getElementById("checkVideoResult").innerHTML="Yeah! Full support!";
}
else
{
document.getElementById("checkVideoResult").innerHTML="Meh. Some support.";
}
}
}
else
{
document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
}
}

Detecting support for VML, help applying a previous post

I found the following in a previous post but need some help with it:
// For VML detection, here's what google maps does (search for "function Xd"):
function supportsVml() {
if (typeof supportsVml.supported == "undefined") {
var a = document.body.appendChild(document.createElement('div'));
a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
var b = a.firstChild;
b.style.behavior = "url(#default#VML)";
supportsVml.supported = b ? typeof b.adj == "object": true;
a.parentNode.removeChild(a);
}
return supportsVml.supported;
}
I would like to use the code to divert users to an alternative page when VML is not supported. Please could somebody show me how to write and implement the code to divert, say, to a page called alternative.html.
I have some knowledge of javascript but not this level!
Thanks.

You can just make a call to that function provided by Google, and it will return true if VML is supported and false if not. Don't forget, you will still need to add the xmlns for VML somewhere in your HTML.
if (!supportsVml())
window.location = "http://somedomain.com/no-vml.html";
Also, I would recommend using a cross-browser library for drawing vector graphics. There's a few to choose from in this blog post: Canvas/SVG/VML Drawing Roundup.

VML is only supported in Internet Explorer (as of 5.0) and is not supported in any other browser. So checking for IE should be just enough. This can be done in many ways, for example: !!document.namespaces