Advertisement
HTML & CSS

Quick Tip: The HTML 5 Audio Element

by

As of Firefox 3.5, Chrome 3, Opera 10.5, and Safari 4, we can take advantage of many of the new HTML 5 features, including native audio support without the need for Flash. As you'll find, we only to create the new <audio> element, and set a few attributes. In this four minute video quick tip, we'll review the mark-up, and also a quick way to play audio with jQuery.


The Audio Element

<audio autoplay="autoplay" controls="controls">
	<source src="file.ogg" />
	<source src="file.mp3" />		
</audio>

The audio element accepts a handful of attributes, most notably:

  • autoplay : Immediately plays the file when the page loads.
  • controls : Displays the player on the page.
  • preload : Immediately begins buffering the file. (values = none, auto, metadata)
  • src : The path to the file name. It's a better practice to load the file via the child "source" element instead.

Mozilla and Webkit don't fully get along just yet, when it comes to the audio format. Firefox will want to see an .ogg file, while Webkit browsers will work just fine with the common .mp3 extension. This means that, at least for now, you should create two versions of the audio. I recommend that you use a quick and simple online tool, called Media.io, to convert your mp3 over to the ogg format.

When Safari loads the page, it won't recognize that .ogg format, and will skip it and move on to the mp3 version, accordingly. Please note that IE, per usual, doesn't support this, and Opera 10 and lower can only work with .wav files.


Loading Audio with jQuery

// Slightly modified from video version.
$(document).ready(function() {
    // Create an audio element, and set it to autoplay, 
   // and show the player when the page loads.
    var audio = $('

Please note that we can go much, much further with this, including how to stop the audio, change the volume, etc. This quick three minute tip is just to whet your appetite. If you'd like to delve deeper, let us know and I'll schedule a full thirty-minute tutorial on the topic!

Related Posts
  • Code
    Web Development
    Alternatives to PrefixrCss3 wide retina preview
    With Prefixr no longer being developed, let's look at a few alternatives for managing CSS vendor prefixes.Read More…
  • Code
    JavaScript & AJAX
    Using CreateJs: PreloadJS, SoundJS, and TweenJSCreatejs wide retina preview
    In the first part of this series about using CreateJs, we had a look at EaselJs. In this second and last part, we will look at PreloadJs, SoundJs, and TweenJs.Read More…
  • Code
    HTML & CSS
    Intro to Shadow DOMShadow dom retina preview
    Take any modern web page and you will notice that it invariably contains content stitched together from a variety of different sources; it may include the social sharing widgets from Twitter or Facebook or a Youtube video playing widget, it may serve a personalized advertisement from some ad-server or it may include some utility scripts or styles from a third party library hosted over CDN and so on. And if everything is HTML based (as is preferred these days) there is a high probability of collisions between the markup, scripts or styles served from various sources. Generally, namespaces are employed to prevent these collisions which solve the problem to some extent, but they don't offer Encapsulation.Read More…
  • Code
    Other
    Client-Side Security Best PracticesSecurity best practices retina preview
    Thanks to HTML5, more and more of an applications' logic is transferred from server-side to client-side. This requires front-end developers to focus more on security. In this article I will show you how to make your apps more secure. I will focus on techniques that you may not have heard about, instead of just telling you that you have to escape HTML data entered in by users.Read More…
  • Code
    JavaScript & AJAX
    Using Node.js and Websockets to Build a Chat ServiceNodejs chat service retina preview
    Node.js and Websockets are the perfect combination to write very fast, lag free applications which can send data to a huge number of clients. So why don't we start learning about these two topics by building a chat service! We will see how to install Node.js packages, serve a static page to the client with a basic web-server, and configure Socket.io to communicate with the client.Read More…
  • Code
    PhoneGap
    Build an AudioPlayer with PhoneGap: Application SetupAurelio audio player@2x
    You don't need to use platform-specific technologies to develop powerful and engaging apps. This series will teach you how to create a hybrid app - specifically an audio player - using web technologies and frameworks like jQuery Mobile and Cordova (also known as PhoneGap). The first framework will be used to create the interface, while several of the APIs of the second, like Media and File, will be used to develop the business logic.Read More…