Можно ли опубликовать аудиовыход видеоэлементов HTML5 с помощью Web Audio Api?

У меня есть видеоэлемент html5, и мне нужно применить различную обработку в реальном времени к выходному звуку видео. На рабочем столе я заставил его работать с API 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);

Как вы, наверное, заметили, этот код использовал только встроенные узлы. Но не повезло.

Итак, мои вопросы: возможно ли это на мобильном телефоне? Если да, то чего мне не хватает? Если это не так, то какой возможный обходной путь? Спасибо


person Dam    schedule 05.01.2016    source источник


Ответы (1)


В Chrome на Android MediaElementSource в настоящее время не перенаправляется на WebAudio. Это известная проблема, и со временем ее планируется исправить.

person Raymond Toy    schedule 05.01.2016