AudioContextフィルタ設定【AudioContextシリーズ2】


下一篇は无タグでオーディオを再生することを绍介して、本篇はいくつかの音効の効果を増加して、主要なapi
  • audioContext.createBiquadFilter

  • 主にfrequency,Qの2つの値(周波数,質量)を設定します.
        const filter = audioContext.createBiquadFilter();
        filter.frequency.value = number; //       800
        filter.Q.value =  number; //  1000
        
    

    主に次のタイプがあります.
  • lowpass(ローパスフィルタ)
  • highpass(ハイパスフィルタ)
  • bandpass(バンドパスフィルタ)
  • filter.type = 'lowpass'
    

    すべてのコード
    (function(){
         
    		const audioContext = new AudioContext();
    		const filter = audioContext.createBiquadFilter();
    		async function play(){
         
    			const res = await fetch('../file/sound.mp3');
    			 const arraybuffer = await res.arrayBuffer();
    		     const audioBuffer = await audioContext.decodeAudioData(arraybuffer);
    		     const source = audioContext.createBufferSource();
    		     source.connect(audioContext.destination);
    		     source.connect(filter);
    		     filter.connect(audioContext.destination)
    		     filter.type = 'lowpass';
    		     console.log(filter)
    		     filter.frequency.value = 1 ;
    		     filter.Q.value = 1;
    		     filter.gain.value = -40;
    		     source.buffer = audioBuffer;
    		     source.start();
    		}
    
    		document.querySelector('button').onclick = play;
    		document.querySelector('#pl').oninput = function(e){
          
    			var minValue = 40;
    			var value = Math.max(minValue, 800*e.target.value);
    			console.log(value)
    			filter.frequency.value = value; 
    		}
    		document.querySelector('#gain').oninput = function(e){
          filter.gain.value = e.target.value; console.log(e.target.value)}
    		document.querySelector('#pz').oninput = function(e){
          filter.Q.value = e.target.value * 1000;  console.log(e.target.value * 30)}
    		const fillters = document.querySelectorAll('[name="filter"]')
    		for(let i=0; i<fillters.length; i++) {
         
    			fillters[i].onchange = function(e){
          console.log(e.target.value); filter.type = e.target.value }
    		}
    	})()
    

    体験アドレス