これから熱くなってきそうなWeb Audio API。
ネット上に上がっている情報は古いものが多いので2013/12/10時点での話を。
あたりを参考に、以下、とても簡単なサンプル。
-
環境
- Mac OS X MountainLion
- Fire Fox 25
index.html
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<title>SAMPLE</title>
</head>
<body>
<a href="" class="btn btn-default" id="play" disabled>play</a>
<script src="audio-sample.js"></script>
</body>
</html>
.audio-sample.js
window.onload = function() {
var e = document.getElementById('play');
var audioBufferLoader = new AudioBufferLoader('something.wav');
audioBufferLoader.onload = function(buffer) {
var context = this.context;
var source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination);
e.removeAttribute("disabled");
e.onclick = function() {
source.start();
};
};
audioBufferLoader.load();
};
function AudioBufferLoader(url) {
window.AudioContext = window.AudioContext
|| window.webkitAudioContext
|| window.mozAudioContext
|| window.msAudioContext;
try {
this.context = new AudioContext;
}
catch(e) {
alert('Web Audio API is not supported in this browser');
}
this.url = url;
this.buffer = null;
}
AudioBufferLoader.prototype.onload = function(buffer) {
// set your own callback!
// this is a default behavior
var source = this.context.createBufferSource();
source.buffer = buffer;
source.connect(this.context.destination);
source.start();
};
AudioBufferLoader.prototype.loadBuffer = function(url) {
var request = new XMLHttpRequest();
request.open('get', url, true);
request.responseType = 'arraybuffer';
var loader = this;
request.onload = function() {
loader.context.decodeAudioData(
request.response,
function(buffer) {
if (! buffer) {
alert('error decodeing file data: ' + url);
return;
}
loader.buffer = buffer;
loader.onload(loader.buffer);
},
function(error) {
console.error('decodeAudioData error', error);
}
);
};
request.onerror = function() {
alert('AudioBufferLoader: XHR error');
};
request.send();
};
AudioBufferLoader.prototype.load = function() {
this.loadBuffer(this.url);
};
注意点
AudioBufferLoaderクラスを作って、そのonloadにコールバックを渡して開発してく感じにしてみた。Web Audio APIのサンプルなどでよくあるsource.noteOn()だが、これはW3Cを見ればわかるけどsouce.start()に変わっているので注意。
実際には同一ディレクトリになんかwavファイルなりmp3を(ここではsomething.wav)配置してやれば、とりあえずボタンを押せば音が流せるはず。
stopだとかポーズだとかってのは今回は言及しないけど、ここらへんは結構ハマりどころなので注意が必要。