使用javascript audio api创建均衡器

时间:2014-07-22 18:36:33

标签: javascript audio html5-audio web-audio

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

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');
}


}

我的过滤器有所不同,因为我回到http://www.html5rocks.com/en/tutorials/webaudio/intro/以了解出了什么问题,他们说要在将过滤器连接到目的地之后设置参数,但那并不是似乎有所帮助。 mid和hi过滤器的编写方式与它们工作时的版本相同,但是,它现在不起作用。

1 个答案:

答案 0 :(得分:4)

不再支持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