优化这段代码各种波形由外部按钮选择，并且可以调节频率

这段代码可以通过以下方式进行优化：

1. 使用变量来存储当前选择的波形类型和频率，然后在按钮点击事件中更新这些变量的值。

2. 将波形生成的代码封装成一个函数，这样就可以根据当前选择的波形类型和频率来动态生成不同的波形。

3. 使用 HTML5 的 Canvas API 来绘制波形，这样可以实现更加灵活的绘制方式，同时也可以更好地控制绘制效果。

下面是一个参考实现的代码示例：

HTML 代码：

<canvas id="waveformCanvas"></canvas>
<div>
  <button onclick="selectWaveform('sine')">正弦波</button>
  <button onclick="selectWaveform('square')">方波</button>
  <button onclick="selectWaveform('triangle')">三角波</button>
  <label>频率：</label>
  <input type="range" min="1" max="1000" value="440" step="1" onchange="setFrequency(this.value)">
  <span id="frequencyLabel">440 Hz</span>
</div>

JavaScript 代码：

const canvas = document.getElementById('waveformCanvas');
const ctx = canvas.getContext('2d');

let waveformType = 'sine';
let frequency = 440;

function selectWaveform(type) {
  waveformType = type;
}

function setFrequency(f) {
  frequency = f;
  document.getElementById('frequencyLabel').textContent = `${f} Hz`;
}

function generateWaveform() {
  const width = canvas.width;
  const height = canvas.height;
  const period = 2 * Math.PI / (canvas.width / frequency);
  const amplitude = height / 2;

  ctx.clearRect(0, 0, width, height);
  ctx.beginPath();

  for (let x = 0; x < width; x++) {
    let y;

    switch (waveformType) {
      case 'sine':
        y = amplitude * Math.sin(period * x);
        break;
      case 'square':
        y = amplitude * Math.sign(Math.sin(period * x));
        break;
      case 'triangle':
        y = amplitude * Math.asin(Math.sin(period * x));
        break;
    }

    ctx.lineTo(x, y + height / 2);
  }

  ctx.stroke();
}

setInterval(generateWaveform, 30);

这段代码定义了三个变量：`waveformType` 存储当前选择的波形类型，`frequency` 存储当前选择的频率，以及 `ctx` 存储 `canvas` 对象的上下文。

在 `selectWaveform` 和 `setFrequency` 函数中，分别更新了 `waveformType` 和 `frequency` 的值，并且在页面中显示了当前选择的频率。

`generateWaveform` 函数负责生成波形，并且将其绘制到 `canvas` 中。在函数中，根据当前选择的波形类型和频率，计算出每个点的坐标，并且使用 `ctx.lineTo` 方法来绘制波形。

最后，通过 `setInterval` 方法调用 `generateWaveform` 函数，以每 30 毫秒的间隔更新绘制的波形。