javascript - 从视频文件中提取音频

Question

编辑:This post不是我的副本。我正在尝试将音频数据提取为二进制文件，像我之前提到的那样单独播放音频文件没有遇到任何问题。

我正在尝试使用 Web Audio Api 从客户端的视频文件中提取音频.

var audioContext = new(window.AudioContext || window.webkitAudioContext)();
fileData = new Blob([input.files[0]]);
var videoFileAsBuffer = new Promise(getBuffer);
videoFileAsBuffer.then(function (data) {
    audioContext.decodeAudioData(data).then(function (decodedAudioData) {
        mySoundBuffer = decodedAudioData;
        soundSource = audioContext.createBufferSource();
        soundSource.buffer = mySoundBuffer;
        // soundSource.connect(audioContext.destination);
        // soundSource.start();
    });

当我取消注释最后两行时，我听到上传的视频文件的声音。但是，当我在 getChannelData 方法的帮助下创建一个下载文件的链接时，它的大小几乎与视频文件相同。

我期望 decodedAudioData 只有音频二进制数据，并将其发送到我的网络服务，这是我唯一需要的。然而，这并没有像我预期的那样成功。有人知道在客户端提取视频文件音频的方法吗？提前致谢。

这里是 getBuffer 方法，以防有人想知道:

function getBuffer(resolve) {
    var reader = new FileReader();
    reader.onload = function () {
        var arrayBuffer = reader.result;
        resolve(arrayBuffer);
    }
    reader.readAsArrayBuffer(fileData);
}

编辑:我能够使用 OfflineAudioContext 解码视频文件并获取音频缓冲区在 decodeAudioData 函数中。

var offlineAudioContext = new OfflineAudioContext(2, 44100 * 100, 44100);
var soundSource = offlineAudioContext.createBufferSource();
...
soundSource.connect(offlineAudioContext.destination);
soundSource.start();
offlineAudioContext.startRendering().then(function (renderedBuffer) {
    console.log(renderedBuffer); // outputs audiobuffer
    var song = audioContext.createBufferSource();
    song.buffer = renderedBuffer;
    song.connect(audioContext.destination);
    song.start();
}).catch(function (err) {
    console.log('Rendering failed: ' + err);
});

renderedBuffer 是一个音频缓冲区，输出数据没有问题，用 Audacity 测试过的导入原始数据选项。但问题是，新文件(填充有 renderedBuffer.getChannelData(0))的大小比原始视频大。因为它只包含视频文件的音频，所以它不应该有更小的尺寸吗？

Answer 1

好吧，其实我已经有了答案。原始音频数据非常庞大，这就是为什么它的大小甚至比视频本身还要大的原因。

var offlineAudioContext = new OfflineAudioContext(numberOfChannels, sampleRate * duration, sampleRate);
var soundSource = offlineAudioContext.createBufferSource();
...
reader.readAsArrayBuffer(blob); // video file
reader.onload = function () {
  var videoFileAsBuffer = reader.result; // arraybuffer
  audioContext.decodeAudioData(videoFileAsBuffer).then(function (decodedAudioData) {
    myBuffer = decodedAudioData;
    soundSource.buffer = myBuffer;
    soundSource.connect(offlineAudioContext.destination);
    soundSource.start();

    offlineAudioContext.startRendering().then(function (renderedBuffer) {
      console.log(renderedBuffer); // outputs audiobuffer
    }).catch(function (err) {
      console.log('Rendering failed: ' + err);
    });
  });
};

之后，我可以使用 audiobuffer-to-wav 将音频缓冲区 (renderedbuffer) 转换为 wav 文件图书馆。 OfflineAudioContext 只需要修改裁剪后的音频。

编辑:这是 js fiddle example.如果您不想覆盖音频数据，decodedAudioData 方法就足够了。