ergz
/
simple-synth
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

starts adding tailwind to make things prettier

This commit is contained in:
Emanuel Rodriguez 2023-10-07 23:33:28 -07:00
parent b9acf85e29
commit 4de3ddb8ce
6 changed files with 14 additions and 620 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
basic.html
View File

@ -1,87 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>simple-synth</title>
</head>
<body>
<form style="padding: 15px">
<fieldset>
<legend>Waveform Selection</legend>
<input type="radio" id="sinwave" name="wavechoice" value="sine">
<label for="sinwave">Sine</label>
<input type="radio" id="squarewave" name="wavechoice" value="square" checked>
<label for="squarewave">Square</label>
<input type="radio" id="triwave" name="wavechoice" value="triangle">
<label for="triwave">Triangle</label>
<input type="radio" id="sawtoothwave" name="wavechoice" value="sawtooth">
<label for="sawtoothwave">Sawtooth</label>
</fieldset>
</form>
<form style="padding: 15px">
<fieldset>
<legend>Keyboard</legend>
<input type="radio" id="noteC" name="notechoice" value="C" checked>
<label for="C">C</label>
<input type="radio" id="noteD" name="notechoice" value="D">
<label for="D">D</label>
<input type="radio" id="noteE" name="notechoice" value="E">
<label for="E">E</label>
<input type="radio" id="noteF" name="notechoice" value="F">
<label for="F">F</label>
<input type="radio" id="noteG" name="notechoice" value="G">
<label for="G">G</label>
<input type="radio" id="noteA" name="notechoice" value="A">
<label for="A">A</label>
<input type="radio" id="noteB" name="notechoice" value="B">
<label for="B">B</label>
</fieldset>
</form>
<form style="padding: 15px">
<fieldset>
<legend>Octave Selection</legend>
<input type="radio" id="minus2" name="octavechoice" value="-2">
<label for="minus2">-2</label>
<input type="radio" id="minus1" name="octavechoice" value="-1">
<label for="minus1">-1</label>
<input type="radio" id="plus0" name="octavechoice" value="0" checked>
<label for="plus0">0</label>
<input type="radio" id="plus1" name="octavechoice" value="1">
<label for="plus1">+1</label>
<input type="radio" id="plus2" name="octavechoice" value="2">
<label for="plus2">+2</label>
</fieldset>
</form>
<div style="padding: 15px">
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="arp">Arp</button>
<div style="padding: 10px;">
<label for="gain">Volume</label>
<input id="gain" type="range" min="0" max=".1" value=".05" step=".001"/>
<span id="gainDisplay">.5</span>
</div>
<script src="basic.js"></script>
</body>
</html>

217
basic.js
View File

