Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Adding audio to a website

Sunday, December 8th, 2013 by Servage

Here we discuss the principles behind adding audio elements to your webpage.

<audio>...</audio>
Adds an audio file to the page

If you’ve wrapped your head around the video markup example, you already know how to add audio to a page. The audio element uses the same attributes as the video element, with the exception of width, height, and poster (because there is nothing to display). Just like the video element, you can provide a stack of audio format options using the source element, as shown in the example here.

<audio id="soundtrack" controls preload="auto">
<source src="soundtrack.mp3" type="audio/mp3">
<source src="soundtrack.ogg" type="audio/ogg">
<source src="soundtrack.webm" type="audio/webm">
</audio>
<p>Download the Soundtrack song:</p>
<ul>
<li><a href="soundtrack.mp3">MP3</a></li>
<li><a href="soundtrack.ogg">Ogg Vorbis</a></li>
</ul>

If you want to be evil, you could embed audio in a page, set it to play automatically and then loop, and not provide any controls to stop it like this:

<audio src="soundtrack.mp3" autoplay loop></audio>

But you would never, ever do something like that, right? Right?! Of course you wouldn’t.

Another cool, “Look Ma, no plug-ins!” addition in HTML5 is the canvas element and the associated Canvas API. The canvas element creates an area on a web page that you can draw on using a set of JavaScript functions for creating lines, shapes, fills, text, animations, and so on. You could use it to display an illustration, but what gives the canvas element so much potential (and has all the web development world so delighted) is that it’s all generated with scripting. That means it is dynamic and can draw things on the fly and respond to user input. This makes it a nifty platform for creating animations, games, and even whole applications…all using the native browser behavior and without proprietary plug-ins like Flash.

The good news is that Canvas is supported by every current browser as of this writing, with the exception of Internet Explorer 8 and earlier. Fortunately, the FlashCanvas JavaScript library (flashcanvas.net) can add Canvas support to those browsers using the Flash drawing API. So Canvas is definitely ready for prime time.

Mastering the canvas element is more than we can take on here, particularly without any JavaScript experience under our belts, but I will give you a taste of what it is like to draw with JavaScript. That should give you a good idea of how it works, and also a new appreciation for the complexity of some of those examples.
The canvas element
You add a canvas space to the page with the canvas element and specify the dimensions with the width and height attributes. And that’s really all there is to the markup. For browsers that don’t support the canvas element, you can provide some fallback content (a message, image, or whatever seems appropriate) inside the tags.

<canvas width="600" height="400" id="my_first_canvas">
Your browser does not support HTML5 canvas. Try using Chrome, Firefox, Safari or Internet Explorer 9. 
</canvas>

The markup just clears a space on which the drawing will happen.

Resources and further reading

HTML Goodies

W3 Schools

Adding audio to a website, 5.0 out of 5 based on 2 ratings
Categories: Guides & Tutorials, Tips & Tricks

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.