混合两个音频缓冲区,使用web Audio Api将一个放在另一个的背景上

Question

我想通过将一首歌作为另一首歌的背景混合成单个源来混合两个音频源.

例如,我有输入:

<input id="files" type="file" name="files[]" multiple onchange="handleFilesSelect(event)"/>

和脚本解码这个文件:

window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new window.AudioContext();
var sources = [];
var files = [];
var mixed = {};

function handleFilesSelect(event){
    if(event.target.files.length <= 1)
          return false;

     files = event.target.files;
     readFiles(mixAudioSources);
}

function readFiles(index, callback){
    var freader = new FileReader();
    var i = index ? index : 0;

    freader.onload = function (e) {     
        context.decodeAudioData(e.target.result, function (buf) {

            sources[i] = context.createBufferSource();
            sources[i].connect(context.destination);
            sources[i].buffer = buf;

            if(files.length > i+1){
                readFiles(i + 1, callback);
            } else {
                if(callback){
                    callback();
                }
            }
        });
    };

    freader.readAsArrayBuffer(files[i]);
}

function mixAudioSources(){
    //So on our scenario we have here two decoded audio sources in "sources" array.
    //How we can mix that "sources" into "mixed" variable by putting "sources[0]" as background of "sources[1]"
}

那么我如何将这些资源混合到一个来源？例如,我有两个文件,如何将一个源作为另一个源的背景并将此混合放入单个源？

另一种情况:如果我从麦克风中读取输入流,例如我想将此输入放在背景歌曲(某种卡拉OK)上,那么可以在客户端上使用html5支持来完成这项工作吗？性能怎么样？也许更好的方法在服务器端混合这些音频源？

如果有可能,那么mixAudioSources函数的可能实现是什么？

谢谢.

Answer 1

最初发布的两种方法是否可以将多个音频文件混合在一起,最好是用javascript,调整为File在元素change事件处理对象<input type="file">.

第一种方法使用OfflineAudioContext(),AudioContext.createBufferSource(),AudioContext.createMediaStreamDestination(),Promise构造,Promise.all(),MediaRecorder()混合音轨,然后提供下载的混合音频文件.

var div = document.querySelector("div");

function handleFilesSelect(input) {
  div.innerHTML = "loading audio tracks.. please wait";
  var files = Array.from(input.files);
  var duration = 60000;
  var chunks = [];
  var audio = new AudioContext();
  var mixedAudio = audio.createMediaStreamDestination();
  var player = new Audio();
  var context;
  var recorder;
  var description = "";
  
  player.controls = "controls";
  
  function get(file) {
    description += file.name.replace(/\..*|\s+/g, "");
    return new Promise(function(resolve, reject) {
      var reader = new FileReader;
      reader.readAsArrayBuffer(file);
      reader.onload = function() {
        resolve(reader.result)
      }
    })
  }

  function stopMix(duration, ...media) {
    setTimeout(function(media) {
      media.forEach(function(node) {
        node.stop()
      })
    }, duration, media)
  }

  Promise.all(files.map(get)).then(function(data) {
      var len = Math.max.apply(Math, data.map(function(buffer) {
        return buffer.byteLength
      }));
      context = new OfflineAudioContext(2, len, 44100);
      return Promise.all(data.map(function(buffer) {
          return audio.decodeAudioData(buffer)
            .then(function(bufferSource) {
              var source = context.createBufferSource();
              source.buffer = bufferSource;
              source.connect(context.destination);
              return source.start()
            })
        }))
        .then(function() {
          return context.startRendering()
        })
        .then(function(renderedBuffer) {
          return new Promise(function(resolve) {
            var mix = audio.createBufferSource();
            mix.buffer = renderedBuffer;
            mix.connect(audio.destination);
            mix.connect(mixedAudio);
            recorder = new MediaRecorder(mixedAudio.stream);
            recorder.start(0);
            mix.start(0);
            div.innerHTML = "playing and recording tracks..";
            // stop playback and recorder in 60 seconds
            stopMix(duration, mix, recorder)

            recorder.ondataavailable = function(event) {
              chunks.push(event.data);
            };

            recorder.onstop = function(event) {
              var blob = new Blob(chunks, {
                "type": "audio/ogg; codecs=opus"
              });
              console.log("recording complete");
              resolve(blob)
            };
          })
        })
        .then(function(blob) {
          console.log(blob);
          div.innerHTML = "mixed audio tracks ready for download..";
          var audioDownload = URL.createObjectURL(blob);
          var a = document.createElement("a");
          a.download = description + "." + blob.type.replace(/.+\/|;.+/g, "");
          a.href = audioDownload;
          a.innerHTML = a.download;
          document.body.appendChild(a);
          a.insertAdjacentHTML("afterend", "<br>");
          player.src = audioDownload;
          document.body.appendChild(player);
        })
    })
    .catch(function(e) {
      console.log(e)
    });

}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <input id="files" 
         type="file" 
         name="files[]" 
         accept="audio/*" 
         multiple 
         onchange="handleFilesSelect(this)" />
  <div></div>
