是否可以使用WebAudioApi对HTML5视频元素音频输出进行后期处理
Is it possible to post process HTML5 video elements audio output with Web Audio Api?
我有一个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。这是一个已知的问题,计划最终解决。
相关文章:
- 可以't让我的if语句处理js中的html表单输入
- keyup事件处理程序更改焦点不适用于快速键入
- 当从代码后台输出Javascript时,如何处理换行符
- 如何处理节点.js中/从节点输出的 (cli) 标准输出流的字符编码
- 了解 JavaScript 中的异常处理:当更改 try/catch 块的位置时,获得不同的输出
- 如何将多行输出传输到另一个 php 文件以处理数据
- 使用HTML5 / javascript更正音频音量输出分贝,关闭预处理
- 使用JS Letting无法处理输出文本
- 是否可以使用WebAudioApi对HTML5视频元素音频输出进行后期处理
- 处理异常:读取键并进行比较,然后输出,否则出错
- Google应用程序脚本Web应用程序服务器处理程序输出中缺少嵌入式Javascript
- 在Angular中,如何等待工厂函数完成并处理输出?
- 如何将两个日期之间的固定值更改为变量,并使用事件处理程序Javascript显示输出
- 如何在AJAX中处理JSON输出
- 如何在phonegap中处理jsonp的输出?
- datatables.js正在对渲染的输出进行处理
- 使用PHP输出缓冲在处理过程中发出JavaScript
- 如何处理Angular UI TinyMCE输出
- 角+套接字.输入输出处理程序
- 为什么eval()不能处理JSON.parse()的输出