Wednesday, February 1, 2012

Web Audio API and Dart

Posted by Seth Ladd

UPDATE: 2012/05/12 - remove dart:dom and use dart:html

It's possible to use Frog to compile Dart code that uses Web Audio API. This means Dart can now access a high performance, positional, low latency audio.

The following example code loads up a MP3 over XHR and controls the volume through a slider.


main() {
  AudioContext audioContext = new AudioContext();
  AudioGainNode gainNode = audioContext.createGainNode();

  XMLHttpRequest xhr = new XMLHttpRequest();"GET", "button-3.mp3", true);
  xhr.responseType = "arraybuffer";
  xhr.on.load.add((e) {

    // asynchronous decoding
    audioContext.decodeAudioData(xhr.response, (buffer) {
      playSound() {
        AudioBufferSourceNode source = audioContext.createBufferSource();
        source.connect(gainNode, 0, 0);
        gainNode.connect(audioContext.destination, 0, 0);
        source.buffer = buffer;

      var button = document.query("#play");
      button.disabled = false; {
    }, (error) {
      print('Error decoding MP3 file');



  document.query("#volume").on.change.add((e) {
    var volume = Math.parseInt(;
    var max = Math.parseInt(;
    var fraction = volume / max;
    gainNode.gain.value = fraction * fraction;


Here's the simple HTML page:

<!DOCTYPE html>

    <meta charset="utf-8">
    <title>Hello World</title>

    <h1>Hello World!</h1>
    <button id="play" disabled>Play</button>
    <label for="volume">Volume: <input type="range" min="0" max="100" id="volume" value="100"></label>
<script type="application/dart" src="app.dart"></script>
    <script src=""></script>

NOTE: Dartium, like Chromium, does not play MP3 files. Use an OGG or WAV file with the above sample in Dartium.

To learn more about Web Audio API, I can recommend Getting Started with Web Audio API.

This fix is only in bleeding_edge, so you'll have to compile the project but it will show up in an SDK build very soon. Please do give it a try and let us know how it works.