Question

Background

I’m making a canvas game which assumes the user to be using a browser with native canvas support (no IE < 9 scripts or similar). The user is being shown a message with links to download the latest version of their browser if they don’t have one. This is displayed through a message in the <canvas> content as follows:

    <canvas>
        Error message (upgrade... safer, faster, better... free...
                       ...play this awesome game... getfirefox.com)
    </canvas>

Question

Is it safe to assume that any browser supporting the <canvas> tag also supports the <audio> tag? Or will I need to add an extra error message with the risk of displaying two messages on top of each other? What I’m worried about is their screens getting cluttered up with error messages in case they don’t have native support for audio, but they do for canvas.

I understand that all the latest versions of IE, Firefox, Chrome, Safari and Opera do support both canvas and audio, but I’m not sure about mobile browsers and “in-between versions” and such. Other ideas of approaches are also appreciated!

Thank you in advance!

Best regards,
  Anton

Answer 1

Browsers that support <canvas> but not <audio> (according to When can I use…):

• Safari 3.2
• Opera Mini 5.0-6.0
• Opera Mobile 10
• Android Browser 2.1-2.2

Alternative method

Detect features with JavaScript:

• <audio>: return !!document.createElement('audio').canPlayType;
• <canvas>: return !!document.createElement('canvas').getContext;

And display messages accordingly.

See The All-In-One Almost-Alphabetical No-Bullshit Guide To Detecting Everything for a full list. If you want an all-in-one library for HTML5 feature detection, try Modernizr.