Timbre.js Playground / Evgeny Zislis

Evgeny Zislis

Workspace

Public

Edited

Apr 7, 2023

{

let freq = 440 * Math.pow(2, (vcoInput.note % 12)/12)

vco.set({ freq })

if (vcoInput.active) {

vco.play()

let timeout = T("timeout", { timeout: vcoInput.timeout })

.on("ended", () => vco.pause()).start()

}

// T.reset()

// var mml0, mml1;

// var env = T("adsr", {d:3000, s:0, r:600});

// var synth = T("SynthDef", {mul:0.45, poly:8});

// synth.def = function(opts) {

// var op1 = T("sin", {freq:opts.freq*6, fb:0.25, mul:0.4});

// var op2 = T("sin", {freq:opts.freq, phase:op1, mul:opts.velocity/128});

// return env.clone().append(op2).on("ended", opts.doneAction).bang();

// };

// var master = synth;

// var mod = T("sin", {freq:2, add:3200, mul:800, kr:1});

// master = T("eq", {params:{lf:[800, 0.5, -2], mf:[6400, 0.5, 4]}}, master);

// master = T("phaser", {freq:mod, Q:2, steps:4}, master);

// master = T("delay", {time:"BPM60 L16", fb:0.65, mix:0.25}, master);

// mml0 = "t60 l4 v6 q2 o3";

// mml0 += "[ [g < b0<d0f+2>> d <a0<c+0f+2>>]8 ";

// mml0 += "f+ <a0<c+0f+2>>> b<<b0<d0f+2>> e<g0b2> e<b0<d0g2>> d<f0a0<d2>>";

// mml0 += ">a<<a0<c0e2>> d<g0b0<e2>> d<d0g0b0<e2>> d<c0e0a0<d2>> d<c0f+0a0<d2>>";

// mml0 += "d<a0<c0f2>> d<a0<c0e2>> d<d0g0b0<e2>> d<c0e0a0<d2>> d<c0f+0a0<d2>>";

// mml0 += "| e<b0<e0g2>> f+<a0<c+0f+2>>> b<<b0<d0f+2>> e<<c+0e0a2>> e<a0<c+0f+0a2>>";

// mml0 += "eb0<a0<d>e0b0<d0g>> a0<g2.> d0a0<d2.> ]";

// mml0 += "e<b0<e0g2>> e<a0<d0f0a2>> e<a0<c0f2>> e<<c0e0a2>> e<a0<c0f0a2>>";

// mml0 += "eb0<a0<d>e0b0<d0g>> a0<g2.> d0a0<d2.>";

// mml1 = "t60 v14 l4 o6";

// mml1 += "[ r2. r2. r2. r2.";

// mml1 += "rf+a gf+c+ >b<c+d >a2. f+2.& f+2.& f+2.& f+2.< rf+a gf+c+ >b<c+d >a2.<";

// mml1 += "c+2. f+2. >e2.&e2.&e2.";

// mml1 += "ab<c ed>b< dc>b< d2.& d2d";

// mml1 += "efg acd ed>b <d2.& d2d";

// mml1 += "| g2. f+2.> bab< c+de c+de>";

// mml1 += "f+2. c0e0a0<c2.> d0f+0a0<d2. ]";

// mml1 += "g2. f2.> b<cf edc edc>";

// mml1 += "f2. c0e0a0<c2.> d0f0a0<d2.";

// T("mml", {mml:[mml0, mml1]}, synth).on("ended", function() {

// this.stop();

// }).set({buddies:master}).start();

// let vcf = T("lpf", { cutoff: 500, Q: 20 }, vco)

// let eg = T("adsr", { a: 10, d: 250, s: 0.6, r: 250 }, vcf)

// .on("ended", () => this.pause())

// .bang()

// if (vcoInput.active) {

// vco.set({ freq: vcoInput.frequency })

// vco.play()

// } else {

// vco.stop()

// }

// // Create an output node

// let output = mul(mixer, 0.5);

// // Create a master bus

// master.bus().append(output);

// // Create a delay effect

// let delayEffect = delay({time: 0.2}, output);

// // Set up the UI

// let ui = {

// on: param(false),

// vcoFreq: param(440),

// vcfCutoff: param(500),

// egAttack: param(10),

// egDecay: param(250),

// egSustain: param(0.6),

// egRelease: param(250),

// delayTime: param(0.2),

// mix: param(0.5),

// };

// // Bind the UI parameters to the synth parameters

// ui.on.on('change', (value) => {

// if (value) {

// output.connect(delayEffect).toMaster();

// } else {

// output.disconnect();

// delayEffect.disconnect();

// }

// });

// ui.vcoFreq.on('change', (value) => {vco.freq = value});

// ui.vcfCutoff.on('change', (value) => {vcf.cutoff = value});

// ui.egAttack.on('change', (value) => {eg.a = value});

// ui.egDecay.on('change', (value) => {eg.d = value});

// ui.egSustain.on('change', (value) => {eg.s = value});

// ui.egRelease.on('change', (value) => {eg.r = value});

// ui.delayTime.on('change', (value) => {delayEffect.time = value});

// ui.mix.on('change', (value) => {output.mul = value});

// // Create the UI view

// let view = {

// let el = document.createElement("div");

// el.style.display = "flex";

// el.style.flexDirection = "column";

// el.style.padding = "10px";

// el.style.border = "1px solid #ccc";

// el.style.borderRadius = "5px";

// let onBtn = document.createElement("button");

// onBtn.textContent = "ON";

// onBtn.style.marginBottom = "10px";

// onBtn.style.backgroundColor = "#4CAF50";

// onBtn.style.color = "white";

// onBtn.style.borderRadius = "5px";

// onBtn.style.padding = "5px 10px";

// onBtn.style.cursor = "pointer";

// onBtn.addEventListener("click", () => {

// ui.on.value = !ui.on.value;

// onBtn.textContent = ui.on.value ? "OFF" : "ON";

// onBtn.style.backgroundColor = ui.on.value ? "#f44336" : "#4CAF50";

// onBtn.style.color = ui.on.value ? "white" : "black";

// });

// el.appendChild(onBtn);

// let vcoFreqSlider = document.createElement("input");

// vcoFreqSlider.type = "range";

// vcoFreqSlider.min = "20";

// vcoFreqSlider.max = "20000";

// vcoFreqSlider.value = ui.vcoFreq.value;

// vcoFreqSlider.style.marginBottom = "10px";

// vcoFreqSlider.addEventListener("input", () => {

// ui.vcoFreq.value = parseFloat(vcoFreqSlider.value);

// });

// el.appendChild(document.createTextNode("VCO Frequency"));

// el.appendChild(vcoFreqSlider);

// let vcfCutoffSlider = document.createElement("input");

// vcfCutoffSlider.type = "range";

// vcfCutoffSlider.min = "20";

// vcfCutoffSlider.max = "10000";

// vcfCutoffSlider.value = ui.vcfCutoff.value;

// vcfCutoffSlider.style.marginBottom = "10px";

// vcfCutoffSlider.addEventListener("input", () => {

// ui.vcfCutoff.value = parseFloat(vcfCutoffSlider.value);

// });

// el.appendChild(document.createTextNode("VCF Cutoff"));

// el.appendChild(vcfCutoffSlider);

// let egAttackSlider = document.createElement("input");

// egAttackSlider.type = "range";

// egAttackSlider.min = "1";

// egAttackSlider.max = "100";

// egAttackSlider.value = ui.egAttack.value;

// egAttackSlider.style.marginBottom = "10px";

// egAttackSlider.addEventListener("input", () => {

// ui.egAttack.value = parseFloat(egAttackSlider.value);

// });

// el.appendChild(document.createTextNode("EG Attack"));

// el.appendChild(egAttackSlider);

// let egDecaySlider = document.createElement("input");

// egDecaySlider.type = "range";

// egDecaySlider.min = "1";

// egDecaySlider.max = "1000";

// egDecaySlider.value = ui.egDecay.value;

// egDecaySlider.style.marginBottom = "10px";

// egDecaySlider.addEventListener("input", () => {

// ui.egDecay.value = parseFloat(egDecaySlider.value);

// });

// el.appendChild(document.createTextNode("EG Decay"));

// el.appendChild(egDecaySlider);

// let egSustainSlider = document.createElement("input");

// egSustainSlider.type = "range";

// egSustainSlider.min = "0";

// egSustainSlider.max = "1";

// egSustainSlider.step = "0.01";

// egSustainSlider.value = ui.egSustain.value;

// egSustainSlider.style.marginBottom = "10px";

// egSustainSlider.addEventListener("input", () => {

// ui.egSustain.value = parseFloat(egSustainSlider.value);

// });

// el.appendChild(document.createTextNode("EG Sustain"));

// el.appendChild(egSustainSlider);

// let egReleaseSlider = document.createElement("input");

// egReleaseSlider.type = "range";

// egReleaseSlider.min = "1";

// egReleaseSlider.max = "1000";

// egReleaseSlider.value = ui.egRelease.value;

// egReleaseSlider.style.marginBottom = "10px";

// egReleaseSlider.addEventListener("input", () => {

// ui.egRelease.value = parseFloat(egReleaseSlider.value);

// });

// el.appendChild(document.createTextNode("EG Release"));

// el.appendChild(egReleaseSlider);

// let delayTimeSlider = document.createElement("input");

// delayTimeSlider.type = "range";

// delayTimeSlider.min = "0";

// delayTimeSlider.max = "1";

// delayTimeSlider.step = "0.01";

// delayTimeSlider.value = ui.delayTime.value;

// delayTimeSlider.style.marginBottom = "10px";

// delayTimeSlider.addEventListener("input", () => {

// ui.delayTime.value = parseFloat(delayTimeSlider.value);

// });

// el.appendChild(document.createTextNode("Delay Time"));

// el.appendChild(delayTimeSlider);

// let mixSlider = document.createElement("input");

// mixSlider.type = "range";

// mixSlider.min = "0";

// mixSlider.max = "1";

// mixSlider.step = "0.01";

// mixSlider.value = ui.mix.value;

// mixSlider.style.marginBottom = "10px";

// mixSlider.addEventListener("input", () => {

// ui.mix.value = parseFloat(mixSlider.value);

// });

// el.appendChild(document.createTextNode("Mix"));

// el.appendChild(mixSlider);

// return el;

// };

// // Display the UI view

// let el = view();

// let div = DOM.element('div');

// div.appendChild(el);

// return div;

}

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.

Learn more