index.html

<!DOCTYPE html>
<html style="height: 100vh">
  <head>
    <title>supercoil</title>
  </head>
  <body style="margin: 0; padding: 0; height: 100%; width: 100%; display: flex">
    <textarea
      id="code"
      spellcheck="false"
      style="
        width: 100%;
        font-size: 24px;
        color: white;
        background: indigo;
        border: 0;
        outline: none;
        padding: 10px;
      "
    ></textarea>
    <button
      style="position: fixed; right: 0; bottom: 0; font-size: 30px"
      id="playButton"
    >
      play
    </button>
    <button
      style="
        display: none;
        position: fixed;
        right: 0;
        bottom: 0;
        font-size: 30px;
      "
      id="stopButton"
    >
      stop
    </button>
    <script>
      // audio init
      console.log(
        `Welcome to supercoil, a minimal audio graph livecoding editor..
  
Click into the page and press ctrl enter to evaluate the code!
  
Read https://github.com/felixroos/supercoil to find out more!
  `
      );
      let ac;
      document.addEventListener("click", function initAudio() {
        ac = new AudioContext();
        ac.resume();
        document.removeEventListener("click", initAudio);
      });

      async function getSimpleDynamicWorklet(ac, code) {
        const name = `simple-custom-${Date.now()}`;
        const workletCode = `
class Node {
  constructor(type, ins) {
    this.type = type;
    let maxExpansions = 1;
    this.ins = ins.map(input => {
      input = this.parseInput(input);
      if(input.type === 'poly') {
        maxExpansions = Math.max(maxExpansions, input.ins.length);
      }
      return input;
    });
    // multichannel expansion
    if(maxExpansions > 1) {
      this.type = 'poly';
      this.ins = Array(maxExpansions).fill(0).map((_,i) => {
        const clone = new this.constructor(type, []);
        clone.ins = ins.map(input => {
          input = clone.parseInput(input);
          if(input.type === 'poly') {
            return input.ins[i % input.ins.length];
          }
          return input;
        });  
        return clone;
      });
    }
  }
  parseInput(input) {
    if(typeof input === 'function') {
      input = input(this); // lambda feedback
    }
    if(Array.isArray(input)) {
      input = new Node('poly', input); // interpret Arrays as poly nodes
    }
    return input;
  }
}

let register = (type, nodeClass = Node) => {
  Node.prototype[type] = function (...args) {
    return new nodeClass(type, [this, ...args]);
  };
  return (...args) => new nodeClass(type, args);
};

function topoSort(graph) {
  const sorted = [];
  const visited = new Set();
  function dfs(node) {
    if (!(node instanceof Node) || visited.has(node)) {
      return; // constant values or already visited nodes
    }
    visited.add(node);
    for (let i in node.ins) {
      dfs(node.ins[i]);
    }
    sorted.push(node);
  }
  dfs(graph);
  return sorted;
}
Node.prototype.compile = function() {
  let nodes = topoSort(this);  
  const getRegister = (input) => ["number","string"].includes(typeof input) ? input : \`r[\${nodes.indexOf(input)}]\`;
  let lines = [];
  for(let id in nodes) {
    const args = nodes[id].ins.map(getRegister).join(",");
    lines.push(\`r[\${id}] = nodes[\${id}].update(\${args}); // \${nodes[id].type}\`);
  }
  let channels;
  if(this.type === 'poly') {
     channels = [this.ins[0], this.ins[1]];
  } else {
     channels = [this, this]
  }
  channels = channels.map(getRegister)
  lines.push(\`o[0] = \${channels[0]}; // out 0\`);
  lines.push(\`o[1] = \${channels[1]}; // out 1\`);
  const code = lines.join(\`\\n\`);
  console.log(code);
  let update = new Function("nodes", "time", "r", "o", code);
  let r = new Array(nodes.length).fill(0);
  let tick = (t, o) => update(nodes, t, r, o);
  return tick;
}
  
let dsp;
Node.prototype.out = function() {
  dsp = this.compile()
}

const SAMPLE_RATE = sampleRate;
const ISR = 1 / SAMPLE_RATE;

const pulse = register(
  "pulse",
  class extends Node {
    phase = 0;
    update(freq, duty = 0.5) {
      this.phase  = ISR * freq;
      let cyclePos = this.phase % 1;
      return cyclePos < duty ? 1 : -1;
    }
  }
);
const sine = register(
  "sine",
  class extends Node {
    phase = 0;
    update = (freq) => Math.sin((this.phase  = 2 * Math.PI * freq * ISR));
  }
);
const add = register(
  "add",
  class extends Node {
    update = (a, b) => a   b;
  }
);
const mul = register(
  "mul",
  class extends Node {
    update = (a, b) => a * b;
  }
);
const dust = register(
  "dust",
  class extends Node {
    update = (density) => (Math.random() < density * ISR ? Math.random() : 0);
  }
);
const range = register(
  "range",
  class extends Node {
    update(input, min, max) {
      const uni = (input   1) * 0.5;
      return uni * (max - min)   min;
    }
  }
);
const impulse = register(
  "impulse",
  class extends Node {
    phase = 1;
    update(freq) {
      this.phase  = ISR * freq;
      let v = this.phase >= 1 ? 1 : 0;
      this.phase = this.phase % 1;
      return v;
    }
  }
);

const lpf = register(
  "lpf",
  class extends Node {
    s0 = 0;
    s1 = 0;
    update(s, cutoff, resonance = 0) {
      // Out of bound values can produce NaNs
      cutoff = Math.min(cutoff, 1);
      resonance = Math.max(resonance, 0);
      var c = Math.pow(0.5, (1 - cutoff) / 0.125);
      var r = Math.pow(0.5, (resonance   0.125) / 0.125);
      var mrc = 1 - r * c;
      var v0 = this.s0;
      var v1 = this.s1;
      // Apply the filter to the sample
      v0 = mrc * v0 - c * v1   c * s;
      v1 = mrc * v1   c * v0;
      s = v1;
      this.s0 = v0;
      this.s1 = v1;
      return s;
    }
  }
);
function lerp(x, y0, y1) {
  if (x >= 1) return y1;

  return y0   x * (y1 - y0);
}
const adsr = register(
  "adsr",
  class extends Node {
    state = "off";
    startTime = 0;
    startVal = 0;

    constructor(type, ins) {
      ins.unshift("time");
      super(type, ins);
    }
    update(curTime, gate, attack, decay, susVal, release) {
      switch (this.state) {
        case "off": {
          if (gate > 0) {
            this.state = "attack";
            this.startTime = curTime;
            this.startVal = 0;
          }
          return 0;
        }
        case "attack": {
          let time = curTime - this.startTime;
          if (time > attack) {
            this.state = "decay";
            this.startTime = curTime;
            return 1;
          }
          return lerp(time / attack, this.startVal, 1);
        }
        case "decay": {
          let time = curTime - this.startTime;
          let curVal = lerp(time / decay, 1, susVal);
          if (gate <= 0) {
            this.state = "release";
            this.startTime = curTime;
            this.startVal = curVal;
            return curVal;
          }
          if (time > decay) {
            this.state = "sustain";
            this.startTime = curTime;
            return susVal;
          }
          return curVal;
        }
        case "sustain": {
          if (gate <= 0) {
            this.state = "release";
            this.startTime = curTime;
            this.startVal = susVal;
          }
          return susVal;
        }
        case "release": {
          let time = curTime - this.startTime;
          if (time > release) {
            this.state = "off";
            return 0;
          }
          let curVal = lerp(time / release, this.startVal, 0);
          if (gate > 0) {
            this.state = "attack";
            this.startTime = curTime;
            this.startVal = curVal;
          }
          return curVal;
        }
      }
      throw "invalid envelope state";
    }
  }
);
export class Delay extends Node {
  writeIdx = 0;
  readIdx = 0;
  constructor(type, ins) {
    super(type, ins);
    const MAX_DELAY_TIME = 10;
    this.buffer = new Float32Array(MAX_DELAY_TIME * SAMPLE_RATE);
    this.buffer.fill(0);
  }
  write(s, delayTime) {
    this.writeIdx = (this.writeIdx   1) % this.buffer.length;
    this.buffer[this.writeIdx] = s;
    // Calculate how far in the past to read
    let numSamples = Math.min(
      Math.floor(SAMPLE_RATE * delayTime),
      this.buffer.length - 1
    );
    this.readIdx = this.writeIdx - numSamples;
    // If past the start of the buffer, wrap around
    if (this.readIdx < 0) this.readIdx  = this.buffer.length;
  }
  update(input, delayTime) {
    this.write(input, delayTime);
    return this.buffer[this.readIdx];
  }
}
const delay = register("delay", Delay)

const saw = register("saw", class extends Node { 
phase = 0
update = (freq) => {
  this.phase  = ISR * freq;
  return (this.phase % 1) * 2 - 1;
}
})
// end of lib

${code};

class MyProcessor extends AudioWorkletProcessor {
  constructor() {
    super();
    this.t = 0;
    this.stopped = false;
    this.o = [0, 0];
    this.port.onmessage = (e) => {
      if(e.data==='stop') {
        this.stopped = true;
      }
    };
  }
  process(inputs, outputs, parameters) {
    const output = outputs[0];
    const outChannel0 = output[0];
    const outChannel1 = output[1];
    for (let i = 0; i < outChannel0.length; i  ) {
      dsp(this.t / ${ac.sampleRate}, this.o);
      outChannel0[i] = this.o[0]; 
      outChannel1[i] = this.o[1]; 
      this.t  ;
    }
    return !this.stopped;
  }
}
registerProcessor('${name}', MyProcessor);
  `;
        const base64String = btoa(workletCode);
        const dataURL = `data:text/javascript;base64,${base64String}`;
        await ac.audioWorklet.addModule(dataURL);
        const node = new AudioWorkletNode(ac, name, {
          outputChannelCount: [2],
        });
        const stop = () => node.port.postMessage("stop");
        return { node, stop };
      }

      // control
      let worklet;
      const stop = async () => {
        worklet?.stop();
        worklet?.node?.disconnect();
        stopButton.style.display = "none";
        playButton.style.display = "block";
      };

      const update = async (code) => {
        ac = ac || new AudioContext();
        await ac.resume();
        stop();

        worklet = await getSimpleDynamicWorklet(ac, code);
        worklet.node.connect(ac.destination);
        window.location.hash = "#"   btoa(code);
        stopButton.style.display = "block";
        playButton.style.display = "none";
      };

      // ui
      const input = document.getElementById("code");
      const playButton = document.getElementById("playButton");
      const stopButton = document.getElementById("stopButton");
      let urlCode = window.location.hash.slice(1);
      if (urlCode) {
        urlCode = atob(urlCode);
        console.log("loaded code from url!");
      }
      const initialCode =
        urlCode ||
        `saw(55).lpf(sine(.5).range(.4,.8))
.mul(impulse(4).adsr(.1,.1,.1,.1))
.out()`;
      input.value = initialCode;

      input.addEventListener("keydown", (e) => {
        if ((e.ctrlKey || e.altKey) && e.key === "Enter") {
          update(input.value);
        } else if ((e.ctrlKey || e.altKey) && e.code === "Period") {
          stop();
          e.preventDefault();
        }
      });

      playButton.addEventListener("click", () => update(input.value));
      stopButton.addEventListener("click", () => stop());
    </script>
  </body>
</html>