如何处理音频标签的内容并从中创建派生音频标签？

Coyote 发表于 Dev

土狼

在我的网页上，标签内有一个音频文件。

<!DOCTYPE html>
<html>

<audio src="myTrack.mp3" controls preload="auto"></audio>

</html>

我想将该标签中存储的文件切成多个10秒的音频文件，然后将它们作为自己的音频文件插入单独的<audio>标签中，然后插入网页中。
是否可以在javascript中执行此操作？

用户名

是的，当然可以！:)

确保音频满足CORS要求，以便我们可以用AJAX加载它（从与页面相同的来源加载当然可以满足此要求）。
将文件加载为ArrayBuffer并使用解码AudioContext
计算段的数量和每个段的长度（我使用基于时间的长度，与下面的通道无关）
将主缓冲区拆分为较小的缓冲区
为新缓冲区创建一个文件包装器（下面我为演示制作了一个简单的WAVE包装器）
通过对象URL将其作为Blob馈送到Audio元素的新实例
跟踪对象URL，以便在不再需要它们时可以释放它们（revokeObjectURL()）。

一个缺点是，当然，您必须在处理文件之前将整个文件加载到内存中。

例

希望我用于演示的文件可以通过当前的CDN来获得，该CDN用于允许CORS使用（我拥有版权，可以随时将其用于测试，但只能进行测试！:)）。加载和解码可能需要一些时间，具体取决于您的系统和连接，因此请耐心等待...

理想情况下，您应该使用异步方法来分割缓冲区，但是该演示仅针对所需的步骤，以使缓冲区段可作为新文件片段使用。

还要注意，我没有考虑到最后一个段比其他段短（我使用floor，您应该使用ceil来计算段数并缩短最后一个块的长度）。我将其留给读者作为练习。

var actx = new(AudioContext || webkitAudioContext)(),
    url = "//dl.dropboxusercontent.com/s/7ttdz6xsoaqbzdl/war_demo.mp3";

// STEP 1: Load audio file using AJAX ----------------------------------
fetch(url).then(function(resp) {return resp.arrayBuffer()}).then(decode);

// STEP 2: Decode the audio file ---------------------------------------
function decode(buffer) {
  actx.decodeAudioData(buffer, split);
}

// STEP 3: Split the buffer --------------------------------------------
function split(abuffer) {

  // calc number of segments and segment length
  var channels = abuffer.numberOfChannels,
      duration = abuffer.duration,
      rate = abuffer.sampleRate,
      segmentLen = 10,
      count = Math.floor(duration / segmentLen),
      offset = 0,
      block = 10 * rate;

  while(count--) {
    var url = URL.createObjectURL(bufferToWave(abuffer, offset, block));
    var audio = new Audio(url);
    audio.controls = true;
    audio.volume = 0.75;
    document.body.appendChild(audio);
    offset += block;
  }  
}

// Convert a audio-buffer segment to a Blob using WAVE representation
function bufferToWave(abuffer, offset, len) {

  var numOfChan = abuffer.numberOfChannels,
      length = len * numOfChan * 2 + 44,
      buffer = new ArrayBuffer(length),
      view = new DataView(buffer),
      channels = [], i, sample,
      pos = 0;

  // write WAVE header
  setUint32(0x46464952);                         // "RIFF"
  setUint32(length - 8);                         // file length - 8
  setUint32(0x45564157);                         // "WAVE"

  setUint32(0x20746d66);                         // "fmt " chunk
  setUint32(16);                                 // length = 16
  setUint16(1);                                  // PCM (uncompressed)
  setUint16(numOfChan);
  setUint32(abuffer.sampleRate);
  setUint32(abuffer.sampleRate * 2 * numOfChan); // avg. bytes/sec
  setUint16(numOfChan * 2);                      // block-align
  setUint16(16);                                 // 16-bit (hardcoded in this demo)

  setUint32(0x61746164);                         // "data" - chunk
  setUint32(length - pos - 4);                   // chunk length

  // write interleaved data
  for(i = 0; i < abuffer.numberOfChannels; i++)
    channels.push(abuffer.getChannelData(i));

  while(pos < length) {
    for(i = 0; i < numOfChan; i++) {             // interleave channels
      sample = Math.max(-1, Math.min(1, channels[i][offset])); // clamp
      sample = (0.5 + sample < 0 ? sample * 32768 : sample * 32767)|0; // scale to 16-bit signed int
      view.setInt16(pos, sample, true);          // update data chunk
      pos += 2;
    }
    offset++                                     // next source sample
  }

  // create Blob
  return new Blob([buffer], {type: "audio/wav"});

  function setUint16(data) {
    view.setUint16(pos, data, true);
    pos += 2;
  }

  function setUint32(data) {
    view.setUint32(pos, data, true);
    pos += 4;
  }
}