Web HTML5 Audio Fallback Code

To embed audio and or, video in your website, my advise is that you should be using HTML5.

In this section I want to concentrate primarily on audio and keep to the basics to try to make it as easy as possible for beginners or for those that are new to this aproach.

HTML5 is the next major version of HTML, the primary standard that determines how web content interacts with browsers. HTML5 supports audio and video playback natively in the browser, importantly without requiring a plug-in. With HTML5, you can add media to a webpage with just a line or two of code.

With use of HTML5 media elements, they provide a simple fallback for browsers that still need to use plug-ins, this means that you can update your website to HTML5 straight away and still be compatible with older browsers or browsers that do not fully support HTML5.

When we use HTML5, we can create our own customized media controllers for rich interactivity using web-standard CSS and JavaScript. (More about this in future articles)

The HTML5

<audio> tag makes it simple to add your media to your website. Just include the <audio> element, use the src attribute to identify the media source, and include the controls attribute. For example.

<audio src=”mysong.mp3″ controls></audio>

Result below.

In the result example above, I replaced the source file ‘mysong’ for my audio source file. For you to test this for yourself you would have to add your audio source file.

That’s it!

There are no plug-ins to install or configure. Just replace the audio source (the audio file in between the quotation marks), for your own audio file. The audio will download and play in your webpage with built-in controls. It’s as simple as that!

At this time of writing I tested this on Firefox Google chrome and Safari on my Mac older versions of firefox only supported ogg audio extensions and Opera only supports ogg audio. So for cross browsers support for audio to play on all major browsers we need to also have different versions of the same audio to load to the relevant browser to play. This can be acheived very easily in HTML5.

First we need to understand which browsers support which audio extension see below.

Audio browser support Web HTML5 Audio Fallback Code

Alternative Audio Sources

We can easily Provide Alternate Sources.

example.

Not all browsers can play all media sources. Some browsers are able to play MPEG-4 or MP3 files, while others play only files compressed using codecs such as Ogg Vorbis. Desktop computers can typically play media using a wider assortment of compressors than mobile devices. Safari supports streaming delivery using HTTP Live Streaming, while some other browsers support only HTTP download. To provide the best experience for everyone, you can provide multiple versions of your media. List the sources in order of preference using separate <source> tags. The browser iterates through the list and plays the first source that it can play.

As we can see the most widely supported audio format is ‘mp3’, these are compressed formats, ‘Wav’ files could also be used for better quality, but these files would be very largein size and in most cases impracticle to use on websites for page loading reasons.

The above example is the very basic way to add audio to your website and the player provides default controlls to the player. we can emit the controls by simply leaving out the control tag.

We can add additional atributes to the player to further customise using both css and javasript, we will discuss this further. I will also discuss the simple HTML fallback procedure for browsers that do not support HTML5 in my next article.

Was this helpful?

I would really appreciate your feedback and suggestions about this topic. Please send me a message and I will reply try to add them below in this article. Contact us Here with your comments or simply click the Face book like button above if you found this helpful.

In the near future we will be discussing the new Javascript and HTML5 Audio API, I hope to show many code examples and some very exiting custom players for those that may be interested like me.

I will be expanding on this subject in the next tutorial so please bookmark this page!