混合两个音频缓冲区，使用网络音频将一个放在另一个的背景上 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

最初在 Is it possible to mix multiple audio files on top of each other preferably with javascript 发布的两种方法，调整为在 <input type="file"> 元素的 change 事件处处理 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>

Answer 2

我只想补充 guest271314 and post here the solution based on answer of guest271314 对第二种情况的出色回答（第二个来源是麦克风输入）。实际上是客户卡拉OK。脚本：

window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new window.AudioContext();
var playbackTrack = null;

function handleFileSelect(event){

     var file = event.files[0];
     var freader = new FileReader();

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

            playbackTrack = context.createBufferSource();
            playbackTrack.buffer = buf;

            var karaokeButton = document.getElementById("karaoke_start");
            karaokeButton.style.display = "inline-block";
            karaokeButton.addEventListener("click", function(){
                startKaraoke();
            });
        });
    };

    freader.readAsArrayBuffer(file);
}

function stopMix(duration, mediaRecorder) {
    setTimeout(function(mediaRecorder) {
      mediaRecorder.stop();
      context.close();
    }, duration, mediaRecorder)
 }

function startKaraoke(){

    navigator.mediaDevices.getUserMedia({audio: true,video: false})
        .then(function(stream) {
            var mixedAudio = context.createMediaStreamDestination();
            var merger = context.createChannelMerger(2);
            var splitter = context.createChannelSplitter(2);
            var duration = 5000;

            var chunks = [];
            var channel1 = [0,1];
            var channel2 = [1, 0];

            var gainNode = context.createGain();
            playbackTrack.connect(gainNode);
            gainNode.connect(splitter);
            gainNode.gain.value = 0.5; // From 0 to 1
            splitter.connect(merger, channel1[0], channel1[1]);

            var microphone = context.createMediaStreamSource(stream);
            microphone.connect(splitter);
            splitter.connect(merger, channel2[0], channel2[1]);

            merger.connect(mixedAudio);
            merger.connect(context.destination);

            playbackTrack.start(0);
            var mediaRecorder = new MediaRecorder(mixedAudio.stream);
            mediaRecorder.start(1);

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

            mediaRecorder.onstop = function(event) {
              var player = new Audio();
              player.controls = "controls";

              var blob = new Blob(chunks, {
                "type": "audio/mp3"
              });

              audioDownload = URL.createObjectURL(blob);
              var a = document.createElement("a");
              a.download = "karaokefile." + blob.type.replace(/.+\/|;.+/g, "");
              a.href = audioDownload;
              a.innerHTML = a.download;
              player.src = audioDownload;
              document.body.appendChild(a);
              document.body.appendChild(player);
            };

            stopMix(duration, mediaRecorder);
        })
        .catch(function(error) {
          console.log('error: ' + error);
        });

}

和Html：

<input id="file" 
         type="file" 
         name="file" 
         accept="audio/*" 
         onchange="handleFileSelect(this)" />
  <span id="karaoke_start" style="display:none;background-color:yellow;cursor:pointer;">start karaoke</span>

这里是工作 plnkr 示例：plnkr

混合两个音频缓冲区，使用网络音频将一个放在另一个的背景上 Api

Mixing two audio buffers, put one on background of another by using web Audio Api

javascript

html5-audio

web-audio-api