BuboBubo/rsgp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Working on processors a tiny bit

Browse Source
This commit is contained in:
Raphaël Forment
2025-10-13 18:09:47 +02:00
parent 65a1e16781
commit 6116745795
48 changed files with 1138 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

352
src/App.svelte
View File

@ -5,15 +5,35 @@
import WelcomeModal from "./lib/components/WelcomeModal.svelte";
import ProcessorPopup from "./lib/components/ProcessorPopup.svelte";
import { engines } from "./lib/audio/engines/registry";
import type { SynthEngine, PitchLock } from "./lib/audio/engines/base/SynthEngine";
import type {
SynthEngine,
PitchLock,
} from "./lib/audio/engines/base/SynthEngine";
import type { EngineType } from "./lib/audio/engines/base/SynthEngine";
import { AudioService } from "./lib/audio/services/AudioService";
import { downloadWAV } from "./lib/audio/utils/WAVEncoder";
import { loadVolume, saveVolume, loadDuration, saveDuration, loadPitchLockEnabled, savePitchLockEnabled, loadPitchLockFrequency, savePitchLockFrequency, loadExpandedCategories, saveExpandedCategories } from "./lib/utils/settings";
import { cropAudio, cutAudio, processSelection } from "./lib/audio/utils/AudioEdit";
import {
loadVolume,
saveVolume,
loadDuration,
saveDuration,
loadPitchLockEnabled,
savePitchLockEnabled,
loadPitchLockFrequency,
savePitchLockFrequency,
loadExpandedCategories,
saveExpandedCategories,
loadEnabledProcessorCategories,
saveEnabledProcessorCategories,
} from "./lib/utils/settings";
import {
cropAudio,
cutAudio,
processSelection,
} from "./lib/audio/utils/AudioEdit";
import { generateRandomColor } from "./lib/utils/colors";
import { getRandomProcessor } from "./lib/audio/processors/registry";
import type { AudioProcessor } from "./lib/audio/processors/AudioProcessor";
import type { AudioProcessor, ProcessorCategory } from "./lib/audio/processors/AudioProcessor";
import { Sample } from "./lib/audio/engines/Sample";
import { Input } from "./lib/audio/engines/Input";
import { createKeyboardHandler } from "./lib/utils/keyboard";
@ -48,15 +68,25 @@
let canUndo = $state(false);
let sidebarOpen = $state(false);
let expandedCategories = $state<Set<string>>(loadExpandedCategories());
let enabledProcessorCategories = $state<Set<ProcessorCategory>>(
loadEnabledProcessorCategories() as Set<ProcessorCategory>
);
const showDuration = $derived(engineType !== 'sample');
const showRandomButton = $derived(engineType === 'generative');
const showRecordButton = $derived(engineType === 'input');
const showFileDropZone = $derived(engineType === 'sample' && !currentBuffer);
const showMutateButton = $derived(engineType === 'generative' && !isProcessed && currentBuffer);
const showPitchLock = $derived(engineType === 'generative');
const pitchLock = $derived<PitchLock>({ enabled: pitchLockEnabled, frequency: pitchLockFrequency });
const hasSelection = $derived(selectionStart !== null && selectionEnd !== null && currentBuffer !== null);
const showDuration = $derived(engineType !== "sample");
const showRandomButton = $derived(engineType === "generative");
const showRecordButton = $derived(engineType === "input");
const showFileDropZone = $derived(engineType === "sample" && !currentBuffer);
const showMutateButton = $derived(
engineType === "generative" && !isProcessed && currentBuffer,
);
const showPitchLock = $derived(engineType === "generative");
const pitchLock = $derived<PitchLock>({
enabled: pitchLockEnabled,
frequency: pitchLockFrequency,
});
const hasSelection = $derived(
selectionStart !== null && selectionEnd !== null && currentBuffer !== null,
);
const showEditButtons = $derived(hasSelection);
$effect(() => {
@ -80,6 +110,10 @@
saveExpandedCategories(expandedCategories);
});
$effect(() => {
saveEnabledProcessorCategories(enabledProcessorCategories as Set<string>);
});
// Group engines by category
const enginesByCategory = $derived.by(() => {
const grouped = new Map<EngineCategory, typeof engines>();
@ -103,6 +137,16 @@
expandedCategories = newSet;
}
function toggleProcessorCategory(category: ProcessorCategory) {
const newSet = new Set(enabledProcessorCategories);
if (newSet.has(category)) {
newSet.delete(category);
} else {
newSet.add(category);
}
enabledProcessorCategories = newSet;
}
onMount(() => {
audioService.setPlaybackUpdateCallback((position) => {
playbackPosition = position;
@ -116,7 +160,7 @@
currentParams,
isProcessed,
waveformColor,
currentEngineIndex
currentEngineIndex,
);
}
@ -129,7 +173,10 @@
}
function restoreState(state: AudioState): void {
currentBuffer = audioService.createAudioBuffer([state.leftChannel, state.rightChannel]);
currentBuffer = audioService.createAudioBuffer([
state.leftChannel,
state.rightChannel,
]);
currentParams = state.params;
isProcessed = state.isProcessed;
waveformColor = state.waveformColor;
@ -219,7 +266,12 @@
if (!currentParams) return;
const sampleRate = audioService.getSampleRate();
const data = await engine.generate(currentParams, sampleRate, duration, pitchLock);
const data = await engine.generate(
currentParams,
sampleRate,
duration,
pitchLock,
);
currentBuffer = audioService.createAudioBuffer(data);
audioService.play(currentBuffer);
}
@ -264,15 +316,21 @@
start,
end,
processor,
sampleRate
sampleRate,
);
} else {
const leftChannel = currentBuffer.getChannelData(0);
const rightChannel = currentBuffer.getChannelData(1);
[processedLeft, processedRight] = await processor.process(leftChannel, rightChannel);
[processedLeft, processedRight] = await processor.process(
leftChannel,
rightChannel,
);
}
currentBuffer = audioService.createAudioBuffer([processedLeft, processedRight]);
currentBuffer = audioService.createAudioBuffer([
processedLeft,
processedRight,
]);
isProcessed = true;
audioService.play(currentBuffer);
hideProcessorPopup();
@ -288,7 +346,7 @@
clearSelection();
sidebarOpen = false;
if (engineType === 'generative') {
if (engineType === "generative") {
generateRandom();
}
}
@ -311,7 +369,7 @@
isProcessed = false;
regenerateBuffer();
} catch (error) {
console.error('Failed to load audio file:', error);
console.error("Failed to load audio file:", error);
alert(`Failed to load audio file: ${error}`);
}
}
@ -329,7 +387,7 @@
isProcessed = false;
regenerateBuffer();
} catch (error) {
console.error('Failed to record audio:', error);
console.error("Failed to record audio:", error);
alert(`Failed to record audio: ${error}`);
} finally {
isRecording = false;
@ -344,8 +402,8 @@
if (!files?.length) return;
const file = files[0];
if (!file.type.startsWith('audio/')) {
alert('Please drop an audio file');
if (!file.type.startsWith("audio/")) {
alert("Please drop an audio file");
return;
}
@ -365,12 +423,17 @@
function showPopup() {
if (popupTimeout) clearTimeout(popupTimeout);
showProcessorPopup = true;
popupTimeout = setTimeout(() => showProcessorPopup = false, 2000);
popupTimeout = setTimeout(() => (showProcessorPopup = false), 2000);
}
function keepPopupOpen() {
if (popupTimeout) clearTimeout(popupTimeout);
showProcessorPopup = true;
}
function scheduleHidePopup() {
if (popupTimeout) clearTimeout(popupTimeout);
popupTimeout = setTimeout(() => showProcessorPopup = false, 200);
popupTimeout = setTimeout(() => (showProcessorPopup = false), 200);
}
function hideProcessorPopup() {
@ -389,7 +452,8 @@
}
function cropSelection() {
if (!currentBuffer || selectionStart === null || selectionEnd === null) return;
if (!currentBuffer || selectionStart === null || selectionEnd === null)
return;
pushState();
@ -397,7 +461,12 @@
const end = Math.max(selectionStart, selectionEnd);
const sampleRate = audioService.getSampleRate();
const [newLeft, newRight] = cropAudio(currentBuffer, start, end, sampleRate);
const [newLeft, newRight] = cropAudio(
currentBuffer,
start,
end,
sampleRate,
);
currentBuffer = audioService.createAudioBuffer([newLeft, newRight]);
clearSelection();
@ -405,7 +474,8 @@
}
function cutSelection() {
if (!currentBuffer || selectionStart === null || selectionEnd === null) return;
if (!currentBuffer || selectionStart === null || selectionEnd === null)
return;
pushState();
@ -434,31 +504,54 @@
<div class="container">
{#if sidebarOpen}
<div class="sidebar-overlay" onclick={toggleSidebar} onkeydown={(e) => e.key === 'Escape' && toggleSidebar()} role="button" tabindex="-1" aria-label="Close sidebar"></div>
<div
class="sidebar-overlay"
onclick={toggleSidebar}
onkeydown={(e) => e.key === "Escape" && toggleSidebar()}
role="button"
tabindex="-1"
aria-label="Close sidebar"
></div>
{/if}
<div class="top-bar">
<button class="hamburger" onclick={toggleSidebar} aria-label="Toggle engine menu">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="3" y1="6" x2="21" y2="6"/>
<line x1="3" y1="12" x2="21" y2="12"/>
<line x1="3" y1="18" x2="21" y2="18"/>
</svg>
</button>
<h1 class="app-title">Poof: a sample generator</h1>
<div class="controls-group">
<button
class="hamburger"
onclick={toggleSidebar}
aria-label="Toggle engine menu"
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<line x1="3" y1="6" x2="21" y2="6" />
<line x1="3" y1="12" x2="21" y2="12" />
<line x1="3" y1="18" x2="21" y2="18" />
</svg>
</button>
<h1 class="app-title">Poof: a sample generator and processor</h1>
<div class="controls-group">
{#if showPitchLock}
<div class="control-item pitch-lock-control">
<div class="control-header">
<label for="pitch">Pitch</label>
<label class="custom-checkbox" title="Lock pitch across random/mutate">
<input
type="checkbox"
bind:checked={pitchLockEnabled}
/>
<label
class="custom-checkbox"
title="Lock pitch across random/mutate"
>
<input type="checkbox" bind:checked={pitchLockEnabled} />
<span class="checkbox-box" class:checked={pitchLockEnabled}>
{#if pitchLockEnabled}
<svg width="10" height="10" viewBox="0 0 10 10" fill="none">
<path d="M1 5L4 8L9 2" stroke="currentColor" stroke-width="2" stroke-linecap="square"/>
<path
d="M1 5L4 8L9 2"
stroke="currentColor"
stroke-width="2"
stroke-linecap="square"
/>
</svg>
{/if}
</span>
@ -521,8 +614,19 @@
class:collapsed={!expandedCategories.has(category)}
onclick={() => toggleCategory(category)}
>
<svg class="category-arrow" width="12" height="12" viewBox="0 0 12 12" fill="none">
<path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"/>
<svg
class="category-arrow"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
>
<path
d="M3 4.5L6 7.5L9 4.5"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="square"
/>
</svg>
<span>{category}</span>
</button>
@ -545,80 +649,86 @@
</div>
<div class="main-area">
<div class="waveform-container">
{#if showFileDropZone}
<div
class="file-drop-zone"
class:drag-over={isDragOver}
role="button"
tabindex="0"
ondrop={handleDrop}
ondragover={handleDragOver}
ondragleave={handleDragLeave}
>
<div class="drop-zone-content">
<h2>Drop an audio file here</h2>
<label for="file-input" class="file-input-label">
<input
id="file-input"
type="file"
accept="audio/*"
onchange={handleFileInput}
style="display: none;"
/>
Choose a file
</label>
</div>
</div>
{:else}
<WaveformDisplay
buffer={currentBuffer}
color={waveformColor}
{playbackPosition}
{selectionStart}
{selectionEnd}
onselectionchange={handleSelectionChange}
onclick={playFromPosition}
/>
{/if}
<div class="bottom-controls">
{#if showRandomButton}
<button onclick={generateRandom}>Random (R)</button>
{/if}
{#if showRecordButton}
<button onclick={recordAudio} disabled={isRecording}>
{isRecording ? 'Recording...' : 'Record'}
</button>
{/if}
{#if showMutateButton}
<button onclick={mutate}>Mutate (M)</button>
{/if}
{#if showEditButtons}
<button onclick={cropSelection}>Crop</button>
<button onclick={cutSelection}>Cut</button>
{/if}
{#if currentBuffer}
<div class="waveform-container">
{#if showFileDropZone}
<div
class="process-button-container"
role="group"
onmouseenter={showPopup}
onmouseleave={scheduleHidePopup}
class="file-drop-zone"
class:drag-over={isDragOver}
role="button"
tabindex="0"
ondrop={handleDrop}
ondragover={handleDragOver}
ondragleave={handleDragLeave}
>
<button onclick={processSound}>Process (P)</button>
{#if showProcessorPopup}
<ProcessorPopup onselect={applyProcessor} />
{/if}
<div class="drop-zone-content">
<h2>Drop an audio file here</h2>
<label for="file-input" class="file-input-label">
<input
id="file-input"
type="file"
accept="audio/*"
onchange={handleFileInput}
style="display: none;"
/>
Choose a file
</label>
</div>
</div>
<button onclick={download}>Download (D)</button>
<button onclick={undo} disabled={!canUndo}>Undo (Z)</button>
{:else}
<WaveformDisplay
buffer={currentBuffer}
color={waveformColor}
{playbackPosition}
{selectionStart}
{selectionEnd}
onselectionchange={handleSelectionChange}
onclick={playFromPosition}
/>
{/if}
<div class="bottom-controls">
{#if showRandomButton}
<button onclick={generateRandom}>Random (R)</button>
{/if}
{#if showRecordButton}
<button onclick={recordAudio} disabled={isRecording}>
{isRecording ? "Recording..." : "Record"}
</button>
{/if}
{#if showMutateButton}
<button onclick={mutate}>Mutate (M)</button>
{/if}
{#if showEditButtons}
<button onclick={cropSelection}>Crop</button>
<button onclick={cutSelection}>Cut</button>
{/if}
{#if currentBuffer}
<div
class="process-button-container"
role="group"
onmouseenter={showPopup}
onmouseleave={scheduleHidePopup}
>
<button onclick={processSound}>Process (P)</button>
{#if showProcessorPopup}
<div onmouseenter={keepPopupOpen} onmouseleave={scheduleHidePopup}>
<ProcessorPopup
onselect={applyProcessor}
enabledCategories={enabledProcessorCategories}
ontogglecategory={toggleProcessorCategory}
/>
</div>
{/if}
</div>
<button onclick={download}>Download (D)</button>
<button onclick={undo} disabled={!canUndo}>Undo (Z)</button>
{/if}
</div>
</div>
<div class="vu-meter-container">
<VUMeter buffer={currentBuffer} {playbackPosition} />
</div>
</div>
<div class="vu-meter-container">
<VUMeter buffer={currentBuffer} {playbackPosition} />
</div>
</div>
</div>
{#if showModal}
@ -692,7 +802,9 @@
border: 1px solid #3a3a3a;
color: #fff;
cursor: pointer;
transition: border-color 0.2s, background-color 0.2s;
transition:
border-color 0.2s,
background-color 0.2s;
}
.hamburger svg {
@ -759,7 +871,9 @@
color: #999;
text-align: left;
cursor: pointer;
transition: color 0.2s, background-color 0.2s;
transition:
color 0.2s,
background-color 0.2s;
flex-shrink: 0;
}
@ -950,7 +1064,10 @@
color: #fff;
font-size: 0.7rem;
font-weight: 600;
transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
transition:
border-color 0.2s,
background-color 0.2s,
box-shadow 0.2s;
font-variant-numeric: tabular-nums;
box-sizing: border-box;
}
@ -981,7 +1098,6 @@
font-weight: 400;
}
@media (min-width: 768px) {
.sidebar {
position: static;

3
src/lib/audio/processors/AudioProcessor.ts
View File

@ -1,6 +1,9 @@
export type ProcessorCategory = 'Amplitude' | 'Filter' | 'Time' | 'Space' | 'Pitch' | 'Modulation' | 'Distortion' | 'Spectral' | 'Utility';
export interface AudioProcessor {
getName(): string;
getDescription(): string;
getCategory(): ProcessorCategory;
process(
leftChannel: Float32Array,
rightChannel: Float32Array

6
src/lib/audio/processors/BitCrusher.ts
View File

@ -1,4 +1,4 @@
import type { AudioProcessor } from "./AudioProcessor";
import type { AudioProcessor, ProcessorCategory } from "./AudioProcessor";
export class BitCrusher implements AudioProcessor {
getName(): string {
@ -9,6 +9,10 @@ export class BitCrusher implements AudioProcessor {
return "Reduces bit depth for lo-fi digital distortion";
}
getCategory(): ProcessorCategory {
return 'Distortion';
}
async process(
leftChannel: Float32Array,
rightChannel: Float32Array

6
src/lib/audio/processors/Chorus.ts
View File

@ -1,4 +1,4 @@
import type { AudioProcessor } from './AudioProcessor';
import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
export class Chorus implements AudioProcessor {
private readonly sampleRate = 44100;
@ -11,6 +11,10 @@ export class Chorus implements AudioProcessor {
return 'Multiple delayed copies with pitch modulation for thick, ensemble sounds';
}
getCategory(): ProcessorCategory {
return 'Time';
}
process(
leftChannel: Float32Array,
rightChannel: Float32Array

6
src/lib/audio/processors/Compressor.ts
View File

@ -1,4 +1,4 @@
import type { AudioProcessor } from "./AudioProcessor";
import type { AudioProcessor, ProcessorCategory } from "./AudioProcessor";
export class Compressor implements AudioProcessor {
getName(): string {
@ -9,6 +9,10 @@ export class Compressor implements AudioProcessor {
return "Reduces dynamic range by taming peaks with makeup gain";
}
getCategory(): ProcessorCategory {
return 'Amplitude';
}
async process(
leftChannel: Float32Array,
rightChannel: Float32Array

6
src/lib/audio/processors/ConvolutionReverb.ts
View File

@ -1,4 +1,4 @@
import type { AudioProcessor } from './AudioProcessor';
import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
type RoomType = 'small' | 'medium' | 'large' | 'hall' | 'plate' | 'chamber';
@ -22,6 +22,10 @@ export class ConvolutionReverb implements AudioProcessor {
return 'Realistic room ambience using Web Audio ConvolverNode with synthetic impulse responses';
}
getCategory(): ProcessorCategory {
return 'Space';
}
async process(
leftChannel: Float32Array,
rightChannel: Float32Array

6
src/lib/audio/processors/DCOffsetRemover.ts
View File

@ -1,4 +1,4 @@
import type { AudioProcessor } from "./AudioProcessor";
import type { AudioProcessor, ProcessorCategory } from "./AudioProcessor";
export class DCOffsetRemover implements AudioProcessor {
getName(): string {
@ -9,6 +9,10 @@ export class DCOffsetRemover implements AudioProcessor {
return "Removes DC offset bias from the audio signal";
}
getCategory(): ProcessorCategory {
return 'Utility';
}
async process(
leftChannel: Float32Array,
rightChannel: Float32Array

6
src/lib/audio/processors/ExpFadeIn.ts
View File

@ -1,4 +1,4 @@
import type { AudioProcessor } from './AudioProcessor';
import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
export class ExpFadeIn implements AudioProcessor {
getName(): string {
@ -9,6 +9,10 @@ export class ExpFadeIn implements AudioProcessor {
return 'Applies an exponential fade from silence to current level';
}
getCategory(): ProcessorCategory {
return 'Amplitude';
}
process(leftIn: Float32Array, rightIn: Float32Array): [Float32Array, Float32Array] {
const length = leftIn.length;

6
src/lib/audio/processors/ExpFadeOut.ts
View File

@ -1,4 +1,4 @@
import type { AudioProcessor } from './AudioProcessor';
import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
export class ExpFadeOut implements AudioProcessor {
getName(): string {
@ -9,6 +9,10 @@ export class ExpFadeOut implements AudioProcessor {
return 'Applies an exponential fade from current level to silence';
}
getCategory(): ProcessorCategory {
return 'Amplitude';
}
process(leftIn: Float32Array, rightIn: Float32Array): [Float32Array, Float32Array] {
const length = leftIn.length;

6
src/lib/audio/processors/HaasEffect.ts
View File

@ -1,4 +1,4 @@
import type { AudioProcessor } from "./AudioProcessor";
import type { AudioProcessor, ProcessorCategory } from "./AudioProcessor";
export class HaasEffect implements AudioProcessor {
getName(): string {
@ -9,6 +9,10 @@ export class HaasEffect implements AudioProcessor {
return "Creates stereo width with micro-delay (precedence effect)";
}
getCategory(): ProcessorCategory {
return 'Space';
}
async process(
leftChannel: Float32Array,
rightChannel: Float32Array

65
src/lib/audio/processors/HighPassSweepDown.ts Normal file
View File

@ -0,0 +1,65 @@
import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
export class HighPassSweepDown implements AudioProcessor {
getName(): string {
return 'HP Sweep Down';
}
getDescription(): string {
return 'Sweeps a high-pass filter from thin to full';
}
getCategory(): ProcessorCategory {
return 'Filter';
}
process(leftIn: Float32Array, rightIn: Float32Array): [Float32Array, Float32Array] {
const length = leftIn.length;
const leftOut = new Float32Array(length);
const rightOut = new Float32Array(length);
const sampleRate = 44100;
const startFreq = 8000;
const endFreq = 20;
const Q = 1.5;
let lx1 = 0, lx2 = 0, ly1 = 0, ly2 = 0;
let rx1 = 0, rx2 = 0, ry1 = 0, ry2 = 0;
let b0 = 0, b1 = 0, b2 = 0, a1 = 0, a2 = 0;
for (let i = 0; i < length; i++) {
if (i % 64 === 0) {
const t = i / length;
const freq = startFreq * Math.pow(endFreq / startFreq, t);
const omega = 2.0 * Math.PI * freq / sampleRate;
const alpha = Math.sin(omega) / (2.0 * Q);
const a0 = 1.0 + alpha;
b0 = ((1.0 + Math.cos(omega)) / 2.0) / a0;
b1 = (-(1.0 + Math.cos(omega))) / a0;
b2 = b0;
a1 = (-2.0 * Math.cos(omega)) / a0;
a2 = (1.0 - alpha) / a0;
}
const lx0 = leftIn[i];
const rx0 = rightIn[i];
leftOut[i] = b0 * lx0 + b1 * lx1 + b2 * lx2 - a1 * ly1 - a2 * ly2;
rightOut[i] = b0 * rx0 + b1 * rx1 + b2 * rx2 - a1 * ry1 - a2 * ry2;
lx2 = lx1;
lx1 = lx0;
ly2 = ly1;
ly1 = leftOut[i];
rx2 = rx1;
rx1 = rx0;
ry2 = ry1;
ry1 = rightOut[i];
}
return [leftOut, rightOut];
}
}

65
src/lib/audio/processors/HighPassSweepUp.ts Normal file
View File

@ -0,0 +1,65 @@
import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
export class HighPassSweepUp implements AudioProcessor {
getName(): string {
return 'HP Sweep Up';
}
getDescription(): string {
return 'Sweeps a high-pass filter from full to thin';
}
getCategory(): ProcessorCategory {
return 'Filter';
}
process(leftIn: Float32Array, rightIn: Float32Array): [Float32Array, Float32Array] {
const length = leftIn.length;
const leftOut = new Float32Array(length);
const rightOut = new Float32Array(length);
const sampleRate = 44100;
const startFreq = 20;
const endFreq = 8000;
const Q = 1.5;
let lx1 = 0, lx2 = 0, ly1 = 0, ly2 = 0;
let rx1 = 0, rx2 = 0, ry1 = 0, ry2 = 0;
let b0 = 0, b1 = 0, b2 = 0, a1 = 0, a2 = 0;
for (let i = 0; i < length; i++) {
if (i % 64 === 0) {
const t = i / length;
const freq = startFreq * Math.pow(endFreq / startFreq, t);
const omega = 2.0 * Math.PI * freq / sampleRate;
const alpha = Math.sin(omega) / (2.0 * Q);
const a0 = 1.0 + alpha;
b0 = ((1.0 + Math.cos(omega)) / 2.0) / a0;
b1 = (-(1.0 + Math.cos(omega))) / a0;
b2 = b0;
a1 = (-2.0 * Math.cos(omega)) / a0;
a2 = (1.0 - alpha) / a0;
}
const lx0 = leftIn[i];
const rx0 = rightIn[i];
leftOut[i] = b0 * lx0 + b1 * lx1 + b2 * lx2 - a1 * ly1 - a2 * ly2;
rightOut[i] = b0 * rx0 + b1 * rx1 + b2 * rx2 - a1 * ry1 - a2 * ry2;
lx2 = lx1;
lx1 = lx0;
ly2 = ly1;
ly1 = leftOut[i];
rx2 = rx1;
rx1 = rx0;
ry2 = ry1;
ry1 = rightOut[i];
}
return [leftOut, rightOut];
}
}

6
src/lib/audio/processors/LinearFadeIn.ts
View File

@ -1,4 +1,4 @@
import type { AudioProcessor } from './AudioProcessor';
import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
export class LinearFadeIn implements AudioProcessor {
getName(): string {
@ -9,6 +9,10 @@ export class LinearFadeIn implements AudioProcessor {
return 'Applies a linear fade from silence to current level';
}
getCategory(): ProcessorCategory {
return 'Amplitude';
}
process(leftIn: Float32Array, rightIn: Float32Array): [Float32Array, Float32Array] {
const length = leftIn.length;

6
src/lib/audio/processors/LinearFadeOut.ts
View File

@ -1,4 +1,4 @@
import type { AudioProcessor } from './AudioProcessor';
import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
export class LinearFadeOut implements AudioProcessor {
getName(): string {
@ -9,6 +9,10 @@ export class LinearFadeOut implements AudioProcessor {
return 'Applies a linear fade from current level to silence';
}
getCategory(): ProcessorCategory {
return 'Amplitude';
}
process(leftIn: Float32Array, rightIn: Float32Array): [Float32Array, Float32Array] {
const length = leftIn.length;

65
src/lib/audio/processors/LowPassSweepDown.ts Normal file
View File

@ -0,0 +1,65 @@
import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
export class LowPassSweepDown implements AudioProcessor {
getName(): string {
return 'LP Sweep Down';
}
getDescription(): string {
return 'Sweeps a low-pass filter from bright to dark';
}
getCategory(): ProcessorCategory {
return 'Filter';
}
process(leftIn: Float32Array, rightIn: Float32Array): [Float32Array, Float32Array] {
const length = leftIn.length;
const leftOut = new Float32Array(length);
const rightOut = new Float32Array(length);
const sampleRate = 44100;
const startFreq = 18000;
const endFreq = 100;
const Q = 1.5;
let lx1 = 0, lx2 = 0, ly1 = 0, ly2 = 0;
let rx1 = 0, rx2 = 0, ry1 = 0, ry2 = 0;
let b0 = 0, b1 = 0, b2 = 0, a1 = 0, a2 = 0;
for (let i = 0; i < length; i++) {
if (i % 64 === 0) {
const t = i / length;
const freq = startFreq * Math.pow(endFreq / startFreq, t);
const omega = 2.0 * Math.PI * freq / sampleRate;
const alpha = Math.sin(omega) / (2.0 * Q);
const a0 = 1.0 + alpha;
b0 = ((1.0 - Math.cos(omega)) / 2.0) / a0;
b1 = (1.0 - Math.cos(omega)) / a0;
b2 = b0;
a1 = (-2.0 * Math.cos(omega)) / a0;
a2 = (1.0 - alpha) / a0;
}
const lx0 = leftIn[i];
const rx0 = rightIn[i];
leftOut[i] = b0 * lx0 + b1 * lx1 + b2 * lx2 - a1 * ly1 - a2 * ly2;
rightOut[i] = b0 * rx0 + b1 * rx1 + b2 * rx2 - a1 * ry1 - a2 * ry2;
lx2 = lx1;
lx1 = lx0;
ly2 = ly1;
ly1 = leftOut[i];
rx2 = rx1;
rx1 = rx0;
ry2 = ry1;
ry1 = rightOut[i];
}
return [leftOut, rightOut];
}
}

65
src/lib/audio/processors/LowPassSweepUp.ts Normal file
View File

@ -0,0 +1,65 @@
import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
export class LowPassSweepUp implements AudioProcessor {
getName(): string {
return 'LP Sweep Up';
}
getDescription(): string {
return 'Sweeps a low-pass filter from dark to bright';
}
getCategory(): ProcessorCategory {
return 'Filter';
}
process(leftIn: Float32Array, rightIn: Float32Array): [Float32Array, Float32Array] {
const length = leftIn.length;
const leftOut = new Float32Array(length);
const rightOut = new Float32Array(length);
const sampleRate = 44100;
const startFreq = 100;
const endFreq = 18000;
const Q = 1.5;
let lx1 = 0, lx2 = 0, ly1 = 0, ly2 = 0;
let rx1 = 0, rx2 = 0, ry1 = 0, ry2 = 0;
let b0 = 0, b1 = 0, b2 = 0, a1 = 0, a2 = 0;
for (let i = 0; i < length; i++) {
if (i % 64 === 0) {
const t = i / length;
const freq = startFreq * Math.pow(endFreq / startFreq, t);
const omega = 2.0 * Math.PI * freq / sampleRate;
const alpha = Math.sin(omega) / (2.0 * Q);
const a0 = 1.0 + alpha;
b0 = ((1.0 - Math.cos(omega)) / 2.0) / a0;
b1 = (1.0 - Math.cos(omega)) / a0;
b2 = b0;
a1 = (-2.0 * Math.cos(omega)) / a0;
a2 = (1.0 - alpha) / a0;
}
const lx0 = leftIn[i];
const rx0 = rightIn[i];
leftOut[i] = b0 * lx0 + b1 * lx1 + b2 * lx2 - a1 * ly1 - a2 * ly2;
rightOut[i] = b0 * rx0 + b1 * rx1 + b2 * rx2 - a1 * ry1 - a2 * ry2;
lx2 = lx1;
lx1 = lx0;
ly2 = ly1;
ly1 = leftOut[i];
rx2 = rx1;
rx1 = rx0;
ry2 = ry1;
ry1 = rightOut[i];
}
return [leftOut, rightOut];
}
}

6
src/lib/audio/processors/MicroPitch.ts
View File

@ -1,4 +1,4 @@
import type { AudioProcessor } from './AudioProcessor';
import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
export class MicroPitch implements AudioProcessor {
getName(): string {
@ -9,6 +9,10 @@ export class MicroPitch implements AudioProcessor {
return 'Applies subtle random pitch variations for analog warmth and character';
}
getCategory(): ProcessorCategory {
return 'Pitch';
}
process(
leftChannel: Float32Array,
rightChannel: Float32Array

6
src/lib/audio/processors/Normalize.ts
View File

@ -1,4 +1,4 @@
import type { AudioProcessor } from "./AudioProcessor";
import type { AudioProcessor, ProcessorCategory } from "./AudioProcessor";
export class Normalize implements AudioProcessor {
getName(): string {
@ -9,6 +9,10 @@ export class Normalize implements AudioProcessor {
return "Normalizes audio to maximum amplitude without clipping";
}
getCategory(): ProcessorCategory {
return 'Amplitude';
}
async process(
leftChannel: Float32Array,
rightChannel: Float32Array

6
src/lib/audio/processors/OctaveDown.ts
View File

@ -1,4 +1,4 @@
import type { AudioProcessor } from "./AudioProcessor";
import type { AudioProcessor, ProcessorCategory } from "./AudioProcessor";
export class OctaveDown implements AudioProcessor {
getName(): string {
@ -9,6 +9,10 @@ export class OctaveDown implements AudioProcessor {
return "Shifts pitch down one octave by halving playback rate";
}
getCategory(): ProcessorCategory {
return 'Pitch';
}
async process(
leftChannel: Float32Array,
rightChannel: Float32Array

6
src/lib/audio/processors/OctaveUp.ts
View File

@ -1,4 +1,4 @@
import type { AudioProcessor } from "./AudioProcessor";
import type { AudioProcessor, ProcessorCategory } from "./AudioProcessor";
export class OctaveUp implements AudioProcessor {
getName(): string {
@ -9,6 +9,10 @@ export class OctaveUp implements AudioProcessor {
return "Shifts pitch up one octave by doubling playback rate";
}
getCategory(): ProcessorCategory {
return 'Pitch';
}
async process(
leftChannel: Float32Array,
rightChannel: Float32Array

34
src/lib/audio/processors/PanLeftToRight.ts Normal file
View File

@ -0,0 +1,34 @@
import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
export class PanLeftToRight implements AudioProcessor {
getName(): string {
return 'Pan L→R';
}
getDescription(): string {
return 'Gradually pans the sound from left to right';
}
getCategory(): ProcessorCategory {
return 'Space';
}
process(leftIn: Float32Array, rightIn: Float32Array): [Float32Array, Float32Array] {
const length = leftIn.length;
const leftOut = new Float32Array(length);
const rightOut = new Float32Array(length);
for (let i = 0; i < length; i++) {
const t = i / length;
const panAngle = t * Math.PI * 0.5;
const leftGain = Math.cos(panAngle);
const rightGain = Math.sin(panAngle);
const mono = (leftIn[i] + rightIn[i]) * 0.5;
leftOut[i] = mono * leftGain;
rightOut[i] = mono * rightGain;
}
return [leftOut, rightOut];
}
}

34
src/lib/audio/processors/PanRightToLeft.ts Normal file
View File

@ -0,0 +1,34 @@
import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
export class PanRightToLeft implements AudioProcessor {
getName(): string {
return 'Pan R→L';
}
getDescription(): string {
return 'Gradually pans the sound from right to left';
}
getCategory(): ProcessorCategory {
return 'Space';
}
process(leftIn: Float32Array, rightIn: Float32Array): [Float32Array, Float32Array] {
const length = leftIn.length;
const leftOut = new Float32Array(length);
const rightOut = new Float32Array(length);
for (let i = 0; i < length; i++) {
const t = i / length;
const panAngle = (1.0 - t) * Math.PI * 0.5;
const leftGain = Math.cos(panAngle);
const rightGain = Math.sin(panAngle);
const mono = (leftIn[i] + rightIn[i]) * 0.5;
leftOut[i] = mono * leftGain;
rightOut[i] = mono * rightGain;
}
return [leftOut, rightOut];
}
}

6
src/lib/audio/processors/PanShuffler.ts
View File

@ -1,4 +1,4 @@
import type { AudioProcessor } from './AudioProcessor';
import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
export class PanShuffler implements AudioProcessor {
getName(): string {
@ -9,6 +9,10 @@ export class PanShuffler implements AudioProcessor {
return 'Smoothly pans segments across the stereo field';
}
getCategory(): ProcessorCategory {
return 'Space';
}
process(
leftChannel: Float32Array,
rightChannel: Float32Array

6
src/lib/audio/processors/PhaseInverter.ts
View File

@ -1,4 +1,4 @@
import type { AudioProcessor } from "./AudioProcessor";
import type { AudioProcessor, ProcessorCategory } from "./AudioProcessor";
export class PhaseInverter implements AudioProcessor {
getName(): string {
@ -9,6 +9,10 @@ export class PhaseInverter implements AudioProcessor {
return "Inverts polarity of one or both channels";
}
getCategory(): ProcessorCategory {
return 'Utility';
}
async process(
leftChannel: Float32Array,
rightChannel: Float32Array

6
src/lib/audio/processors/Phaser.ts
View File

@ -1,4 +1,4 @@
import type { AudioProcessor } from './AudioProcessor';
import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
export class Phaser implements AudioProcessor {
private readonly sampleRate = 44100;
@ -11,6 +11,10 @@ export class Phaser implements AudioProcessor {
return 'Classic phaser effect with sweeping all-pass filters for swirling, spacey sounds';
}
getCategory(): ProcessorCategory {
return 'Filter';
}
process(
leftChannel: Float32Array,
rightChannel: Float32Array

6
src/lib/audio/processors/PitchShifter.ts
View File

@ -1,4 +1,4 @@
import type { AudioProcessor } from './AudioProcessor';
import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
export class PitchShifter implements AudioProcessor {
getName(): string {
@ -9,6 +9,10 @@ export class PitchShifter implements AudioProcessor {
return 'Transposes audio up or down in semitones without changing duration';
}
getCategory(): ProcessorCategory {
return 'Pitch';
}
process(
leftChannel: Float32Array,
rightChannel: Float32Array

6
src/lib/audio/processors/PitchWobble.ts
View File

@ -1,4 +1,4 @@
import type { AudioProcessor } from './AudioProcessor';
import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
export class PitchWobble implements AudioProcessor {
getName(): string {
@ -9,6 +9,10 @@ export class PitchWobble implements AudioProcessor {
return 'Variable-rate playback with LFO modulation for tape wow/vibrato effects';
}
getCategory(): ProcessorCategory {
return 'Pitch';
}
process(
leftChannel: Float32Array,
rightChannel: Float32Array

6
src/lib/audio/processors/Resonator.ts
View File

@ -1,4 +1,4 @@
import type { AudioProcessor } from './AudioProcessor';
import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
export class Resonator implements AudioProcessor {
private readonly sampleRate = 44100;
@ -11,6 +11,10 @@ export class Resonator implements AudioProcessor {
return 'Multi-band resonant filter bank that adds tonal character through resonance';
}
getCategory(): ProcessorCategory {
return 'Filter';
}
process(
leftChannel: Float32Array,
rightChannel: Float32Array

6
src/lib/audio/processors/Reverser.ts
View File

@ -1,4 +1,4 @@
import type { AudioProcessor } from './AudioProcessor';
import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
export class Reverser implements AudioProcessor {
getName(): string {
@ -9,6 +9,10 @@ export class Reverser implements AudioProcessor {
return 'Plays the sound backwards';
}
getCategory(): ProcessorCategory {
return 'Time';
}
process(
leftChannel: Float32Array,
rightChannel: Float32Array

6
src/lib/audio/processors/RingModulator.ts
View File

@ -1,4 +1,4 @@
import type { AudioProcessor } from "./AudioProcessor";
import type { AudioProcessor, ProcessorCategory } from "./AudioProcessor";
export class RingModulator implements AudioProcessor {
getName(): string {
@ -9,6 +9,10 @@ export class RingModulator implements AudioProcessor {
return "Frequency modulation for metallic, bell-like tones";
}
getCategory(): ProcessorCategory {
return 'Modulation';
}
async process(
leftChannel: Float32Array,
rightChannel: Float32Array

6
src/lib/audio/processors/SegmentShuffler.ts
View File

@ -1,4 +1,4 @@
import type { AudioProcessor } from './AudioProcessor';
import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
export class SegmentShuffler implements AudioProcessor {
getName(): string {
@ -9,6 +9,10 @@ export class SegmentShuffler implements AudioProcessor {
return 'Randomly reorganizes and swaps parts of the sound';
}
getCategory(): ProcessorCategory {
return 'Time';
}
process(
leftChannel: Float32Array,
rightChannel: Float32Array

50
src/lib/audio/processors/SlowTapeStop.ts Normal file
View File

@ -0,0 +1,50 @@
import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
export class SlowTapeStop implements AudioProcessor {
getName(): string {
return 'Slow Tape Stop';
}
getDescription(): string {
return 'Simulates a tape machine gradually slowing to a stop';
}
getCategory(): ProcessorCategory {
return 'Time';
}
process(leftIn: Float32Array, rightIn: Float32Array): [Float32Array, Float32Array] {
const length = leftIn.length;
const leftOut = new Float32Array(length);
const rightOut = new Float32Array(length);
const stopPoint = length * 0.4;
const stopDuration = length * 0.6;
let readPos = 0;
for (let i = 0; i < length; i++) {
if (i < stopPoint) {
readPos = i;
} else {
const t = (i - stopPoint) / stopDuration;
const curve = 1.0 - (t * t * t);
const speed = Math.max(0, curve);
readPos += speed;
}
const idx = Math.floor(readPos);
const frac = readPos - idx;
if (idx < length - 1) {
leftOut[i] = leftIn[idx] * (1.0 - frac) + leftIn[idx + 1] * frac;
rightOut[i] = rightIn[idx] * (1.0 - frac) + rightIn[idx + 1] * frac;
} else if (idx < length) {
leftOut[i] = leftIn[idx];
rightOut[i] = rightIn[idx];
}
}
return [leftOut, rightOut];
}
}

6
src/lib/audio/processors/SpectralBlur.ts
View File

@ -1,4 +1,4 @@
import type { AudioProcessor } from './AudioProcessor';
import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
export class SpectralBlur implements AudioProcessor {
getName(): string {
@ -9,6 +9,10 @@ export class SpectralBlur implements AudioProcessor {
return 'Smears frequency content across neighboring bins for dreamy, diffused textures';
}
getCategory(): ProcessorCategory {
return 'Spectral';
}
process(
leftChannel: Float32Array,
rightChannel: Float32Array

6
src/lib/audio/processors/SpectralShift.ts
View File

@ -1,4 +1,4 @@
import type { AudioProcessor } from './AudioProcessor';
import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
export class SpectralShift implements AudioProcessor {
getName(): string {
@ -9,6 +9,10 @@ export class SpectralShift implements AudioProcessor {
return 'Shifts all frequencies by a fixed Hz amount creating inharmonic, metallic timbres';
}
getCategory(): ProcessorCategory {
return 'Spectral';
}
process(
leftChannel: Float32Array,
rightChannel: Float32Array

6
src/lib/audio/processors/StereoSwap.ts
View File

@ -1,4 +1,4 @@
import type { AudioProcessor } from './AudioProcessor';
import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
export class StereoSwap implements AudioProcessor {
getName(): string {
@ -9,6 +9,10 @@ export class StereoSwap implements AudioProcessor {
return 'Swaps left and right channels';
}
getCategory(): ProcessorCategory {
return 'Space';
}
process(
leftChannel: Float32Array,
rightChannel: Float32Array

6
src/lib/audio/processors/StereoWidener.ts
View File

@ -1,4 +1,4 @@
import type { AudioProcessor } from "./AudioProcessor";
import type { AudioProcessor, ProcessorCategory } from "./AudioProcessor";
export class StereoWidener implements AudioProcessor {
getName(): string {
@ -9,6 +9,10 @@ export class StereoWidener implements AudioProcessor {
return "Expands stereo field using mid-side processing";
}
getCategory(): ProcessorCategory {
return 'Space';
}
async process(
leftChannel: Float32Array,
rightChannel: Float32Array

6
src/lib/audio/processors/Stutter.ts
View File

@ -1,4 +1,4 @@
import type { AudioProcessor } from './AudioProcessor';
import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
export class Stutter implements AudioProcessor {
getName(): string {
@ -9,6 +9,10 @@ export class Stutter implements AudioProcessor {
return 'Rapidly repeats small fragments with smooth crossfades';
}
getCategory(): ProcessorCategory {
return 'Time';
}
process(
leftChannel: Float32Array,
rightChannel: Float32Array

49
src/lib/audio/processors/TapeSpeedUp.ts Normal file
View File

@ -0,0 +1,49 @@
import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
export class TapeSpeedUp implements AudioProcessor {
getName(): string {
return 'Tape Speed Up';
}
getDescription(): string {
return 'Simulates a tape machine accelerating from slow to normal speed';
}
getCategory(): ProcessorCategory {
return 'Time';
}
process(leftIn: Float32Array, rightIn: Float32Array): [Float32Array, Float32Array] {
const length = leftIn.length;
const leftOut = new Float32Array(length);
const rightOut = new Float32Array(length);
const accelDuration = length * 0.3;
let readPos = 0;
for (let i = 0; i < length; i++) {
if (i < accelDuration) {
const t = i / accelDuration;
const curve = t * t * t;
const speed = curve;
readPos += speed;
} else {
readPos += 1.0;
}
const idx = Math.floor(readPos);
const frac = readPos - idx;
if (idx < length - 1) {
leftOut[i] = leftIn[idx] * (1.0 - frac) + leftIn[idx + 1] * frac;
rightOut[i] = rightIn[idx] * (1.0 - frac) + rightIn[idx + 1] * frac;
} else if (idx < length) {
leftOut[i] = leftIn[idx];
rightOut[i] = rightIn[idx];
}
}
return [leftOut, rightOut];
}
}

50
src/lib/audio/processors/TapeStop.ts Normal file
View File

@ -0,0 +1,50 @@
import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
export class TapeStop implements AudioProcessor {
getName(): string {
return 'Tape Stop';
}
getDescription(): string {
return 'Simulates a tape machine slowing to a stop';
}
getCategory(): ProcessorCategory {
return 'Time';
}
process(leftIn: Float32Array, rightIn: Float32Array): [Float32Array, Float32Array] {
const length = leftIn.length;
const leftOut = new Float32Array(length);
const rightOut = new Float32Array(length);
const stopPoint = length * 0.7;
const stopDuration = length * 0.3;
let readPos = 0;
for (let i = 0; i < length; i++) {
if (i < stopPoint) {
readPos = i;
} else {
const t = (i - stopPoint) / stopDuration;
const curve = 1.0 - (t * t * t);
const speed = Math.max(0, curve);
readPos += speed;
}
const idx = Math.floor(readPos);
const frac = readPos - idx;
if (idx < length - 1) {
leftOut[i] = leftIn[idx] * (1.0 - frac) + leftIn[idx + 1] * frac;
rightOut[i] = rightIn[idx] * (1.0 - frac) + rightIn[idx + 1] * frac;
} else if (idx < length) {
leftOut[i] = leftIn[idx];
rightOut[i] = rightIn[idx];
}
}
return [leftOut, rightOut];
}
}

48
src/lib/audio/processors/TapeWobble.ts Normal file
View File

@ -0,0 +1,48 @@
import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
export class TapeWobble implements AudioProcessor {
getName(): string {
return 'Tape Wobble';
}
getDescription(): string {
return 'Simulates tape machine speed instability with pitch variations';
}
getCategory(): ProcessorCategory {
return 'Time';
}
process(leftIn: Float32Array, rightIn: Float32Array): [Float32Array, Float32Array] {
const length = leftIn.length;
const leftOut = new Float32Array(length);
const rightOut = new Float32Array(length);
const sampleRate = 44100;
const wobbleFreq = 2.0 + Math.random() * 2.0;
const wobbleDepth = 0.015;
let readPos = 0;
for (let i = 0; i < length; i++) {
const t = i / sampleRate;
const wobble = Math.sin(2.0 * Math.PI * wobbleFreq * t) * wobbleDepth;
const speed = 1.0 + wobble;
readPos += speed;
const idx = Math.floor(readPos);
const frac = readPos - idx;
if (idx < length - 1) {
leftOut[i] = leftIn[idx] * (1.0 - frac) + leftIn[idx + 1] * frac;
rightOut[i] = rightIn[idx] * (1.0 - frac) + rightIn[idx + 1] * frac;
} else if (idx < length) {
leftOut[i] = leftIn[idx];
rightOut[i] = rightIn[idx];
}
}
return [leftOut, rightOut];
}
}

6
src/lib/audio/processors/Tremolo.ts
View File

@ -1,4 +1,4 @@
import type { AudioProcessor } from './AudioProcessor';
import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
export class Tremolo implements AudioProcessor {
getName(): string {
@ -9,6 +9,10 @@ export class Tremolo implements AudioProcessor {
return 'Applies rhythmic volume modulation';
}
getCategory(): ProcessorCategory {
return 'Amplitude';
}
process(
leftChannel: Float32Array,
rightChannel: Float32Array

6
src/lib/audio/processors/TrimSilence.ts
View File

@ -1,4 +1,4 @@
import type { AudioProcessor } from "./AudioProcessor";
import type { AudioProcessor, ProcessorCategory } from "./AudioProcessor";
export class TrimSilence implements AudioProcessor {
getName(): string {
@ -9,6 +9,10 @@ export class TrimSilence implements AudioProcessor {
return "Removes leading and trailing silence from audio";
}
getCategory(): ProcessorCategory {
return 'Utility';
}
async process(
leftChannel: Float32Array,
rightChannel: Float32Array

50
src/lib/audio/processors/VinylStop.ts Normal file
View File

@ -0,0 +1,50 @@
import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
export class VinylStop implements AudioProcessor {
getName(): string {
return 'Vinyl Stop';
}
getDescription(): string {
return 'Simulates a turntable slowing to a stop with realistic physics';
}
getCategory(): ProcessorCategory {
return 'Time';
}
process(leftIn: Float32Array, rightIn: Float32Array): [Float32Array, Float32Array] {
const length = leftIn.length;
const leftOut = new Float32Array(length);
const rightOut = new Float32Array(length);
const stopPoint = length * 0.7;
const stopDuration = length * 0.3;
let readPos = 0;
for (let i = 0; i < length; i++) {
if (i < stopPoint) {
readPos = i;
} else {
const t = (i - stopPoint) / stopDuration;
const curve = Math.exp(-5.0 * t);
const speed = Math.max(0, curve);
readPos += speed;
}
const idx = Math.floor(readPos);
const frac = readPos - idx;
if (idx < length - 1) {
leftOut[i] = leftIn[idx] * (1.0 - frac) + leftIn[idx + 1] * frac;
rightOut[i] = rightIn[idx] * (1.0 - frac) + rightIn[idx + 1] * frac;
} else if (idx < length) {
leftOut[i] = leftIn[idx];
rightOut[i] = rightIn[idx];
}
}
return [leftOut, rightOut];
}
}

6
src/lib/audio/processors/Waveshaper.ts
View File

@ -1,4 +1,4 @@
import type { AudioProcessor } from "./AudioProcessor";
import type { AudioProcessor, ProcessorCategory } from "./AudioProcessor";
export class Waveshaper implements AudioProcessor {
getName(): string {
@ -9,6 +9,10 @@ export class Waveshaper implements AudioProcessor {
return "Transfer function distortion with various curve shapes";
}
getCategory(): ProcessorCategory {
return 'Distortion';
}
async process(
leftChannel: Float32Array,
rightChannel: Float32Array

22
src/lib/audio/processors/registry.ts
View File

@ -29,6 +29,17 @@ import { LinearFadeOut } from './LinearFadeOut';
import { ExpFadeOut } from './ExpFadeOut';
import { LinearFadeIn } from './LinearFadeIn';
import { ExpFadeIn } from './ExpFadeIn';
import { PanLeftToRight } from './PanLeftToRight';
import { PanRightToLeft } from './PanRightToLeft';
import { LowPassSweepDown } from './LowPassSweepDown';
import { LowPassSweepUp } from './LowPassSweepUp';
import { HighPassSweepDown } from './HighPassSweepDown';
import { HighPassSweepUp } from './HighPassSweepUp';
import { TapeStop } from './TapeStop';
import { SlowTapeStop } from './SlowTapeStop';
import { TapeSpeedUp } from './TapeSpeedUp';
import { VinylStop } from './VinylStop';
import { TapeWobble } from './TapeWobble';
const processors: AudioProcessor[] = [
new SegmentShuffler(),
@ -61,6 +72,17 @@ const processors: AudioProcessor[] = [
new ExpFadeOut(),
new LinearFadeIn(),
new ExpFadeIn(),
new PanLeftToRight(),
new PanRightToLeft(),
new LowPassSweepDown(),
new LowPassSweepUp(),
new HighPassSweepDown(),
new HighPassSweepUp(),
new TapeStop(),
new SlowTapeStop(),
new TapeSpeedUp(),
new VinylStop(),
new TapeWobble(),
];
export function getRandomProcessor(): AudioProcessor {

154
src/lib/components/ProcessorPopup.svelte
View File

@ -1,28 +1,59 @@
<script lang="ts">
import { getAllProcessors } from "../audio/processors/registry";
import type { AudioProcessor } from "../audio/processors/AudioProcessor";
import type { AudioProcessor, ProcessorCategory } from "../audio/processors/AudioProcessor";
interface Props {
onselect: (processor: AudioProcessor) => void;
enabledCategories: Set<ProcessorCategory>;
ontogglecategory: (category: ProcessorCategory) => void;
}
let { onselect }: Props = $props();
let { onselect, enabledCategories, ontogglecategory }: Props = $props();
const allProcessors = getAllProcessors().sort((a, b) =>
a.getName().localeCompare(b.getName())
const allProcessors = getAllProcessors();
const allCategories: ProcessorCategory[] = [
'Amplitude',
'Filter',
'Time',
'Space',
'Pitch',
'Modulation',
'Distortion',
'Spectral',
'Utility'
];
const filteredProcessors = $derived(
allProcessors
.filter(p => enabledCategories.has(p.getCategory()))
.sort((a, b) => a.getName().localeCompare(b.getName()))
);
</script>
<div class="processor-popup">
{#each allProcessors as processor}
<button
class="processor-tile"
data-description={processor.getDescription()}
onclick={() => onselect(processor)}
>
{processor.getName()}
</button>
{/each}
<div class="popup-sidebar">
{#each allCategories as category}
<button
class="category-filter"
class:active={enabledCategories.has(category)}
onclick={() => ontogglecategory(category)}
>
{category}
</button>
{/each}
</div>
<div class="processors-grid">
{#each filteredProcessors as processor}
<button
class="processor-tile"
data-description={processor.getDescription()}
onclick={() => onselect(processor)}
>
{processor.getName()}
</button>
{/each}
</div>
</div>
<style>
@ -31,18 +62,74 @@
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #000;
background-color: #0a0a0a;
border: 2px solid #fff;
padding: 0.5rem;
z-index: 1000;
width: 90vw;
max-width: 500px;
margin-bottom: 0.5rem;
max-height: 60vh;
display: flex;
flex-direction: row;
overflow: hidden;
}
.popup-sidebar {
display: flex;
flex-direction: column;
background-color: #1a1a1a;
border-right: 1px solid #333;
min-width: 80px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #444 transparent;
}
.popup-sidebar::-webkit-scrollbar {
width: 3px;
}
.popup-sidebar::-webkit-scrollbar-track {
background: transparent;
}
.popup-sidebar::-webkit-scrollbar-thumb {
background: #444;
}
.category-filter {
font-size: 0.65rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 0.5rem 0.4rem;
background-color: #1a1a1a;
border: none;
border-bottom: 1px solid #2a2a2a;
color: #888;
text-align: left;
cursor: pointer;
transition: background-color 0.2s, color 0.2s;
white-space: nowrap;
}
.category-filter:hover {
background-color: #222;
color: #aaa;
}
.category-filter.active {
background-color: #0a0a0a;
color: #fff;
}
.processors-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.4rem;
width: 90vw;
max-width: 400px;
margin-bottom: 0.5rem;
max-height: 60vh;
padding: 0.5rem;
overflow-y: auto;
flex: 1;
}
.processor-tile {
@ -90,11 +177,23 @@
@media (min-width: 768px) {
.processor-popup {
width: 550px;
max-width: 550px;
}
.popup-sidebar {
min-width: 100px;
}
.category-filter {
font-size: 0.7rem;
padding: 0.5rem 0.6rem;
}
.processors-grid {
grid-template-columns: repeat(3, 1fr);
width: 500px;
max-width: 500px;
padding: 0.6rem;
gap: 0.5rem;
padding: 0.6rem;
}
.processor-tile {
@ -114,9 +213,16 @@
@media (min-width: 1024px) {
.processor-popup {
width: 650px;
max-width: 650px;
}
.popup-sidebar {
min-width: 110px;
}
.processors-grid {
grid-template-columns: repeat(4, 1fr);
width: 600px;
max-width: 600px;
padding: 0.75rem;
}

2
src/lib/utils/keyboard.ts
View File

@ -32,7 +32,7 @@ export function createKeyboardHandler(actions: KeyboardActions) {
case 'p':
actions.onProcess?.();
break;
case 's':
case 'd':
actions.onDownload?.();
break;
case ' ':

18
src/lib/utils/settings.ts
View File

@ -9,6 +9,7 @@ const STORAGE_KEYS = {
PITCH_LOCK_ENABLED: 'pitchLockEnabled',
PITCH_LOCK_FREQUENCY: 'pitchLockFrequency',
EXPANDED_CATEGORIES: 'expandedCategories',
ENABLED_PROCESSOR_CATEGORIES: 'enabledProcessorCategories',
} as const;
export function loadVolume(): number {
@ -63,3 +64,20 @@ export function loadExpandedCategories(): Set<string> {
export function saveExpandedCategories(categories: Set<string>): void {
localStorage.setItem(STORAGE_KEYS.EXPANDED_CATEGORIES, JSON.stringify(Array.from(categories)));
}
export function loadEnabledProcessorCategories(): Set<string> {
const stored = localStorage.getItem(STORAGE_KEYS.ENABLED_PROCESSOR_CATEGORIES);
if (stored) {
try {
const parsed = JSON.parse(stored);
return new Set(Array.isArray(parsed) ? parsed : []);
} catch {
return new Set(['Amplitude', 'Filter', 'Time', 'Space', 'Pitch', 'Modulation', 'Distortion', 'Spectral', 'Utility']);
}
}
return new Set(['Amplitude', 'Filter', 'Time', 'Space', 'Pitch', 'Modulation', 'Distortion', 'Spectral', 'Utility']);
}
export function saveEnabledProcessorCategories(categories: Set<string>): void {
localStorage.setItem(STORAGE_KEYS.ENABLED_PROCESSOR_CATEGORIES, JSON.stringify(Array.from(categories)));
}