mozilla
Your Search Results

    AudioContext.createBuffer()

    The createBuffer() method of the AudioContext Interface is used to create a new, empty AudioBuffer object, which can then be populated by data, and played via an AudioBufferSourceNode.

    AudioContext 接口的 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.

    Syntax

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

    Parameters

    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
    An integer representing the number of channels this buffer should have. Implementations must support a minimum 32 channels.
    length
    An integer representing the size of the buffer in sample-frames.
    sampleRate
    The sample-rate of the linear audio data in sample-frames per second. An implementation must support sample-rates in at least the range 22050 to 96000.

    Returns

    An AudioBuffer.

    Examples

    First, a couple of simple trivial examples, to help explain how the parameters are used:

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

    If you use this call, you will get a stereo buffer (two channels), that, when played back on an AudioContext running at 44100Hz (very common, most normal sound cards run at this rate), will last for 0.5 seconds: 22050 frames / 44100Hz = 0.5 seconds.

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

    If you use this call, you will get a mono buffer (one channel), that, when played back on an AudioContext running at 44100Hz, will be automatically *resampled* to 44100Hz (and therefore yield 44100 frames), and last for 1.0 second: 44100 frames / 44100Hz = 1 second.

    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).

    Now let's look at a more complex createBuffer() example, in which we create a two second buffer, fill it with white noise, and then play it via an AudioBufferSourceNode. The comment should clearly explain what is going on. You can also run the code live, or view the source.

    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;
    
    // Stereo
    var channels = 2;
    // Create an empty two second stereo buffer at the
    // sample rate of the AudioContext
    var frameCount = audioCtx.sampleRate * 2.0;
    
    var myArrayBuffer = audioCtx.createBuffer(channels, frameCount, audioCtx.sampleRate);
    
    button.onclick = function() {
      // Fill the buffer with white noise;
      //just random values between -1.0 and 1.0
      for (var channel = 0; channel < channels; channel++) {
       // This gives us the actual ArrayBuffer that contains the data
       var nowBuffering = myArrayBuffer.getChannelData(channel);
       for (var i = 0; i < frameCount; i++) {
         // Math.random() is in [0; 1.0]
         // audio needs to be in [-1.0; 1.0]
         nowBuffering[i] = Math.random() * 2 - 1;
       }
      }
    
      // Get an AudioBufferSourceNode.
      // This is the AudioNode to use when we want to play an AudioBuffer
      var source = audioCtx.createBufferSource();
      // set the buffer in the AudioBufferSourceNode
      source.buffer = myArrayBuffer;
      // connect the AudioBufferSourceNode to the
      // destination so we can hear the sound
      source.connect(audioCtx.destination);
      // start the source playing
      source.start();
    }

    Specifications

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

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support 10.0webkit 25.0 (25.0)  Not supported 15.0webkit
    22 (unprefixed)
    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

    See also

    Document Tags and Contributors

    Contributors to this page: bizzk3t, ebobby, wwj, chrisdavidmills, teoli, wesj, eugene.dounar
    Last updated by: ebobby,