</body>

</html>

第二种方法使用AudioContext.createChannelMerger(),AudioContext.createChannelSplitter()

var div = document.querySelector("div");

function handleFilesSelect(input) {

  div.innerHTML = "loading audio tracks.. please wait";
  var files = Array.from(input.files);
  var chunks = [];
  var channels = [
    [0, 1],
    [1, 0]
  ];
  var audio = new AudioContext();
  var player = new Audio();
  var merger = audio.createChannelMerger(2);
  var splitter = audio.createChannelSplitter(2);
  var mixedAudio = audio.createMediaStreamDestination();
  var duration = 60000;
  var context;
  var recorder;
  var audioDownload;
  var description = "";

  player.controls = "controls";

  function get(file) {
    description += file.name.replace(/\..*|\s+/g, "");
    console.log(description);
    return new Promise(function(resolve, reject) {
      var reader = new FileReader;
      reader.readAsArrayBuffer(file);
      reader.onload = function() {
        resolve(reader.result)
      }
    })
  }

  function stopMix(duration, ...media) {
    setTimeout(function(media) {
      media.forEach(function(node) {
        node.stop()
      })
    }, duration, media)
  }

  Promise.all(files.map(get)).then(function(data) {
      return Promise.all(data.map(function(buffer, index) {
          return audio.decodeAudioData(buffer)
            .then(function(bufferSource) {
              var channel = channels[index];
              var source = audio.createBufferSource();
              source.buffer = bufferSource;
              source.connect(splitter);
              splitter.connect(merger, channel[0], channel[1]);          
              return source
            })
        }))
        .then(function(audionodes) {
          merger.connect(mixedAudio);
          merger.connect(audio.destination);
          recorder = new MediaRecorder(mixedAudio.stream);
          recorder.start(0);
          audionodes.forEach(function(node, index) {
            node.start(0)
          });
          
          div.innerHTML = "playing and recording tracks..";
          
          stopMix(duration, ...audionodes, recorder);

          recorder.ondataavailable = function(event) {
            chunks.push(event.data);
          };

          recorder.onstop = function(event) {
            var blob = new Blob(chunks, {
              "type": "audio/ogg; codecs=opus"
            });
            audioDownload = URL.createObjectURL(blob);
            var a = document.createElement("a");
            a.download = description + "." + blob.type.replace(/.+\/|;.+/g, "");
            a.href = audioDownload;
            a.innerHTML = a.download;
            player.src = audioDownload;
            document.body.appendChild(a);
            document.body.appendChild(player);
          };
        })
    })
    .catch(function(e) {
      console.log(e)
    });
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <input id="files" 
         type="file" 
         name="files[]" 
         accept="audio/*" 
         multiple onchange="handleFilesSelect(this)" />
  <div></div>
</body>

</html>