是否可以使用Web audio Api发布处理HTML5视频元素的音频输出？

Question

我有一个html5视频元素，我需要对视频的输出音频应用不同的实时处理。在台式机上，我让它与WebAudio应用程序接口一起工作。Api似乎也出现在iOS上。我可以检查创建的对象，但它不会修改视频的输出信号。

下面是我的示例代码：

$(function () {
   window.AudioContext = window.AudioContext||window.webkitAudioContext;
   var audioContext = new AudioContext();
     var bufferSize = 1024;
     var selectedChannel = 0;
   var effect = (function() {
            var node = audioContext.createScriptProcessor(bufferSize, 2, 2);
            node.addEventListener('audioprocess', function(e) {
                var input = e.inputBuffer.getChannelData(selectedChannel);
                var outputL = e.outputBuffer.getChannelData(0);
                var outputR = e.outputBuffer.getChannelData(1);
                for (var i = 0; i < bufferSize; i++) {
                    outputL[i] = selectedChannel==0? input[i] : 0.0;
                    outputR[i] = selectedChannel==1? input[i] : 0.0;
                }
            });
            return node;
     })();

   var streamAttached = false;
   function attachStream(video) { 
      if (streamAttached) {
                return;
            }
      var source = audioContext.createMediaElementSource(video);
            source.connect(effect);
            effect.connect(audioContext.destination);
      streamAttached = true;
   }

   function iOS_video_touch_start() {
       var video = $('#vid')[0];
       video.play();
       attachStream(video);
   }
   var needtouch = false;
   $('#vid').on('play', function () {
     attachStream(this);
   }).on('loadedmetadata', function () {

     this.play();
     this.volume=1.0;
     if (this && this.paused) {
        if (needtouch == false) {
            needtouch = true;
            this.addEventListener("touchstart", iOS_video_touch_start, true);
        }
     }
   });
   window.panToRight = function(){
            selectedChannel = 1;
     };
   window.panToLeft = function(){
            selectedChannel = 0;
     };

});

您也可以在CP：http://codepen.io/anon/pen/pgeJQG上查看

使用这些按钮，您可以在左通道和右通道之间切换。在桌面浏览器(Chrome，Firefox，Safari测试)上运行良好。

我还尝试了较旧的createJavaScriptNode()而不是createScriptProcessor()。我还尝试了另一个效应链，它看起来像这样：

var audioContext = new (window.AudioContext||window.webkitAudioContext)();
audioContext.createGain = audioContext.createGain||audioContext.createGainNode;
var gainL = audioContext.createGain();
var gainR = audioContext.createGain();
gainL.gain.value = 1;
gainR.gain.value = 1;
var merger = audioContext.createChannelMerger(2);
var splitter = audioContext.createChannelSplitter(2);

//Connect to source
source = audioContext.createMediaElementSource(video);
//Connect the source to the splitter
source.connect(splitter, 0, 0);
//Connect splitter' outputs to each Gain Nodes
splitter.connect(gainL, 0);
splitter.connect(gainR, 1);

//Connect Left and Right Nodes to the Merger Node inputs
//Assuming stereo as initial status
gainL.connect(merger, 0, 0);
gainL.connect(merger, 0, 1);

//Connect Merger output to context destination
merger.connect(audioContext.destination, 0, 0);

正如您可能注意到的，这段代码只使用了内置节点。但没那么走运。

所以我的问题是:这在移动设备上是可能的吗？如果是，那么我错过了什么？如果不是，那么是否有任何可能的解决方法？谢谢

Answer 1

在安卓系统上运行Chrome时，MediaElementSource目前不会被路由到WebAudio。这是一个已知问题，计划最终解决。