javascript - JavaScript 中的频率正弦扫描生成

Question

我尝试在 JavaScript 中生成正弦扫描，但遇到了一些问题。产生的音频波听起来不正确(破裂、喀哒声等)。

为了调试，我绘制了数据，并发现了一个数据以(看起来)异常方式变化的地方。

我对音频编程的经验很少，所以我很难调试和发现问题。

我尝试生成一个正弦波，其中频率从 100 Hz 扫描到 200 Hz，然后再回到 100 Hz，每分钟 55 个周期。

这是代码:

function SweepFreq(cyclesPerMinuteElement, lowFreqElement, highFreqElement) {
    this.cyclesPerMinute = 55;
    this.cycle_length = 60.0/this.cyclesPerMinute;
    this.lowFreq = 100; 
    this.highFreq = 200;
    this.time = 0.0;
    this.buffer = null;

    this.initSweep = function (element) {
        var sampleRate = 44100.0
        var seconds = 12;
        var length = sampleRate*seconds;
        this.buffer = new Float32Array(length);
        this.generateSineWave(this.buffer, sampleRate, seconds)
    }

    this.generateSineWave = function(buffer, sampleRate, seconds) {
        var deltaTime = 1.0/(sampleRate);

        var old_v = 0;
        var old_frequency = 0;
        var old_waveLength = 0;
        var old_timePos = 0;
        var old_pos = 0;
        var old_val = 0;

        for (var i = 0; i < sampleRate*seconds; i++) {
            var v = this.getProgress(deltaTime);
            var frequency = ((this.highFreq-this.lowFreq)*v)+this.lowFreq;
            var waveLength = 1.0 / frequency;
            var timePos = i / sampleRate;
            var pos = timePos / waveLength;
            var val = Math.sin(pos * 2.0 * Math.PI);
            this.buffer[i] = val;

            // debug stuff
            var diff_v = old_v-v;
            var diff_frequency = old_frequency-frequency;
            var diff_waveLength = old_waveLength - waveLength;
            var diff_timePos = old_timePos - timePos;
            var diff_pos = old_pos - pos;
            var diff_val = old_val - val;
            old_v = v;
            old_frequency = frequency;
            old_waveLength = waveLength;
            old_timePos = timePos;
            old_pos = pos;
            old_val = val;
            if (i > (5*4096+3570) && i < (5*4096+3590)) {
//              console.log(v, frequency, waveLength*100000000.0, diff_v, diff_frequency, diff_waveLength*100000000.0);
                console.log(timePos, pos, val, diff_timePos, diff_pos, diff_val);
            }
            // end of debug stuff
        }
    }

    this.getProgress = function(deltaTime) {
        this.time += deltaTime;
        if (this.time > this.cycle_length)
            this.time -= this.cycle_length;
        var progress = this.time/this.cycle_length;
        if (progress < 0.5) {
            return progress*2.0;
        }
        else {
            return 1.0-((progress-0.5)*2.0)
        }
    }
}

这是该图相关区域的图像:http://www.shareimage.ro/images/pxf8xb8r18je56drwmy6.png

以下是该区域周围值的一些输出:(请注意 timePos delta 的差异)

v, frequency, waveLength*100000000.0, diff_v, diff_frequency, diff_waveLength*100000000.0
0.9998941798945973 199.98941798945972 500026.4564261616 -0.0000415721844293504 -0.004157218442941257 10.394362057533634
0.9999357520790266 199.99357520790267 500016.0624962343 -0.0000415721844293504 -0.004157218442941257 10.39392992724722
0.999977324263456 199.99773242634558 500005.6689984104 -0.0000415721844293504 -0.004157218442912836 10.393497823935755
0.9999811035521147 199.99811035521145 500004.7241566063 -0.0000037792886586895946 -0.00037792886587340035 0.9448418041013706
0.9999395313676853 199.99395313676854 500015.1176151494 0.0000415721844293504 0.004157218442912836 -10.393458543117573
0.999897959183256 199.9897959183256 500025.5115057935 0.0000415721844293504 0.004157218442941257 -10.393890644087161
0.9998563869988266 199.98563869988266 500035.90582856524 0.0000415721844293504 0.004157218442941257 -10.394322771771492
0.9998148148143973 199.98148148143974 500046.3005834917 0.0000415721844293504 0.004157218442912836 -10.394754926430771
0.9997732426299679 199.97732426299677 500056.6957706 0.0000415721844293504 0.004157218442969679 -10.39518710832521
0.9997316704455386 199.97316704455386 500067.09138991666 0.0000415721844293504 0.004157218442912836 -10.395619316674182
0.9996900982611092 199.96900982611092 500077.4874414691 0.0000415721844293504 0.004157218442941257 -10.396051552431784
0.9996485260766799 199.96485260766798 500087.883925284 0.0000415721844293504 0.004157218442941257 -10.396483814904128
0.9996069538922505 199.96069538922507 500098.28084138845 0.0000415721844293504 0.004157218442912836 -10.396916104438159
0.9995653817078212 199.9565381707821 500108.67818980943 0.0000415721844293504 0.004157218442969679 -10.39734842094714
0.9995238095233918 199.95238095233918 500119.07597057364 0.0000415721844293504 0.004157218442912836 -10.397780764257597
0.9994822373389625 199.94822373389624 500129.4741837084 0.0000415721844293504 0.004157218442941257 -10.398213134716478
0.9994406651545331 199.9440665154533 500139.87282924046 0.0000415721844293504 0.004157218442941257 -10.398645532063572
0.9993990929701038 199.9399092970104 500150.27190719673 0.0000415721844293504 0.004157218442912836 -10.39907795629888
0.9993575207856744 199.93575207856745 500160.67141760443 0.0000415721844293504 0.004157218442941257 -10.39951040768261 

