如何使用JavaScript應用基本音頻過濾器

Question

我正在嘗試使基本音頻過濾器正常工作。我想評估至少3-4個例子。

這裏是我評價，並試圖獲得一個工作JS代碼：

var QUAL_MUL = 30; 

function FilterSample() { 
    this.isPlaying = false; 
    loadSounds(this, {buffer: 'techno.wav'}); 
}; 

FilterSample.prototype.play = function() { 
    // Create the source. 
    var source = context.createBufferSource(); 
    source.buffer = this.buffer; 
    // Create the filter. 
    var filter = context.createBiquadFilter(); 
    filter.type = filter.LOWPASS; 
    filter.frequency.value = 5000; 
    // Connect source to filter, filter to destination. 
    source.connect(filter); 
    filter.connect(context.destination); 
    // Play! 
    source.start(0); 
    source.loop = true; 
    // Save source and filterNode for later access. 
    this.source = source; 
    this.filter = filter; 
}; 

FilterSample.prototype.stop = function() { 
    this.source.stop(0); 
}; 

FilterSample.prototype.toggle = function() { 
    this.isPlaying ? this.stop() : this.play(); 
    this.isPlaying = !this.isPlaying; 
}; 

FilterSample.prototype.changeFrequency = function(element) { 
    // Clamp the frequency between the minimum value (40 Hz) and half of the 
    // sampling rate. 
    var minValue = 40; 
    var maxValue = context.sampleRate/2; 
    // Logarithm (base 2) to compute how many octaves fall in the range. 
    var numberOfOctaves = Math.log(maxValue/minValue)/Math.LN2; 
    // Compute a multiplier from 0 to 1 based on an exponential scale. 
    var multiplier = Math.pow(2, numberOfOctaves * (element.value - 1.0)); 
    // Get back to the frequency value between min and max. 
    this.filter.frequency.value = maxValue * multiplier; 
}; 

FilterSample.prototype.changeQuality = function(element) { 
    this.filter.Q.value = element.value * QUAL_MUL; 
}; 

FilterSample.prototype.toggleFilter = function(element) { 
    this.source.disconnect(0); 
    this.filter.disconnect(0); 
    // Check if we want to enable the filter. 
    if (element.checked) { 
    // Connect through the filter. 
    this.source.connect(this.filter); 
    this.filter.connect(context.destination); 
    } else { 
    // Otherwise, connect directly. 
    this.source.connect(context.destination); 
    } 
}; 

這將是非常好的，如果有人能解釋或提供更好的使用JS應用過濾器的簡單工作的例子。

預先感謝您。

Answer 1

（演示here）

讓我們從創建一個源頭開始（這是HTML，非常簡單）

<audio controls="" preload="" src="add/src/here" autoplay=""></audio> 

你應該add/src/here插入音頻文件的URL。例如把一個文件放在Dropbox上並將其添加到那裏。

現在，我們要創建的audiocontext和<audio>標籤掛鉤到webAudio節點：

context = new AudioContext(); 
source = context.createMediaElementSource(document.getElementsByTagName('audio')[0]); 

這就是一些基本的audioAPI編程。現在，我們要創建一個過濾器節點，將信號源連接到過濾器，然後將過濾器，以揚聲器：現在

filter = context.createBiquadFilter(); 
source.connect(filter); 
filter.connect(context.destination); 

，你應該選擇你想要的過濾器。你可以找到所有的過濾器here (basically all information about the biquadFilter)。通知有8種不同的濾波器類型：

「的低通」， 「高通」， 「帶通」， 「lowshelf」， 「highshelf」， 「峯值」， 「缺口」， 「全通」

您可以通過獲取其數值來設置這些類型之一。根據以上列表，低通爲0，高通爲1等等。如果您不知道，只需使用<#biquadFilter>對象上的名稱來調用該函數，如下所示：filter.LOWPASS。這將返回0.現在讓我們告訴過濾器它應該是一個低架。這是3類型：

filter.type = 3; 

編輯：用於定義類型的標準已經改變了幾次，顯然現在你只需直接使用字符串。 https://www.w3.org/TR/webaudio/#the-biquadfilternode-interface

現在，一個低架表示：將給定的增益提升/降低應用於包含和低於給定頻率的所有頻率。所以，如果我給濾波器95的頻率：

filter.frequency.value = 95; 

的過濾器增加增益以低於95 還要注意.value所有頻率。這是因爲有更多的功能，如filter.frequency.linearRampToValueAtTime()。如果您希望頻率上升到某個特定值，或者一次設置該值，則這些功能非常方便。如果你想了解更多信息，請隨時詢問。我想告訴你，因爲我知道花費大量時間來研究它是如何工作的。有沒有這方面的信息，但至少我得到了它的工作。

現在，我們要實際設置增益，這也是一個.value：

filter.gain.value = 30; 

並非所有的過濾器需要的增益。例如，低通意味着讓低於給定頻率的所有頻率通過，並且不做任何特別的事情。低架提升/衰減，所以你需要指定多少。

某些過濾器還需要Q值。這決定了截止時刻的峯值（您的頻段結束時）。由於我不擅長解釋這一點，我直接從w3.org得到了這個結果：

控制響應在截止頻率處的峯值。較大的值會使響應更加尖銳。請注意，對於此濾波器類型，此值不是傳統的Q值，而是以分貝爲單位的諧振值。

現在我們假設我們實際上想對斜坡做些事情。我希望頻率在10秒內從0增加到120。由於這仍然是實驗性的，它並不像你期望的那樣工作。讓我們先使用時間初始化設置值。我們剛纔設置的頻率值設置爲0，在當前時間：

filter.frequency.setValueAtTime(0.0, context.currentTime); 

現在，我們希望它是在120後10秒：

filter.frequency.linearRampToValueAtTime(120.0, context.currentTime+10); 

這是很清楚的聽到的頻率增加。 （但是這聽起來不太清楚......）。 你可以找到它的here

一個小的演示也可以做所有的編輯自己使用內部scriptprocessors數學函數，但是這僅僅是一個做痛的支持是這樣的實驗的鍍鉻版本scriptprocessors工作上是稀缺的。

我希望這可以幫助您如何過濾器的工作。請注意，使用很多過濾器會讓你的輸出聽起來很奇怪。在結尾添加一個壓縮器可以標準化一切。

如果您需要了解其他內容，請隨時詢問。