任何人都可以告诉代码如何正常工作?

时间:2014-02-03 10:25:59

标签: javascript html html5

这是一个应该生成正弦波的代码?但是在运行代码的过程中,我得到了十进制形式的输出,但我需要输出为正弦波。这是我的代码

<!DOCTYPE html>
<html>
<head>
<title>Try Create Sine Wave</title>
</head>
<body>
<div id="wave"></div>
<button id="play" onClick="SweepFreq(100,100,500);initSweep(document.getElementById('wave'));"> Start</button>
<script type="text/javascript">

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;
alert("hai");
window.initSweep = function (element) {
    var sampleRate = 10000.0;
    var seconds = 1;
    var length = sampleRate*seconds;
    this.buffer = new Float32Array(length);
    alert("hallo");
    this.generateSineWave(this.buffer, sampleRate, seconds);
}

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

    var oldCyclePosition=0;
    alert("happy");
    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;
        document.write(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);
    }
};

}
</script>
</body>
</html>

还有更多我尝试使用html5中的音频标签从正弦波生成声音形式。

提前致谢

2 个答案:

答案 0 :(得分:1)

永远不会调用函数initSweep。试试这个(唯一的区别是initSweep(document.getElementById(&#39; wave&#39;));被添加到按钮的onclick中):

<!DOCTYPE html>
<html>
<head>
<title>Try Create Sine Wave</title>
</head>
<body>
<div id="wave"></div>
<button id="play" onClick="SweepFreq(100,100,500);initSweep(document.getElementById('wave'));"> Start</button>
<script type="text/javascript">

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

}
</script>
</body>
</html>

答案 1 :(得分:0)

在您的代码中未调用window.initSweep

在您的代码中执行以下行

this.cyclesPerMinute = cyc;
this.cycle_length = 60.0/this.cyclesPerMinute;
this.lowFreq = lo;
this.highFreq = hi;
this.time = 0.0;
this.buffer = null;

然后你有从未执行的函数声明