HTML5 provides us with the <audio> element, which specifies a standard way to embed an audio file on a web page. There's no more trouble in installing plugins in your browsers! It needs a controls attribute to add audio controls, such as play, pause, and volume (see the following screenshot):

The controls attribute

Of course, you also need to indicate where the browser can find the source of the sound file through the <source> element and its src attribute. However, we all know that media files come in different formats, such as MP3, WAV, and OGG. These are the currently supported file formats, and only Chrome supports all three of them. The format is described via the type attribute of <source>, as in type="audio/mpeg" for MP3. Luckily, the <audio> element allows multiple <source> elements, so we can link to different audio file formats. The browser will use the first recognized format. Try it out with audio00.html:

  <audio controls>
   <source src="dog.mp3" type="audio/mpeg" />
    <source src="dog.ogg" type="video/ogg" />
      The audio tag is not supported in your browser. 
      Download the audio <a href="dog.mp3">here</a>.
    </audio>

Note that Dartium didn't support the <audio> format MP3 with local sounds until now. To set up HTML5 audio in the most robust manner, you can also add the codecs info to the type attribute, as we did in audio01.html:

<source src="dog.ogg" type="audio/ogg; codecs='vorbis'" />

The source can also be a URL reference as in audio02.html:

src= "http://www.html5rocks.com/en/tutorials/audio/quick/test.mp3"

Refer to http://html5doctor.com/html5-audio-the-state-of-play/ to find out more information. Using sound in Dart is very easy too (see audio_dart); just give the <audio> element an ID so that you can reference it from code, like this

  AudioElement thip = querySelector('#thip'),
   thip.play();

Now, the sound file will start to play. We will apply this to enhance our game—we play a sound when two similar images are found, and another when the memory is recalled (in board.dart):

void onMouseDown(MouseEvent e) {
    // code left out
    if (cell.twin == lastCellClicked) {
      lastCellClicked.hidden = false;
      // play sound found same 2 images:
      AudioElement thip = querySelector('#thip'),
      thip.play();
      if (memory.recalled) { // game over
        AudioElement fireballs= querySelector('#fireballs'),
        fireballs.play();
    // code left out
}

For more serious sound applications, HTML5 introduced the Web Audio API. Dart incorporated this in its dart:web_audio library. This package makes it possible to process, mix, filter, and synthesize sound in your web applications. A Dart game that uses this is Pop, Pop, Win!, a Minesweeper variant by Kevin Moore. You can play it at https://www.dartlang.org/samples/ and find the source at https://github.com/dart-lang/pop-pop-win. You can find detailed information on Web Audio at http://www.html5rocks.com/en/tutorials/webaudio/intro/.

If you need less sophistication, you can use the simple_audio library written by John McCutchan, which you can find at https://github.com/johnmccutchan/simple_audio.

The AudioManager class is the main entry point in this library. You can create AudioClips and AudioSources and play clips from the sources with the manager. This library is used in the game Collision Clones, which will come next.