Simply stated, there are two primary media elements for HTML5, both of which are absurdly easy to use. The audio element is named , and the video element is named . In HTML5, the browser determines which players are built-in and thus available for use. You need to plan your use of audio and video accordingly.
Here’s a simplified version of what audio markup looks like:
<audio src="sounds.ogg" <i>controls</i>>Alternatives</audio>
Here the src attribute points to the audio file you’d like to have played back. It specifies the location for the audio object for playback. The location must be a valid URI (Uniform Resource Identifier) that, just like a URL, identifies where the browser should look for the audio file.
The controls entry stands in for a number of control attributes you can use to manage audio playback and behavior, as follows (presented in alphabetical order):
autoplay: Tells the browser to start playing audio as soon as the object file is loaded. The only legal value for this attribute is autoplay, but no value is strictly required in HTML5.
controls: Tells the browser to display an onscreen widget to control audio playback (usually with Pause/Play buttons, a progress bar, and volume controls). As with autoplay, the only legal value for this attribute is controls, but no value is strictly required in HTML5.
loop: Tells the browser to go back to the beginning and keep playing when it gets to the end of the object file. Here, too, the only legal value for this attribute is loop, and no value is strictly required.
preload: Tells the browser whether it should preload the object file, and if so how it should be preloaded. Possible values include
none: Doesn’t load any part of the audio file when the page loads
metadata: Loads only the audio metadata when the page loads. It also sets up playback but doesn’t have data loaded yet.
auto: Loads entire audio file when the page loads
The preload attribute is ignored if autoplay is present.
The Alternatives section is very interesting and quite helpful in supporting older browsers. Page visitors see, or run, the content inside the tags only if their browser doesn’t support the audio element (because their browser ignores tags it doesn’t recognize), but HTML5-savvy browsers are smart enough to skip such alternative directions.
This is where you can call plug-ins for specific players and different file formats because you know that only visitors who can’t use the built-in HTML5 audio playback capabilities will encounter this markup.
The example here takes advantage of that to show you how to call other file formats in case your chosen format can’t be played. As shown, a browser that lacks HTML5 audio support would display the word Alternatives onscreen!
Here’s some markup that won’t play back an .ogg audio file until the user triggers the Play button on the onscreen controls, with continuous looping as long as the page stays onscreen. It also provides WAV and MP3 alternatives for older browsers:
<audio controls preload="none" loop> <source src="sound.ogg" type="audio/ogg"> <source src="sound.wav" type="audio/x-wav"> <source src="sound.mp3" type="audio/mpeg"> <p>Browser does not support HTML5 audio; alternate playback provided.</p> </audio>
By default, if you don’t include a src attribute in the opening tag, the target for the first
If players for the three formats are not available, no sounds will be played at all. As soon as the browser finds a player to match the type of sound file (.ogg first, .wav second, .mp3 third), the browser uses the player to play the sound, and then the browser continues processing the remainder of the HTML document that follows.
This figure shows what this page inside a properly constructed HTML file with some additional text and information looks like onscreen in Chrome.