@ -1,217 +0,0 @@
let osc = null;
let gain = null;
let selectedWave = "square";
let baseFreq = 440;
let currentFreq = 261.63;
let notes = ["C", "D", "E", "F", "G", "A", "B"];
let arpInterval = null;
function octavehz(hz, octave) {
const val = parseFloat(octave);
return hz * 2 ** val;
}
function noteToHz(note) {
switch (note) {
case "C":
return 261.63;
case "D":
return 293.66;
case "E":
return 329.63;
case "F":
return 349.23;
case "G":
return 392;
case "A":
return 440;
case "B":
return 493.88;
default:
return 0;
}
}
window.onload = function () {
const audioContext = new AudioContext();
function updateOscFrequency() {
let selectedNoteButton = document.querySelector(
"input[name='notechoice']:checked"
);
let selectedOctaveButton = document.querySelector(
"input[name='octavechoice']:checked"
);
if (selectedNoteButton && selectedOctaveButton) {
let selectedNote = selectedNoteButton.value;
let selectedOctave = parseFloat(selectedOctaveButton.value);
let noteFreq = noteToHz(selectedNote);
let freqOctaveChoice = octavehz(noteFreq, selectedOctave);
if (osc) {
osc.frequency.setValueAtTime(
freqOctaveChoice,
audioContext.currentTime
);
}
}
}
function handleWaveformSelectionChange() {
let selectedRadioButton = document.querySelector(
"input[name='wavechoice']:checked"
);
if (selectedRadioButton) {
selectedWave = selectedRadioButton.value;
if (osc) {
osc.type = selectedWave;
}
console.log(selectedWave);
} else {
console.log("No radio button is selected.");
}
}
document.querySelectorAll("input[name='notechoice']").forEach((rb) => {
rb.addEventListener("change", updateOscFrequency);
});
document
.querySelectorAll("input[name='wavechoice']")
.forEach((radioButton) => {
radioButton.addEventListener("change", handleWaveformSelectionChange);
});
document.querySelectorAll("input[name='octavechoice']").forEach((rb) => {
rb.addEventListener("change", updateOscFrequency);
});
// handle keyboard
window.addEventListener("keydown", (event) => {
if (event.repeat) return;
switch (event.key) {
// play/stop
case "s":
{
if (osc) {
osc.stop();
osc = null;
}
}
break;
// "piano roll"
case "1":
selectNote("C");
break;
case "2":
selectNote("D");
break;
case "3":
selectNote("E");
break;
case "4":
selectNote("F");
break;
case "5":
selectNote("G");
break;
case "6":
selectNote("A");
break;
case "7":
selectNote("B");
break;
default:
// If the key is not 1-7, do nothing
break;
}
});
function selectNote(note) {
const radioButton = document.querySelector(
`input[name='notechoice'][value='${note}']`
);
if (radioButton) {
radioButton.checked = true;
updateOscFrequency();
} else {
console.error(`Radio button for note ${note} not found`);
}
}
// gain slider
const gainSlider = document.getElementById("gain");
const gainDisplay = document.getElementById("gainDisplay");
gainSlider.addEventListener("input", () => {
const level = parseFloat(gainSlider.value);
console.log(level);
gain.gain.setTargetAtTime(level, audioContext.currentTime, 0.01);
gainDisplay.textContent = level;
});
// start button
document.getElementById("start").addEventListener("click", () => {
if (!osc) {
osc = audioContext.createOscillator();
console.log("new osc created!");
}
if (!gain) {
gain = audioContext.createGain();
}
osc.type = selectedWave;
osc.frequency.setValueAtTime(currentFreq, audioContext.currentTime);
gain.gain.setTargetAtTime(
parseFloat(gainSlider.value),
audioContext.currentTime,
0
);
osc.connect(gain);
gain.connect(audioContext.destination);
osc.start();
audioContext.resume();
});
// stop button
document.getElementById("stop").addEventListener("click", () => {
if (osc) {
osc.stop();
osc = null;
if (arpInterval) {
clearInterval(arpInterval);
arpInterval = null;
}
} else {
console.log("no osc to stop");
}
});
// arp - work in progress
function startArp() {
if (!arpInterval) {
baseNote = "C";
let currentOctave = -2;
if (osc) {
arpInterval = setInterval(() => {
if (currentOctave > 2) {
currentOctave = -2;
}
let noteFreq = noteToHz(baseNote);
let freqOctaveChoice = octavehz(noteFreq, currentOctave);
osc.frequency.setValueAtTime(
freqOctaveChoice,
audioContext.currentTime
);
currentOctave++;
}, 100);
} else {
console.log("no osc to run arp on");
}
}
}
document.getElementById("arp").addEventListener("click", startArp);
};

14
index.ts
View File

@ -1,14 +0,0 @@
window.onload = function () {
const audioContext: AudioContext = new AudioContext();
const osc: OscillatorNode = audioContext.createOscillator();
// this gets the node for the start butten and adds to it an even listener for click, when clicked the synth will play
document.getElementById("play")!.addEventListener("click", () => {
audioContext.resume();
});
osc.type = "square";
osc.frequency.setValueAtTime(220, audioContext.currentTime);
osc.connect(audioContext.destination);
osc.start();
};

180
src/basic.ts
View File

