创建一个均衡器与javascript音频api

creating an equalizer with javascript audio api

本文关键字:javascript 音频 api 均衡器 一个 创建      更新时间:2023-09-26

我使用javascript音频API为一个dj应用程序制作了一个均衡器,这个均衡器工作了几个月,然后突然停止工作。代码没有改变,所以我有点不知所措,解释什么出错了。我正在实时操纵音频,这是实际发生的事情。

HTML

<!-- this is the equalizer -->
<div id="fx" style="display: none;">
<div class="lmhdiv">
<!-- when the range value is changed onmousemove call the equalizer function and pass in lo mid or hi --> 
<input id="lo" class="lmh" onmousemove="eq('lo');" type="range">
<input id="mid" class="lmh" onmousemove="eq('mid');" type="range">
<input id="hi" class="lmh" onmousemove="eq('hi');" type="range">
</div>
</div> 
<!-- this is the audio -->
<audio id="leftdisc" controls="" name="media" autoplay="" format="mpeg"><source id="song" src="http://www.example.com/song.m4a" audio.type="audio/ogg"></audio>
Javascript

//This block resets the equalizer when a new song comes on
// Resets the equilizer
function reset(){
mediaElement = document.getElementById('leftdisc');
document.getElementById('hi').value=50;
document.getElementById('mid').value=50;
document.getElementById('lo').value=50;
sourceNode = context.createMediaElementSource(mediaElement);
lofilter = context.createBiquadFilter();
midfilter = context.createBiquadFilter();
hifilter = context.createBiquadFilter();
// Low-pass filter. See BiquadFilterNode docs http://www.html5rocks.com/en/tutorials/webaudio/intro/
lofilter.type = 3; 
// high-pass filter. See BiquadFilterNode docs http://www.html5rocks.com/en/tutorials/webaudio/intro/
midfilter.type = 4; 
hifilter.type = 4; 

lofilter.frequency.value = 800; // Set cutoff to 440 HZ
midfilter.frequency.value = 3000; // Set cutoff to 440 HZ
hifilter.frequency.value = 5000; // Set cutoff to 440 HZ
sourceNode.connect(lofilter);
sourceNode.connect(midfilter);
sourceNode.connect(hifilter);
lofilter.connect(context.destination);
midfilter.connect(context.destination);
hifilter.connect(context.destination);
leftdisc.volume=1-document.getElementById('xfade').value/100; 
};
//when changing the equalizer
function eq(str){
  console.log(str);
  //since range is defaulted at 50 we need to default at 0
  strval = (document.getElementById(str).value-50)*0.8; // Set hi mid low db from -40 to 40

switch(str) {
case "lo":
// disconnect the filter
lofilter.disconnect(0);
// create new filter
lofilter = context.createBiquadFilter();
// create the audio graph connect filter to source
sourceNode.connect(lofilter);
// connect destination to filter
lofilter.connect(context.destination);
// specify parameters
lofilter.type = 3; // Low-shelf filter. See BiquadFilterNode docs
console.log(strval);
lofilter.gain.value = strval;
lofilter.frequency.value = 800;

console.log(lofilter);
    break;
case "mid":    
midfilter.disconnect(0);
midfilter = context.createBiquadFilter();
midfilter.type = 4; // high-shelf filter. See BiquadFilterNode docs
midfilter.gain.value = strval;
midfilter.frequency.value = 3000;
sourceNode.connect(midfilter);
midfilter.connect(context.destination);
    break;
case "hi":    
hifilter.disconnect(0);
hifilter = context.createBiquadFilter();
hifilter.type = 4; // high-shelf filter. See BiquadFilterNode docs
hifilter.gain.value = strval;
hifilter.frequency.value = 5000;
sourceNode.connect(hifilter);
hifilter.connect(context.destination);
    break;
default:
    console.log('default');
}

}

我的lo过滤器是不同的,因为我回到http://www.html5rocks.com/en/tutorials/webaudio/intro/去了解出了什么问题,他们说要在将过滤器连接到目的地后设置参数,但这似乎没有帮助。

不再支持biquadfilter的数字常量类型(在Chrome 36中删除,在Firefox IIRC中从未出现)。此外,你有两个高通滤波器,当我期望你想要一个中频峰值滤波器。

你应该说:

// Low-pass filter. See BiquadFilterNode docs 
lofilter.type = "lowpass"; 
// Peaking (boost a single band) filter. See BiquadFilterNode docs
midfilter.type = "peaking"; 
// high-pass filter. See BiquadFilterNode docs
hifilter.type = "highpass"; 

我的代码从wubwubwub创建了一个低/中/高控制集:

this.low = audioCtx.createBiquadFilter();
this.low.type = "lowshelf";
this.low.frequency.value = 320.0;
this.low.gain.value = 0.0;
this.low.connect( ***[output node here]*** );
this.mid = audioCtx.createBiquadFilter();
this.mid.type = "peaking";
this.mid.frequency.value = 1000.0;
this.mid.Q.value = 0.5;
this.mid.gain.value = 0.0;
this.mid.connect( this.low );
this.high = audioCtx.createBiquadFilter();
this.high.type = "highshelf";
this.high.frequency.value = 3200.0;
this.high.gain.value = 0.0;
this.high.connect( this.mid );
// connect input to this.high