MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

AudioContext.createBuffer()

この翻訳は不完全です。英語から この記事を翻訳 してください。

インターフェースのcreateBuffer()メソッドは、新規の空のAudioBufferオブジェクトを生成します。そこにデータを書きこめば、AudioBufferSourceNodeで再生できます。

Note: createBuffer() used to be able to take compressed data and give back decoded samples, but this ability was removed from the spec, because all the decoding was done on the main thread, therefore createBuffer() was blocking other code execution. The asynchronous method decodeAudioData() does the same thing — takes compressed audio, say, an MP3 file, and directly gives you back an AudioBuffer that you can then set to play via in an AudioBufferSourceNode. For simple uses like playing an MP3, decodeAudioData() is what you should be using.

構文

var audioCtx = new AudioContext();
var buffer = audioCtx.createBuffer(numOfChannels, length, sampleRate);

引数

Note: For an in-depth explanation of how audio buffers work, and what these parameters mean, read Audio buffers: frames, samples and channels from our Basic concepts guide.

numOfChannels
integerで現されたバッファのチャンネルの数。実装は少なくとも32チャンネルに対応している
length
integerで表されたバッファのサンプルフレームの数
sampleRate
1秒あたりのサンプルフレームの数。実装は少なくとも22050から96000の範囲に対応している

戻り値

AudioBuffer

まずは2つの小さな例で、引数をどのように設定するかを説明します:

var audioCtx = new AudioContext();
var buffer = audioCtx.createBuffer(2, 22050, 44100);

このようにすると、ステレオ(2チャンネル)のバッファが生成され、44100Hz(極めて一般的で、多くの通常のサウンドカードはこのレートで動作します)のAudioContextで再生すると、0.5秒間(22050フレーム / 44100Hz )となります。

var audioCtx = new AudioContext();
var buffer = audioCtx.createBuffer(1, 22050, 22050);

このようにすると、モノラル(1チャンネル)のバッファが生成され、44100HzのAudioContextで再生すると、自動的に44100Hzに再サンプリングされ(そして結果として44100フレームとなり)、1秒間(44100フレーム / 44100Hz)となります。

Note: audio resampling is very similar to image resizing: say you've got a 16 x 16 image, but you want it to fill a 32x32 area: you resize (resample) it. the result has less quality (it can be blurry or edgy, depending on the resizing algorithm), but it works, and the resized image takes up less space. Resampled audio is exactly the same — you save space, but in practice you will be unable to properly reproduce high frequency content (treble sound).

次は少し複雑なcreateBuffer()の例を見てみましょう。2秒間のバッファを生成し、ホワイトノイズを書き込み、AudioBufferSourceNodeで再生します。コードをすぐに実行することや、ソースコードを閲覧することもできます。

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var button = document.querySelector('button');
var pre = document.querySelector('pre');
var myScript = document.querySelector('script');

pre.innerHTML = myScript.innerHTML;

// ステレオ
var channels = 2;
// AudioContextのサンプルレートで2秒間の空のステレオバッファを生成する
var frameCount = audioCtx.sampleRate * 2.0;

var myArrayBuffer = audioCtx.createBuffer(channels, frameCount, audioCtx.sampleRate);

button.onclick = function() {
  // バッファにホワイトノイズを書き込む;
  // 単なる-1.0から1.0の間の乱数の値である
  for (var channel = 0; channel < channels; channel++) {
   // 実際のデータの配列を得る
   var nowBuffering = myArrayBuffer.getChannelData(channel);
   for (var i = 0; i < frameCount; i++) {
     // Math.random()は[0; 1.0]である
     // 音声は[-1.0; 1.0]である必要がある
     nowBuffering[i] = Math.random() * 2 - 1;
   }
  }

  // AudioBufferSourceNodeを得る
  // これはAudioBufferを再生するときに使うAudioNodeである
  var source = audioCtx.createBufferSource();
  // AudioBufferSourceNodeにバッファを設定する
  source.buffer = myArrayBuffer;
  // AudioBufferSourceNodeを出力先に接続すると音声が聞こえるようになる
  source.connect(audioCtx.destination);
  // 音源の再生を始める
  source.start();
}

仕様

Specification Status Comment
Web Audio API
The definition of 'createBuffer()' in that specification.
草案  

ブラウザ互換性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 10.0webkit 25.0 (25.0)  未サポート 15.0 webkit
22
6.0webkit
Feature Android Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support ? 26.0 1.2 ? ? ? 33.0

参考

ドキュメントのタグと貢献者

 このページの貢献者: maruhiro
 最終更新者: maruhiro,