@ -1,180 +0,0 @@
let osc: OscillatorNode;
let gain: GainNode;
let selectedWave: string = "square";
let baseFreq: number = 440;
let currentFreq: number = 261.63;
function octavehz(hz: number, octave: string): number {
const val = parseFloat(octave);
return hz * 2 ** val;
}
function noteToHz(note: string): number {
switch (note) {
case "C":
return 261.63;
case "D":
return 269.66;
case "E":
return 329.63;
case "F":
return 349.23;
case "G":
return 392;
case "A":
return 440;
case "B":
return 493.88;
default:
return 0;
}
}
window.onload = function () {
const audioContext: AudioContext = new AudioContext();
function updateOscFrequency() {
let selectedNoteButton = document.querySelector(
"input[name='notechoice']:checked"
);
console.log("note choice changed to: " + selectedNoteButton.value);
let selectedOctaveButton = document.querySelector(
"input[name='octavechoice']:checked"
);
if (selectedNoteButton && selectedOctaveButton) {
let selectedNote = selectedNoteButton.value;
let selectedOctave = parseFloat(selectedOctaveButton.value);
let noteFreq = noteToHz(selectedNote);
let freqOctaveChoice = octavehz(noteFreq, selectedOctave);
if (osc) {
osc.frequency.setValueAtTime(
freqOctaveChoice,
audioContext.currentTime
);
}
}
}
function handleWaveformSelectionChange() {
let selectedRadioButton = document.querySelector(
"input[name='wavechoice']:checked"
);
if (selectedRadioButton) {
selectedWave = selectedRadioButton.value;
if (osc) {
osc.type = selectedWave;
}
console.log(selectedWave);
} else {
console.log("No radio button is selected.");
}
}
document.querySelectorAll("input[name='notechoice']").forEach((rb) => {
rb.addEventListener("change", updateOscFrequency);
});
document
.querySelectorAll("input[name='wavechoice']")
.forEach((radioButton) => {
radioButton.addEventListener("change", handleWaveformSelectionChange);
});
document.querySelectorAll("input[name='octavechoice']").forEach((rb) => {
rb.addEventListener("change", updateOscFrequency);
});
window.addEventListener("keydown", (event) => {
switch (event.key) {
case "1":
selectNote("C");
break;
case "2":
selectNote("D");
break;
case "3":
selectNote("E");
break;
case "4":
selectNote("F");
break;
case "5":
selectNote("G");
break;
case "6":
selectNote("A");
break;
case "7":
selectNote("B");
break;
default:
// If the key is not 1-7, do nothing
break;
}
});
function selectNote(note) {
const radioButton = document.querySelector(
`input[name='notechoice'][value='${note}']`
);
if (radioButton) {
radioButton.checked = true;
updateOscFrequency();
} else {
console.error(`Radio button for note ${note} not found`);
}
}
const gainSlider = document.getElementById("gain");
const gainDisplay = document.getElementById("gainDisplay");
gainSlider.addEventListener("input", () => {
const level = parseFloat(gainSlider.value);
console.log(level);
gain.gain.setTargetAtTime(level, audioContext.currentTime, 0.01);
gainDisplay.textContent = level;
});
document.getElementById("start").addEventListener("click", () => {
if (!osc) {
osc = audioContext.createOscillator();
console.log("new osc created!");
}
if (!gain) {
gain = audioContext.createGain();
}
console.log(selectedWave);
osc.type = selectedWave;
osc.frequency.setValueAtTime(currentFreq, audioContext.currentTime);
gain.gain.setTargetAtTime(
parseFloat(gainSlider.value),
audioContext.currentTime,
0
);
osc.connect(gain);
gain.connect(audioContext.destination);
osc.start();
audioContext.resume();
});
document.getElementById("stop").addEventListener("click", () => {
osc.stop();
osc = null;
});
document.getElementById("arp").addEventListener("click", () => {
const notes = ["C", "D", "E", "F", "G", "A", "B"];
for (let i = 0; i < notes.length; i++) {
for (let j = 0; j < 1000; j++) {
let x = 100;
}
console.log(notes[i]);
osc.frequency.setValueAtTime(
noteToHz(notes[i]),
audioContext.currentTime
);
}
});
};

27
synth.html
View File