timePos, pos, val, diff_timePos, diff_pos, diff_val
0.545374149659864 109.06905877697271 0.4204208397546066 -0.000022675736961463855 -0.006802052642697731 -0.03915004637084152
0.5453968253968254 109.07586101815137 0.4588041214830869 -0.000022675736961463855 -0.006802241178661461 -0.03838328172848032
0.5454195011337869 109.08266344786601 0.49635046831417823 -0.000022675736961463855 -0.006802429714639402 -0.037546346831091315
0.5454421768707483 109.08740468218267 0.5219878252653231 -0.000022675736961352833 -0.004741234316654186 -0.02563735695114483
0.5454648526077097 109.08967217018066 0.5340864997440766 -0.000022675736961463855 -0.002267487997997364 -0.012098674478753568
0.5454875283446712 109.09193946964263 0.5460757756696786 -0.000022675736961463855 -0.0022672994619625797 -0.01198927592560195
0.5455102040816326 109.09420658056864 0.5579532472663103 -0.000022675736961463855 -0.0022671109260130606 -0.011877471596631772
0.5455328798185941 109.09647350295867 0.5697165324497411 -0.000022675736961463855 -0.00226692239003512 -0.011763285183430727
0.5455555555555556 109.09874023681267 0.5813632732981516 -0.000022675736961463855 -0.0022667338540003357 -0.011646740848410553
0.545578231292517 109.10100678213077 0.5928911365171865 -0.000022675736961463855 -0.002266545318093449 -0.011527863219034873
0.5456009070294785 109.10327313891281 0.6042978138973617 -0.000022675736961463855 -0.002266356782044454 -0.0114066773801752
0.54562358276644 109.1055393071589 0.615581022770094 -0.000022675736961463855 -0.002266168246094935 -0.011283208872732264
0.5456462585034013 109.10780528686898 0.6267385064542539 -0.000022675736961352833 -0.0022659797100743617 -0.011157483684159919
0.5456689342403628 109.11007107804308 0.637768034700286 -0.000022675736961463855 -0.002265791174096421 -0.011029528246032094
0.5456916099773242 109.11233668068122 0.6486674041261999 -0.000022675736961463855 -0.002265602638146902 -0.010899369425913963
0.5457142857142857 109.11460209478336 0.659434438648618 -0.000022675736961463855 -0.0022654141021405394 -0.010767034522418006
0.5457369614512472 109.11686732034953 0.670066989909156 -0.000022675736961463855 -0.0022652255661625986 -0.010632551260538081
0.5457596371882086 109.11913235737973 0.6805629376928694 -0.000022675736961463855 -0.0022650370301988687 -0.010495947783713322
0.5457823129251701 109.12139720587393 0.6909201903420606 -0.000022675736961463855 -0.002264848494206717 -0.010357252649191295 

据我所知，问题是 timePos 的增量突然从 ~0.006802052642697731 变为 ~0.0022671109260130606

当进度达到 0.5(频率达到 200 Hz)并且频率开始再次向 100 Hz 移动时，就会发生这种情况。

我已经盯着这段代码看了好几个小时了，就是看不出问题所在。

这是我用来生成恒定频率波形的代码:

for (var i=0; i<sampleRate*seconds; i++) {
    var p = (i/sampleRate);
    var v = Math.sin((2*Math.PI) * p * frequency);
    buffer[i] = v;
}

Answer 1

我认为问题在于，虽然您正在扫描频率，但您并没有根据该频率将累积添加到“振荡器”的位置 - 相反，看起来您正在计算什么如果计算出的频率始终为该频率，则振荡器的位置将在该时刻。

我尝试了这个算法(我稍微改变了值，以使输出在 Excel 中看起来更舒服!)

function SweepFreq(cyc, lo, hi) {
this.cyclesPerMinute = cyc;
this.cycle_length = 60.0/this.cyclesPerMinute;
this.lowFreq = lo;
this.highFreq = hi;
this.time = 0.0;
this.buffer = null;

window.initSweep = function (element) {
    var sampleRate = 10000.0
    var seconds = 1;
    var length = sampleRate*seconds;
    this.buffer = new Float32Array(length);
    this.generateSineWave(this.buffer, sampleRate, seconds)
}

this.generateSineWave = function(buffer, sampleRate, seconds) {
    var deltaTime = 1.0/(sampleRate);

    var oldCyclePosition=0;

    for (var i = 0; i < sampleRate*seconds; i++) {
        var frequencyFactor = this.getFrequencyFactor(deltaTime);
        var frequency = ((this.highFreq-this.lowFreq)*frequencyFactor)+this.lowFreq;

        var distanceMovedInThisSample  = frequency / sampleRate;
        var currentCyclePosition =  distanceMovedInThisSample + oldCyclePosition;

        var val = Math.sin(currentCyclePosition * 2.0 * Math.PI);
        this.buffer[i] = val;
        oldCyclePosition = currentCyclePosition;
        console.log(val);
    }
}

this.getFrequencyFactor = function(deltaTime) {
    this.time += deltaTime;
    if (this.time > this.cycle_length)
        this.time -= this.cycle_length;
    var progress = this.time/this.cycle_length;
    if (progress < 0.5) {
        return progress*2.0;
    }
    else {
        return 1.0-((progress-0.5)*2.0)
    }
}}

无论如何，似乎都能进行平滑的扫掠!

还有一件事是，我发现达到 100% 幅度的波形有时会导致某些驱动程序和硬件发出咔嗒声和爆裂声，因此请尝试将波形标准化为 50%。