AudioContextフィルタ設定【AudioContextシリーズ2】
12357 ワード
下一篇は无タグでオーディオを再生することを绍介して、本篇はいくつかの音効の効果を増加して、主要なapi audioContext.createBiquadFilter
主にfrequency,Qの2つの値(周波数,質量)を設定します.
主に次のタイプがあります. lowpass(ローパスフィルタ) highpass(ハイパスフィルタ) bandpass(バンドパスフィルタ)
すべてのコード
体験アドレス
主にfrequency,Qの2つの値(周波数,質量)を設定します.
const filter = audioContext.createBiquadFilter();
filter.frequency.value = number; // 800
filter.Q.value = number; // 1000
主に次のタイプがあります.
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 }
}
})()
体験アドレス