是否可以使用WebAudioApi对HTML5视频元素音频输出进行后期处理

Is it possible to post process HTML5 video elements audio output with Web Audio Api?

本文关键字:输出 处理 音频 元素 可以使 WebAudioApi 视频 HTML5 是否      更新时间:2023-09-26

我有一个html5视频元素,我需要对视频的输出音频应用不同的实时处理。在桌面上,我让它和WebAudio API一起工作。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);

正如您可能注意到的,此代码仅使用内置节点。但运气不好。

所以我的问题是:这在手机上可能吗?如果是的话,我会错过什么?如果不是,比任何可能的解决方法都好?感谢

对于Android上的Chrome,MediaElementSource当前未路由到WebAudio。这是一个已知的问题,计划最终解决。