O'Reilly logo

HTML5 Multimedia Development Cookbook by Lee Jordan, Dale Cruse

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Random animation with audio using the canvas tag and JavaScript

In this recipe we will use the canvas tag to draw and animate a series of shapes. We will also loop an audio file using the audio tag to play while the animation displays. We are adapting an original animation created by Michael Nutt. We will be creating a slower, more relaxing animation that looks like waving grass.

Getting ready

You will need a recently updated browser, such as Firefox 3.6 or Google Chrome, and an audio file in multiple formats. It does display at a different (smaller) size in Opera browsers 9 and 10. The audio will also not play in those versions of Opera.

How to do it...

First, open a new HTML5 page and name it random-animation-with-audio.html. Enter the beginnings ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required