Web Audio API如何将不同的AudioBuffers合并/连接起来，并作为一首歌曲播放

Question

Web Audio API如何将不同的AudioBuffers合并/连接起来，并作为一首歌曲播放

javascriptconcatenationhtml5-audioweb-audio-apiarraybuffer

20

我一直在使用Web Audio API玩耍，尝试加载歌曲的多个部分并将它们附加到一个新的ArrayBuffer中，然后使用该ArrayBuffer作为播放所有部分的一首歌曲。在下面的例子中，我使用相同的歌曲数据（一个小循环）而不是歌曲的不同部分。

问题在于它仍然只播放一次，而不是两次，我不知道原因所在。

下载歌曲

function init() {

  /**
   * Appends two ArrayBuffers into a new one.
   * 
   * @param {ArrayBuffer} buffer1 The first buffer.
   * @param {ArrayBuffer} buffer2 The second buffer.
   */
  function appendBuffer(buffer1, buffer2) {
    var tmp = new Uint8Array(buffer1.byteLength + buffer2.byteLength);
    tmp.set( new Uint8Array(buffer1), 0);
    tmp.set( new Uint8Array(buffer2), buffer1.byteLength);
    return tmp;
  }

  /**
   * Loads a song
   * 
   * @param {String} url The url of the song.
   */
  function loadSongWebAudioAPI(url) {
    var request = new XMLHttpRequest();
    var context = new webkitAudioContext();

    request.open('GET', url, true);
    request.responseType = 'arraybuffer';

    /**
     * Appends two ArrayBuffers into a new one.
     * 
     * @param {ArrayBuffer} data The ArrayBuffer that was loaded.
     */
    function play(data) {
      // Concatenate the two buffers into one.
      var a = appendBuffer(data, data);
      var buffer = a.buffer;
      var audioSource = context.createBufferSource();
      audioSource.connect(context.destination);

      //decode the loaded data
      context.decodeAudioData(buffer, function(buf) {
        console.log('The buffer', buf);
        audioSource.buffer = buf;
        audioSource.noteOn(0);
        audioSource.playbackRate.value = 1;
      });

    };

    // When the song is loaded asynchronously try to play it.
    request.onload = function() {
      play(request.response);
    }

    request.send();
  }


  loadSongWebAudioAPI('http://localhost:8282/loop.mp3');
}

window.addEventListener('load',init,false);

- 72lions

2个回答

6

如果您需要将数组中的一系列缓冲区附加/连接起来（不仅限于2个），这里提供了一个解决方案。我稍微修改了 @Cwilso 的代码（感谢你的帮助;)

function concatBuffer(_buffers) {
    // _buffers[] is an array containig our audiobuffer list

    var buflengh = _buffers.length;
    var channels = [];
    var totalDuration = 0;

    for(var a=0; a<buflengh; a++){
        channels.push(_buffers[a].numberOfChannels);// Store all number of channels to choose the lowest one after
        totalDuration += _buffers[a].duration;// Get the total duration of the new buffer when every buffer will be added/concatenated
    }

    var numberOfChannels = channels.reduce(function(a, b) { return Math.min(a, b); });;// The lowest value contained in the array channels
    var tmp = context.createBuffer(numberOfChannels, context.sampleRate * totalDuration, context.sampleRate);// Create new buffer

    for (var b=0; b<numberOfChannels; b++) {
        var channel = tmp.getChannelData(b);
        var dataIndex = 0;

        for(var c = 0; c < buflengh; c++) {
            channel.set(_buffers[c].getChannelData(b), dataIndex);
            dataIndex+=_buffers[c].length;// Next position where we should store the next buffer values
        }
    }
    return tmp;
}

- Faks

不要使用totalDuration，应该计算totalSamples，否则由于浮点错误会出现问题... var totalSamples = 0; for(var a=0; a < buflengh; a++){ totalSamples += bufs[a].length; }var tmp = context.createBuffer(numberOfChannels, totalSamples, context.sampleRate);// 创建新的缓冲区 - Simon H

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cwilso · Accepted Answer

您的代码问题在于您正在将另一个副本的MP3文件复制并附加到其末尾。该副本被解码器有效地忽略 - 它不是原始缓冲区数据，只是在完全的MP3文件后跟随的随机无用文件流中的垃圾数据。

您需要做的是首先将音频数据解码为AudioBuffer，然后将音频缓冲区连接到一个新的AudioBuffer中。这需要对您的代码进行一些重构。

您想要做的是：

var context = new webkitAudioContext();

function init() {

  /**
   * Appends two ArrayBuffers into a new one.
   * 
   * @param {ArrayBuffer} buffer1 The first buffer.
   * @param {ArrayBuffer} buffer2 The second buffer.
   */
  function appendBuffer(buffer1, buffer2) {
    var numberOfChannels = Math.min( buffer1.numberOfChannels, buffer2.numberOfChannels );
    var tmp = context.createBuffer( numberOfChannels, (buffer1.length + buffer2.length), buffer1.sampleRate );
    for (var i=0; i<numberOfChannels; i++) {
      var channel = tmp.getChannelData(i);
      channel.set( buffer1.getChannelData(i), 0);
      channel.set( buffer2.getChannelData(i), buffer1.length);
    }
    return tmp;
  }

  /**
   * Loads a song
   * 
   * @param {String} url The url of the song.
   */
  function loadSongWebAudioAPI(url) {
    var request = new XMLHttpRequest();

    request.open('GET', url, true);
    request.responseType = 'arraybuffer';

    /**
     * Appends two ArrayBuffers into a new one.
     * 
     * @param {ArrayBuffer} data The ArrayBuffer that was loaded.
     */
    function play(data) {
      //decode the loaded data
      context.decodeAudioData(data, function(buf) {
        var audioSource = context.createBufferSource();
        audioSource.connect(context.destination);

        // Concatenate the two buffers into one.
        audioSource.buffer = appendBuffer(buf, buf);
        audioSource.noteOn(0);
        audioSource.playbackRate.value = 1;
      });

    };

    // When the song is loaded asynchronously try to play it.
    request.onload = function() {
      play(request.response);
    }

    request.send();
  }


  loadSongWebAudioAPI('loop.mp3');
}

window.addEventListener('load',init,false);

这是因为您的声音样本开头有近50毫秒的静默，而不是由于循环问题导致的，所以会出现轻微的播放间隔。

希望这可以帮助您！