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.


#import('dart:html');


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


  XMLHttpRequest xhr = new XMLHttpRequest();
  xhr.open("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;
        source.noteOn(0);
      }


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


  });  


  xhr.send();


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


}



Here's the simple HTML page:


<!DOCTYPE html>


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


  <body>
    <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="http://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
  </body>
</html>


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.

Enjoy!