dpiponi · June 30, 2019 02:30
diff --git a/test.html b/test.html
 <html>
 <body>

 <button type="button" id="start">
 Switch me on to start
 </button>

 <HR>

 <div>
  <input type="range" min="30" max="80" value="50" class="slider" id="sliderf">
  Fundamental: <label id = "fred">50</label>
 </div>

 <div>
  <input type="range" min="0" max="100" value="50" class="slider" id="slider0">

 <label class="switch">
  <input type="checkbox" id="button0">
 </label>
 Fundamental
 </div>

 <div>
  <input type="range" min="0" max="100" value="50" class="slider" id="slider1">

 <label class="switch">
  <input type="checkbox" id="button1">
 </label>
 First overtone
 </div>

 <div>
  <input type="range" min="0" max="100" value="50" class="slider" id="slider2">

 <label class="switch">
  <input type="checkbox" id="button2">
 </label>
 Second overtone
 </div>

 <div>
  <input type="range" min="0" max="100" value="50" class="slider" id="slider3">

 <label class="switch">
  <input type="checkbox" id="button3">
 </label>
 Third overtone
 </div>

 <div>
  <input type="range" min="0" max="100" value="50" class="slider" id="slider4">

 <label class="switch">
  <input type="checkbox" id="button4">
 </label>
 Fourth overtone
 </div>


 <script type="text/javascript">
 function main() {
  var context = new window.AudioContext();

  var oscs = []
  var gains = []
  var buttons = []
  var sliders = []

  for (i = 0; i < 5; ++i) {
    var osc = context.createOscillator();
    oscs.push(osc)
    osc.frequency.value = 50 * (i+1);

    var gain = context.createGain();
    gains.push(gain)
    gain.gain.value = 0.0
    osc.connect(gain)
    gain.connect(context.destination);

    osc.start(0);

    var slider = document.getElementById("slider" + i)
    slider.i = i
    slider.oninput = function() {
        i = this.i
        osc = oscs[i]
        button = buttons[i]
        gain = gains[i]
        if (button.checked) {
          gain.gain.value = this.value/100.0;
        }
    }
    sliders.push(slider)

    var button = document.getElementById("button" + i);
    button.i = i
    buttons.push(button)
    button.onclick = function() {
        i = this.i
        osc = oscs[i]
        slider = sliders[i]
        gain = gains[i]
        if (this.checked) {
            gain.gain.value = slider.value/100.0
        } else {
            gain.gain.value = 0.0
        }
    }
  }
  sliderf = document.getElementById("sliderf")
  sliderf.oninput = function() {
    f = sliderf.value
    document.getElementById("fred").innerHTML = f
    for (i = 0; i < 5; ++i) {
      oscs[i].frequency.value = f * (i+1)
    }
  }
 }

 document.getElementById('start').addEventListener('click', function() {
  main()
 });

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

	<button type="button" id="start">
	Switch me on to start
	</button>

	<HR>

	<div>
	<input type="range" min="30" max="80" value="50" class="slider" id="sliderf">
	Fundamental: <label id = "fred">50</label>
	</div>

	<div>
	<input type="range" min="0" max="100" value="50" class="slider" id="slider0">

	<label class="switch">
	<input type="checkbox" id="button0">
	</label>
	Fundamental
	</div>

	<div>
	<input type="range" min="0" max="100" value="50" class="slider" id="slider1">

	<label class="switch">
	<input type="checkbox" id="button1">
	</label>
	First overtone
	</div>

	<div>
	<input type="range" min="0" max="100" value="50" class="slider" id="slider2">

	<label class="switch">
	<input type="checkbox" id="button2">
	</label>
	Second overtone
	</div>

	<div>
	<input type="range" min="0" max="100" value="50" class="slider" id="slider3">

	<label class="switch">
	<input type="checkbox" id="button3">
	</label>
	Third overtone
	</div>

	<div>
	<input type="range" min="0" max="100" value="50" class="slider" id="slider4">

	<label class="switch">
	<input type="checkbox" id="button4">
	</label>
	Fourth overtone
	</div>


	<script type="text/javascript">
	function main() {
	var context = new window.AudioContext();

	var oscs = []
	var gains = []
	var buttons = []
	var sliders = []

	for (i = 0; i < 5; ++i) {
	var osc = context.createOscillator();
	oscs.push(osc)
	osc.frequency.value = 50 * (i+1);

	var gain = context.createGain();
	gains.push(gain)
	gain.gain.value = 0.0
	osc.connect(gain)
	gain.connect(context.destination);

	osc.start(0);

	var slider = document.getElementById("slider" + i)
	slider.i = i
	slider.oninput = function() {
	i = this.i
	osc = oscs[i]
	button = buttons[i]
	gain = gains[i]
	if (button.checked) {
	gain.gain.value = this.value/100.0;
	}
	}
	sliders.push(slider)

	var button = document.getElementById("button" + i);
	button.i = i
	buttons.push(button)
	button.onclick = function() {
	i = this.i
	osc = oscs[i]
	slider = sliders[i]
	gain = gains[i]
	if (this.checked) {
	gain.gain.value = slider.value/100.0
	} else {
	gain.gain.value = 0.0
	}
	}
	}
	sliderf = document.getElementById("sliderf")
	sliderf.oninput = function() {
	f = sliderf.value
	document.getElementById("fred").innerHTML = f
	for (i = 0; i < 5; ++i) {
	oscs[i].frequency.value = f * (i+1)
	}
	}
	}

	document.getElementById('start').addEventListener('click', function() {
	main()
	});

	</script>
	</body>