For the latest Dart news, visit our new blog at https://medium.com/dartlang .
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!
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!