Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

AudioAPI 混响效果(使用Convolver节点)

  混响是非常普遍的音频特效,很多音频处理软件中都自带了混响效果的功能。在AudioAPI中,我们也可以自己实现这个效果。实现混响的方法有很多,但既然AudioAPI中提供了Convolver节点,我们就不考虑其它,直接使用Convolver节点来实现混响。
  Convolver节点,顾名思义,就是对波形做一次卷积运算的。这是一个二元运算,Convolver节点的输入数据作为其中的一个操作数,我们还需要另一个操作数,这就是混响的样本。这个混响样本通常是一个复合频率的波形衰减的过程,可以自己用循环模拟出来。如果需要更逼真的效果可以从真实的混响环境中录制得到。
  由于卷积运算可能对音频造成损耗,所以为了避免原始音频变模糊,通常会使用双通道,同时输出卷积混响和干音的叠加来弥补。另外,混响通常是针对干音的,所以下面的例子中就使用了一段朗读,没有背景音乐。
  演示:[实例]
混响 <input type="checkbox" id="checkbox" checked />
<script>
var AudioContext=AudioContext||webkitAudioContext;
var context=new AudioContext;
//加载音乐
var audio=new Audio("吾輩は猫である.mp3");
//创建节点
var source=context.createMediaElementSource(audio);
var convolver=context.createConvolver();
var gain=context.createGain();
//模拟混响样本
var length=44100;
var buffer=context.createBuffer(2,length,length);
var data=[buffer.getChannelData(0),buffer.getChannelData(1)];
for(var i=0;i<length;i++){
  //平方根衰减
  var v=1-Math.sqrt(i/length);
  //叠加24个不同频率
  for(var j=1;j<=24;j++)v*=Math.sin(i/j);
  //记录数据
  data[0][i]=data[1][i]=v;
};
//配置节点
gain.gain.value=0.3;
convolver.buffer=buffer;
//连接:       → convolver → 
//      source               destination
//             →    gain   → 
source.connect(convolver);
source.connect(gain);
gain.connect(context.destination);
//动作
checkbox.onchange=function(){
  checkbox.checked
    ?convolver.connect(context.destination)
    :convolver.disconnect()
};
checkbox.onchange();
//播放
audio.play();
</script>

  参考:http://www.g200kg.com/jp/docs/webaudio/convolver.html
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^