Skip to main content

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!

Popular posts from this blog

A stronger Dart for everyone

We are constantly asking ourselves:
How do we make developers even more productive when writing Dart apps? We believe that a critical part of the answer to this question is to make strongmode – a sound static type system for Dart – the standard for all Dart developers.

Teams that use Dart to build apps like Soundtrap, AdWords, AdSense, and Greentea say they really enjoy using strong mode features, such as early error detection. In fact, teams that have switched completely to strong mode cite not only early error detection but also better code readability and maintainability as major benefits. We hear this both from small teams and Рeven more so Рfrom large teams with hundreds of developers writing and maintaining millions of lines of Dart code. As Björn Sperber from Soundtrap says,
Strong mode and the smooth integration with IntelliJ is a joy to use and a huge improvement. If you’ve tried out Flutter, you’ve already used strong mode checks from the Dart analyzer.

Given the benefits …

AngularDart 4

AngularDart v4 is now available. We've been busy since the release angular2 v3.1.0 in May. Not only did we "drop the 2", but we also improved the compiler and tightened up the framework to give you smaller code, we updated the package structure to improve usability, and we added several new features. Check out the updated documentation to get started.
Just angular Upgrading to v4 will require more than updating your version constraint. The package has changed names (back) to angular – dropping the 2. You'll need to update your pubspec.yaml and the corresponding imports in your code. In most instances, find-and-replace should do the trick. Going forward, the package will be called package:angular. We'll just update the version number.
Smaller code The updated compiler in 4.0 allows type-based optimizations that not only improve runtime performance but generate better code because we are able to strongly type templates. A big result of the update is that many ap…

Dart 1.24: Faster edit-refresh cycle on the web & new function type syntax

Dart 1.24 is now available. It includes the Dart Development Compiler and supports a new generic function type syntax. Get it now!


Figure 1: DDC debugging in Chrome.

Some notable changes in this release:
pub serve now has support for the Dart Development Compiler. Unlike dart2js, this new compiler is modular, which allows pub to do incremental re-builds for pub serve.In practice what that means is you can edit your Dart files, refresh in Chrome (or other supported browsers), and see your edits almost immediately. This is because pub is only recompiling your package, not all packages that you depend on.There is one caveat with the new compiler, which is that your package and your dependencies must all be strong mode clean.You can also use the new compiler to run your tests in Chrome much more quickly than you can with dart2js.Read more in the changelog.You can now publish packages that depend on the Flutter SDK to pub. Moreover, pub.dartlang.org has started tagging Flutter plugins with …