@ -4,15 +4,16 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<title>simple-synth</title>
</head>
<body>
<body class="bg-gray-100 p-10 mb-5">
<script src="synth.js"></script>
<div>
<form style="padding: 5px">
<legend>Voice 1</legend>
<div class="bg-white p-2 rounded-lg mb-5">
<form>
<legend class="text-lg mb-2">Voice 1</legend>
<input type="radio" id="wave1_sinwave" name="wavechoice1" value="sine" checked>
<label for="wave1_sinwave">Sine</label>
<input type="radio" id="wave1_squarewave" name="wavechoice1" value="square">
@ -23,22 +24,22 @@
<label for="wave1_sawtoothwave">Sawtooth</label>
</form>
<div style="padding: 5px">
<div class="flex items-center space-x-2 my-3">
<fieldset>
<legend>Octave Selection</legend>
<button id="octavedown1">-</button>
<input type="text" id="octavedisplay1" value="0" readonly style="width: 2em; text-align: center;">
<button id="octaveup1">+</button>
<button id="octavedown1" class="bg-gray-400 hover:bg-gray-500 text-gray-800 font-bold py-1 px-4">-</button>
<input type="text" id="octavedisplay1" value="0" readonly class="text-center text-sm w-6 border py-2">
<button id="octaveup1" class="bg-gray-400 hover:bg-gray-500 text-gray-800 font-bold py-1 px-4">+</button>
</fieldset>
</div>
<div style="padding: 5px">
<label for="detunevoice1">detune voice</label>
<input id="detunevoice1" type="range" min="-5" max="5" value="0" step=".1"/>
<span id="detunevoice1display">0</span>
<label for="detunevoice1" class="block text-sm font-medium text-gray-700 mb-1">detune voice</label>
<input id="detunevoice1" type="range" min="-5" max="5" value="0" step=".1" class="slider bg-gray-300 h-2 rounded-full outline-none"/>
<span id="detunevoice1display" class="text-sm text-gray-700 ml-2">0</span>
</div>
<button id="activateVoice1" style="background-color: greenyellow;">On</button>
<button id="activateVoice1" class="bg-green-700 hover:bg-green-600 text-white font-bold text-sm py-1 px-2 rounded">On</button>
</div>
<div>

109
tsconfig.json
View File

@ -1,109 +0,0 @@
{
"compilerOptions": {
/* Visit https://aka.ms/tsconfig to read more about this file */
/* Projects */
// "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
// "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
/* Language and Environment */
"target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
// "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
// "jsx": "preserve", /* Specify what JSX code is generated. */
// "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */
// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
// "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
// "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
// "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
// "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
// "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
// "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
// "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */
/* Modules */
"module": "commonjs", /* Specify what module code is generated. */
// "rootDir": "./", /* Specify the root folder within your source files. */
// "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */
// "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
// "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
// "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
// "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */
// "types": [], /* Specify type package names to be included without being referenced in a source file. */
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
// "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */
// "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
// "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */
// "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */
// "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
// "resolveJsonModule": true, /* Enable importing .json files. */
// "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */
// "noResolve": true, /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
/* JavaScript Support */
// "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
// "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
// "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
/* Emit */
// "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
// "declarationMap": true, /* Create sourcemaps for d.ts files. */
// "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
"sourceMap": true, /* Create source map files for emitted JavaScript files. */
// "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */
// "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
"outDir": "./dist", /* Specify an output folder for all emitted files. */
// "removeComments": true, /* Disable emitting comments. */
// "noEmit": true, /* Disable emitting files from a compilation. */
// "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
// "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */
// "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
// "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
// "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */
// "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
// "newLine": "crlf", /* Set the newline character for emitting files. */
// "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
// "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */
// "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */
// "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */
// "declarationDir": "./", /* Specify the output directory for generated declaration files. */
// "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
/* Interop Constraints */
// "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
// "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
// "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
"esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
// "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
"forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
/* Type Checking */
"strict": true, /* Enable all strict type-checking options. */
// "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */
// "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */
// "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
// "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
// "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
// "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */
// "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */
// "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */
// "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */
// "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */
// "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
// "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
// "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */
// "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */
// "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
// "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */
// "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
// "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */
/* Completeness */
// "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
"skipLibCheck": true /* Skip type checking all .d.ts files. */
}
}