source: <input type=text id="source" value="media/icced.mp4">
<br>
peak: <input type="number" id="m" value="0">m<input type="number" id="s" value="48">s<input type="number" id="ms" value="900">ms
<br>
instances: <input type="number" min=1 id="instances" value=8>
<br>
interval speed: <input type="number" id="speed" value="0.15">
<br>
<input type="submit" id="run" value="run"><input type="submit" id="clear" value="clear"><input type="submit" id="kill" value="kill">
<!-- presets -->
<input type="submit" id="icced" value="icced">
<input type="submit" id="icced_2" value="icced_2">
<input type="submit" id="omlett.wmv" value="omlett.wmv">
<input type="submit" id="omlett.wmv_2" value="omlett.wmv_2">
<br>
<script>

// aaaaaaaaaudio shi

const context = new AudioContext();

function loadSample(url) {
  return fetch(url)
    .then(response => response.arrayBuffer())
    .then(buffer => context.decodeAudioData(buffer));
}

function playSample(sample, rate) {
  const source = context.createBufferSource();
  source.buffer = sample;
  source.playbackRate.value = rate;
  source.connect(context.destination);
  source.start(0);
}

// this pan has no corner, its an omlett pan actually

function playVideo(source, speed, delay) {
  setTimeout(() => {
    var video = document.createElement('video');
    video.src = source;
    video.autoplay = true;
    video.muted = true;
    video.playbackRate = speed;
    document.body.appendChild(video);
    loadSample(source)
      .then(sample => playSample(sample, speed));
  }, delay);
}

function hell(source, peak, instances, intervalspeed) {
  for (var i = 0; i <= instances - 1 ; i++) {
    var speed = 1 + i * intervalspeed;
    var delay = peak - peak * 1/(speed);
    console.log("speed:" + speed + "delay" + delay);
    playVideo(source, speed, delay);
  }
}

document.getElementById("run").onclick = function() {
  var source = document.getElementById("source").value;
  var m = document.getElementById("m").value;
  var s = document.getElementById("s").value;
  var ms = document.getElementById("ms").value;
  var peak = (m * 60 * 1000) + (s * 1000) + ms * 1;
  var instances = document.getElementById("instances").value;
  var intervalspeed = document.getElementById("speed").value;

  hell(source, peak, instances, intervalspeed);

}

document.getElementById("kill").onclick = function() {
  location.reload();
}

document.getElementById("clear").onclick = function() {
  var rubbish = document.getElementsByTagName("video");
  for (var i = 0; i < rubbish.length; i++) {
    rubbish[i].remove();
  }
}

// presets

document.getElementById("icced").onclick = function() {
  hell("media/icced.mp4", 48900, 8, 0.15);
}

document.getElementById("icced_2").onclick = function() {
  hell("media/icced.mp4", 48900, 20, 0.075);
}

document.getElementById("omlett.wmv").onclick = function() {
  hell("media/omlett.wmv.mp4", 34400, 8, 0.1);
}

document.getElementById("omlett.wmv_2").onclick = function() {
  hell("media/omlett.wmv.mp4", 34400, 20, 0.067);
}

</script>