From a6f8b57b2cd72e1b0fe492634f84f2be41f61f7b Mon Sep 17 00:00:00 2001
From: LoopBraker <carrieta@udemedellin.edu.co>
Date: Sat, 3 Jan 2026 07:39:53 -0500
Subject: [PATCH 1/4] feat(Sampler): add optional start/end parameters to
 triggerAttack

Allows playing a portion of a sample without requiring loop mode.
This enables smooth playback from arbitrary positions with the
envelope's fadeIn applied to prevent clicking artifacts.

Usage: sampler.triggerAttack("C4", time, velocity, startTime, endTime)
---
 Tone/instrument/Sampler.ts | 32 ++++++++++++++++++++++++++------
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/Tone/instrument/Sampler.ts b/Tone/instrument/Sampler.ts
index 5a625079f..4ae8786b3 100644
--- a/Tone/instrument/Sampler.ts
+++ b/Tone/instrument/Sampler.ts
@@ -216,17 +216,26 @@ export class Sampler extends Instrument<SamplerOptions> {
 	 * @param  notes	The note to play, or an array of notes.
 	 * @param  time     When to play the note
 	 * @param  velocity The velocity to play the sample back.
+	 * @param  start    Optional start position within the sample (in seconds). 
+	 *                  Allows playing a portion of the sample without loop mode.
+	 * @param  end      Optional end position within the sample (in seconds).
+	 *                  If provided with start, plays only that portion of the sample.
 	 */
 	triggerAttack(
 		notes: Frequency | Frequency[],
 		time?: Time,
-		velocity: NormalRange = 1
+		velocity: NormalRange = 1,
+		start?: Time,
+		end?: Time
 	): this {
-		this.log("triggerAttack", notes, time, velocity);
+		this.log("triggerAttack", notes, time, velocity, start, end);
 		if (!Array.isArray(notes)) {
 			notes = [notes];
 		}
-        const offset = defaultArg(this._loopStart, 0);
+		// Use custom start position if provided, otherwise fall back to loopStart or 0
+        const offset = start !== undefined 
+			? this.toSeconds(start) 
+			: defaultArg(this._loopStart, 0);
 		notes.forEach((note) => {
 			const midiFloat = ftomf(
 				new FrequencyClass(this.context, note).toFrequency()
@@ -240,9 +249,20 @@ export class Sampler extends Instrument<SamplerOptions> {
 			const playbackRate = intervalToFrequencyRatio(
 				difference + remainder
 			);
-            const duration = this._loop 
-                ? undefined
-                : buffer.duration / playbackRate;
+			// Calculate duration: custom range, loop mode, or full buffer
+			let duration: number | undefined;
+			if (start !== undefined && end !== undefined) {
+				// Custom range: calculate duration from start to end, adjusted for playback rate
+				const startSeconds = this.toSeconds(start);
+				const endSeconds = this.toSeconds(end);
+				duration = (endSeconds - startSeconds) / playbackRate;
+			} else if (this._loop) {
+				// Loop mode: let it loop indefinitely
+				duration = undefined;
+			} else {
+				// Default: play entire buffer
+				duration = buffer.duration / playbackRate;
+			}
 			// play that note
 			const source = new ToneBufferSource({
 				url: buffer,

From f759b488b7e62a7ea319e04c814d704986b59cf8 Mon Sep 17 00:00:00 2001
From: LoopBraker <carrieta@udemedellin.edu.co>
Date: Sat, 3 Jan 2026 07:44:53 -0500
Subject: [PATCH 2/4] feat(Sampler): add reverse playback support

Adds a `reverse` property to Sampler that enables reversed sample playback.
When combined with start/end parameters in triggerAttack, allows playing
portions of samples backwards while still benefiting from the envelope's
fadeIn/fadeOut to prevent clicking artifacts.

Usage:
  sampler.reverse = true;
  sampler.triggerAttack("A4", time, velocity, 0.5, 1.0); // plays 1.0s->0.5s reversed
---
 Tone/instrument/Sampler.ts | 85 +++++++++++++++++++++++++++++++-------
 1 file changed, 70 insertions(+), 15 deletions(-)

diff --git a/Tone/instrument/Sampler.ts b/Tone/instrument/Sampler.ts
index 4ae8786b3..a5b264071 100644
--- a/Tone/instrument/Sampler.ts
+++ b/Tone/instrument/Sampler.ts
@@ -37,6 +37,7 @@ export interface SamplerOptions extends InstrumentOptions {
     loop: boolean;
     loopEnd: number;
     loopStart: number;
+    reverse: boolean;
 }
 
 /**
@@ -93,6 +94,11 @@ export class Sampler extends Instrument<SamplerOptions> {
 	 */
 	private _loopEnd: Time;
 
+	/**
+	 * If the samples should be played in reverse
+	 */
+	private _reverse: boolean;
+
 	/**
 	 * The envelope applied to the beginning of the sample.
 	 * @min 0
@@ -170,6 +176,7 @@ export class Sampler extends Instrument<SamplerOptions> {
         this._loop = options.loop;
         this._loopStart = options.loopStart;
         this._loopEnd = options.loopEnd;
+        this._reverse = options.reverse;
 
 		// invoke the callback if it's already loaded
 		if (this._buffers.loaded) {
@@ -190,6 +197,7 @@ export class Sampler extends Instrument<SamplerOptions> {
             loop: false,
             loopEnd: 0,
             loopStart: 0,
+            reverse: false,
 		});
 	}
 
@@ -232,10 +240,6 @@ export class Sampler extends Instrument<SamplerOptions> {
 		if (!Array.isArray(notes)) {
 			notes = [notes];
 		}
-		// Use custom start position if provided, otherwise fall back to loopStart or 0
-        const offset = start !== undefined 
-			? this.toSeconds(start) 
-			: defaultArg(this._loopStart, 0);
 		notes.forEach((note) => {
 			const midiFloat = ftomf(
 				new FrequencyClass(this.context, note).toFrequency()
@@ -249,20 +253,50 @@ export class Sampler extends Instrument<SamplerOptions> {
 			const playbackRate = intervalToFrequencyRatio(
 				difference + remainder
 			);
-			// Calculate duration: custom range, loop mode, or full buffer
+
+			// Calculate offset and duration based on reverse mode
+			let offset: number;
 			let duration: number | undefined;
-			if (start !== undefined && end !== undefined) {
-				// Custom range: calculate duration from start to end, adjusted for playback rate
-				const startSeconds = this.toSeconds(start);
-				const endSeconds = this.toSeconds(end);
-				duration = (endSeconds - startSeconds) / playbackRate;
-			} else if (this._loop) {
-				// Loop mode: let it loop indefinitely
-				duration = undefined;
+
+			if (this._reverse) {
+				// Reverse the buffer if not already reversed
+				if (!buffer.reverse) {
+					buffer.reverse = true;
+				}
+				// When reversed, start/end refer to the original (non-reversed) buffer positions
+				// We need to flip them: original "end" becomes the offset in reversed buffer
+				if (start !== undefined && end !== undefined) {
+					const startSeconds = this.toSeconds(start);
+					const endSeconds = this.toSeconds(end);
+					// In reversed buffer: offset = buffer.duration - end (where we want to start from)
+					offset = buffer.duration - endSeconds;
+					duration = (endSeconds - startSeconds) / playbackRate;
+				} else {
+					// No custom range, play from beginning of reversed buffer
+					offset = this.toSeconds(defaultArg(this._loopStart, 0));
+					duration = this._loop ? undefined : buffer.duration / playbackRate;
+				}
 			} else {
-				// Default: play entire buffer
-				duration = buffer.duration / playbackRate;
+				// Ensure buffer is not reversed
+				if (buffer.reverse) {
+					buffer.reverse = false;
+				}
+				// Use custom start position if provided, otherwise fall back to loopStart or 0
+				offset = start !== undefined 
+					? this.toSeconds(start) 
+					: this.toSeconds(defaultArg(this._loopStart, 0));
+				// Calculate duration: custom range, loop mode, or full buffer
+				if (start !== undefined && end !== undefined) {
+					const startSeconds = this.toSeconds(start);
+					const endSeconds = this.toSeconds(end);
+					duration = (endSeconds - startSeconds) / playbackRate;
+				} else if (this._loop) {
+					duration = undefined;
+				} else {
+					duration = buffer.duration / playbackRate;
+				}
 			}
+
 			// play that note
 			const source = new ToneBufferSource({
 				url: buffer,
@@ -504,6 +538,27 @@ export class Sampler extends Instrument<SamplerOptions> {
             });
         });
     }
+
+    /**
+     * If the samples should be played in reverse.
+     * When reverse is true and start/end are provided to triggerAttack,
+     * the sample will play backwards from end to start.
+     * @example
+     * const sampler = new Tone.Sampler({
+     *      urls: {  
+     *           A4: "https://tonejs.github.io/audio/berklee/femalevoice_aa_A4.mp3",  
+     *      },
+     * }).toDestination();
+     * sampler.reverse = true;
+     * // Play in reverse from 1.0s to 0.5s (in original time)
+     * sampler.triggerAttack("A4", Tone.now(), 1, 0.5, 1.0);
+     */
+    get reverse(): boolean {
+        return this._reverse;
+    }
+    set reverse(rev: boolean) {
+        this._reverse = rev;
+    }
     
 	/**
 	 * Clean up

From b0a50b8df991be3dd4bcbe40156e217fd284a12d Mon Sep 17 00:00:00 2001
From: LoopBraker <carrieta@udemedellin.edu.co>
Date: Sat, 3 Jan 2026 08:57:14 -0500
Subject: [PATCH 3/4] Improve example

---
 examples/js/ExampleList.json |   3 +-
 examples/samplerRange.html   | 932 +++++++++++++++++++++++++++++++++++
 package-lock.json            | 233 +++++----
 3 files changed, 1045 insertions(+), 123 deletions(-)
 create mode 100644 examples/samplerRange.html

diff --git a/examples/js/ExampleList.json b/examples/js/ExampleList.json
index 823c66147..9593abe4c 100644
--- a/examples/js/ExampleList.json
+++ b/examples/js/ExampleList.json
@@ -16,7 +16,8 @@
 		"FatOscillator" : "jump",
 		"MetalSynth" : "bembe",
 		"Granular Synthesis" : "grainPlayer",
-		"Sampler" : "sampler"
+		"Sampler" : "sampler",
+		"Sampler Range" : "samplerRange"
 	},
 	"Effects" : {
 		"LFO Effects" : "lfoEffects",
diff --git a/examples/samplerRange.html b/examples/samplerRange.html
new file mode 100644
index 000000000..21eb93b00
--- /dev/null
+++ b/examples/samplerRange.html
@@ -0,0 +1,932 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<title>Sampler Range Playback</title>
+
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1, maximum-scale=1"
+		/>
+		<link
+			rel="icon"
+			type="image/png"
+			sizes="174x174"
+			href="./favicon.png"
+		/>
+
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
+		<link
+			href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
+			rel="stylesheet"
+		/>
+		<script src="../build/Tone.js"></script>
+		<script src="./js/tone-ui.js"></script>
+		<script src="./js/components.js"></script>
+	</head>
+	<body>
+		<style type="text/css">
+			.controls {
+				display: flex;
+				flex-direction: column;
+				gap: 15px;
+				margin-top: 20px;
+			}
+			.control-row {
+				display: flex;
+				align-items: center;
+				gap: 15px;
+			}
+			.control-row label {
+				min-width: 120px;
+				font-weight: bold;
+			}
+			.control-row input[type="range"] {
+				flex: 1;
+				max-width: 300px;
+			}
+			.control-row input[type="number"] {
+				width: 80px;
+				padding: 5px;
+			}
+			.control-row input[type="file"] {
+				flex: 1;
+			}
+			.value-display {
+				min-width: 60px;
+				text-align: right;
+				font-family: monospace;
+			}
+			button {
+				padding: 10px 20px;
+				font-size: 16px;
+				cursor: pointer;
+				border: 2px solid #333;
+				background: #fff;
+				border-radius: 5px;
+				transition: all 0.2s;
+			}
+			button:hover {
+				background: #333;
+				color: #fff;
+			}
+			button:disabled {
+				opacity: 0.5;
+				cursor: not-allowed;
+			}
+			.toggle-btn.active {
+				background: #4CAF50;
+				color: white;
+				border-color: #4CAF50;
+			}
+			#waveformContainer {
+				width: 100%;
+				overflow-x: auto;
+				background: #222;
+				border-radius: 10px;
+				margin: 15px 0;
+			}
+			#waveform {
+				height: 120px;
+				background: #222;
+				position: relative;
+				min-width: 100%;
+			}
+			#waveform canvas {
+				height: 100%;
+				display: block;
+			}
+			#rangeOverlay {
+				position: absolute;
+				top: 0;
+				height: 100%;
+				background: rgba(76, 175, 80, 0.3);
+				pointer-events: none;
+				border-left: 2px solid #4CAF50;
+				border-right: 2px solid #4CAF50;
+				z-index: 3;
+			}
+			.range-overlay {
+				position: absolute;
+				top: 0;
+				height: 100%;
+				background: rgba(76, 175, 80, 0.3);
+				pointer-events: none;
+				border-left: 2px solid #4CAF50;
+				border-right: 2px solid #4CAF50;
+			}
+			.zoom-controls {
+				display: flex;
+				align-items: center;
+				gap: 10px;
+				margin-bottom: 5px;
+			}
+			.zoom-controls button {
+				padding: 5px 12px;
+				font-size: 18px;
+				min-width: 40px;
+			}
+			.zoom-controls span {
+				font-family: monospace;
+				min-width: 60px;
+				text-align: center;
+			}
+			#timeRuler {
+				height: 20px;
+				background: #333;
+				position: relative;
+				font-size: 10px;
+				color: #aaa;
+				overflow: hidden;
+			}
+			.time-marker {
+				position: absolute;
+				top: 0;
+				height: 100%;
+				border-left: 1px solid #555;
+				padding-left: 3px;
+				font-family: monospace;
+			}
+			#playhead {
+				position: absolute;
+				top: 0;
+				height: 100%;
+				width: 2px;
+				background: #ff5722;
+				pointer-events: none;
+				z-index: 10;
+				display: none;
+				box-shadow: 0 0 4px rgba(255, 87, 34, 0.8);
+			}
+			#playhead::before {
+				content: '';
+				position: absolute;
+				top: 0;
+				left: -4px;
+				width: 0;
+				height: 0;
+				border-left: 5px solid transparent;
+				border-right: 5px solid transparent;
+				border-top: 8px solid #ff5722;
+			}
+			#envelopeCanvas {
+				position: absolute;
+				top: 0;
+				left: 0;
+				height: 100%;
+				pointer-events: none;
+				z-index: 5;
+			}
+			.curve-select {
+				padding: 5px 10px;
+				font-size: 14px;
+				border: 2px solid #333;
+				border-radius: 5px;
+				background: #fff;
+				cursor: pointer;
+			}
+			#status {
+				padding: 10px;
+				background: #f5f5f5;
+				border-radius: 5px;
+				margin-top: 10px;
+				font-family: monospace;
+			}
+			.button-row {
+				display: flex;
+				gap: 10px;
+				flex-wrap: wrap;
+			}
+		</style>
+		<tone-example label="Sampler Range Playback">
+			<div slot="explanation">
+				This example demonstrates the extended
+				<a href="https://tonejs.github.io/docs/latest/classes/Sampler">Tone.Sampler</a>
+				with support for <strong>start/end range</strong> and <strong>reverse playback</strong>.
+				Upload a .wav or .mp3 file, adjust the start and end positions, 
+				toggle reverse mode, and play portions of your sample with envelope 
+				smoothing to prevent clicks.
+			</div>
+
+			<div id="content">
+				<div class="controls">
+					<!-- File Upload -->
+					<div class="control-row">
+						<label>Upload Sample:</label>
+						<input type="file" id="fileInput" accept=".wav,.mp3,.ogg,.flac" />
+					</div>
+
+					<!-- Zoom Controls -->
+					<div class="zoom-controls">
+						<label>Zoom:</label>
+						<button id="zoomOutBtn" title="Zoom Out">−</button>
+						<input type="range" id="zoomSlider" min="1" max="50" step="0.5" value="1" style="width: 150px;" />
+						<button id="zoomInBtn" title="Zoom In">+</button>
+						<span id="zoomDisplay">1.0x</span>
+						<button id="zoomFitBtn" title="Fit to View">Fit</button>
+						<button id="zoomSelectionBtn" title="Zoom to Selection" disabled>Zoom to Selection</button>
+						<button id="autoFitBtn" class="toggle-btn" title="Auto-fit selection to view">🔒 Auto-fit: OFF</button>
+					</div>
+
+					<!-- Waveform Display -->
+					<div id="waveformContainer">
+						<div id="waveform">
+							<canvas id="waveformCanvas"></canvas>
+							<canvas id="envelopeCanvas"></canvas>
+							<div id="rangeOverlay"></div>
+							<div id="playhead"></div>
+						</div>
+						<div id="timeRuler"></div>
+					</div>
+
+					<!-- Start Position -->
+					<div class="control-row">
+						<label>Start (sec):</label>
+						<input type="range" id="startSlider" min="0" max="10" step="0.01" value="0" />
+						<input type="number" id="startInput" min="0" step="0.01" value="0" />
+						<span class="value-display" id="startDisplay">0.00s</span>
+					</div>
+
+					<!-- End Position -->
+					<div class="control-row">
+						<label>End (sec):</label>
+						<input type="range" id="endSlider" min="0" max="10" step="0.01" value="1" />
+						<input type="number" id="endInput" min="0" step="0.01" value="1" />
+						<span class="value-display" id="endDisplay">1.00s</span>
+					</div>
+
+					<!-- Attack (Fade In) -->
+					<div class="control-row">
+						<label>Attack (sec):</label>
+						<input type="range" id="attackSlider" min="0" max="1" step="0.01" value="0.01" />
+						<span class="value-display" id="attackDisplay">0.01s</span>
+					</div>
+
+					<!-- Release (Fade Out) -->
+					<div class="control-row">
+						<label>Release (sec):</label>
+						<input type="range" id="releaseSlider" min="0" max="1" step="0.01" value="0.1" />
+						<span class="value-display" id="releaseDisplay">0.10s</span>
+					</div>
+
+					<!-- Curve Type -->
+					<div class="control-row">
+						<label>Envelope Curve:</label>
+						<select id="curveSelect" class="curve-select">
+							<option value="exponential" selected>Exponential</option>
+							<option value="linear">Linear</option>
+						</select>
+					</div>
+
+					<!-- Buttons -->
+					<div class="button-row">
+						<button id="reverseBtn" class="toggle-btn">🔄 Reverse: OFF</button>
+						<button id="loopBtn" class="toggle-btn">🔁 Loop: OFF</button>
+						<button id="playBtn" disabled>▶️ Play Range</button>
+						<button id="playFullBtn" disabled>▶️ Play Full</button>
+						<button id="stopBtn" disabled>⏹️ Stop</button>
+					</div>
+
+					<!-- Status -->
+					<div id="status">Upload a sample to begin...</div>
+				</div>
+			</div>
+		</tone-example>
+
+		<script type="text/javascript">
+			let sampler = null;
+			let bufferDuration = 0;
+			let audioBuffer = null;
+			let zoomLevel = 1;
+
+			// DOM Elements
+			const fileInput = document.getElementById('fileInput');
+			const startSlider = document.getElementById('startSlider');
+			const startInput = document.getElementById('startInput');
+			const endSlider = document.getElementById('endSlider');
+			const endInput = document.getElementById('endInput');
+			const attackSlider = document.getElementById('attackSlider');
+			const releaseSlider = document.getElementById('releaseSlider');
+			const startDisplay = document.getElementById('startDisplay');
+			const endDisplay = document.getElementById('endDisplay');
+			const attackDisplay = document.getElementById('attackDisplay');
+			const releaseDisplay = document.getElementById('releaseDisplay');
+			const reverseBtn = document.getElementById('reverseBtn');
+			const loopBtn = document.getElementById('loopBtn');
+			const playBtn = document.getElementById('playBtn');
+			const playFullBtn = document.getElementById('playFullBtn');
+			const stopBtn = document.getElementById('stopBtn');
+			const status = document.getElementById('status');
+			const waveformCanvas = document.getElementById('waveformCanvas');
+			const waveformContainer = document.getElementById('waveformContainer');
+			const waveformDiv = document.getElementById('waveform');
+			const rangeOverlay = document.getElementById('rangeOverlay');
+			const zoomSlider = document.getElementById('zoomSlider');
+			const zoomDisplay = document.getElementById('zoomDisplay');
+			const zoomInBtn = document.getElementById('zoomInBtn');
+			const zoomOutBtn = document.getElementById('zoomOutBtn');
+			const zoomFitBtn = document.getElementById('zoomFitBtn');
+			const zoomSelectionBtn = document.getElementById('zoomSelectionBtn');
+			const autoFitBtn = document.getElementById('autoFitBtn');
+			const timeRuler = document.getElementById('timeRuler');
+			const playhead = document.getElementById('playhead');
+			const envelopeCanvas = document.getElementById('envelopeCanvas');
+			const curveSelect = document.getElementById('curveSelect');
+
+			// State
+			let isReversed = false;
+			let isLooping = false;
+			let isPlaying = false;
+			let playbackStartTime = 0;
+			let playbackStartPos = 0;
+			let playbackEndPos = 0;
+			let animationFrameId = null;
+			let currentCurve = 'exponential';
+			let autoFitEnabled = false;
+
+			// File upload handler
+			fileInput.addEventListener('change', async (e) => {
+				const file = e.target.files[0];
+				if (!file) return;
+
+				status.textContent = 'Loading sample...';
+
+				try {
+					// Read file as ArrayBuffer
+					const arrayBuffer = await file.arrayBuffer();
+					
+					// Decode audio
+					const audioContext = Tone.getContext().rawContext;
+					audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+					bufferDuration = audioBuffer.duration;
+
+					// Create Tone.js buffer
+					const toneBuffer = new Tone.ToneAudioBuffer(audioBuffer);
+
+					// Dispose old sampler if exists
+					if (sampler) {
+						sampler.dispose();
+					}
+
+					// Create new sampler with the uploaded sample mapped to C4
+					sampler = new Tone.Sampler({
+						urls: { C4: toneBuffer },
+						attack: parseFloat(attackSlider.value),
+						release: parseFloat(releaseSlider.value),
+						curve: currentCurve,
+						onload: () => {
+							status.textContent = `Loaded: ${file.name} (${bufferDuration.toFixed(2)}s)`;
+							enableControls();
+						}
+					}).toDestination();
+
+					// Update slider ranges
+					startSlider.max = bufferDuration;
+					endSlider.max = bufferDuration;
+					startInput.max = bufferDuration;
+					endInput.max = bufferDuration;
+					endSlider.value = bufferDuration;
+					endInput.value = bufferDuration.toFixed(2);
+					updateEndDisplay();
+
+					// Draw waveform
+					drawWaveform(audioBuffer);
+					updateRangeOverlay();
+					zoomSelectionBtn.disabled = false;
+
+				} catch (err) {
+					status.textContent = `Error loading file: ${err.message}`;
+					console.error(err);
+				}
+			});
+
+			// Draw waveform with zoom support
+			function drawWaveform(buffer) {
+				const canvas = waveformCanvas;
+				const ctx = canvas.getContext('2d');
+				const dpr = window.devicePixelRatio || 1;
+				
+				// Calculate width based on zoom
+				const containerWidth = waveformContainer.offsetWidth;
+				const zoomedWidth = containerWidth * zoomLevel;
+				
+				// Update waveform div and canvas size
+				waveformDiv.style.width = `${zoomedWidth}px`;
+				canvas.style.width = `${zoomedWidth}px`;
+				canvas.width = zoomedWidth * dpr;
+				canvas.height = waveformDiv.offsetHeight * dpr;
+				ctx.scale(dpr, dpr);
+
+				const width = zoomedWidth;
+				const height = waveformDiv.offsetHeight;
+				const data = buffer.getChannelData(0);
+				const step = Math.ceil(data.length / width);
+				const amp = height / 2;
+
+				// Clear and draw background
+				ctx.fillStyle = '#222';
+				ctx.fillRect(0, 0, width, height);
+
+				// Draw center line
+				ctx.strokeStyle = '#444';
+				ctx.lineWidth = 1;
+				ctx.beginPath();
+				ctx.moveTo(0, amp);
+				ctx.lineTo(width, amp);
+				ctx.stroke();
+
+				// Draw waveform
+				ctx.beginPath();
+				ctx.moveTo(0, amp);
+				ctx.strokeStyle = '#4CAF50';
+				ctx.lineWidth = 1;
+
+				for (let i = 0; i < width; i++) {
+					let min = 1.0;
+					let max = -1.0;
+					const startSample = Math.floor(i * step);
+					const endSample = Math.min(startSample + step, data.length);
+					for (let j = startSample; j < endSample; j++) {
+						const datum = data[j];
+						if (datum < min) min = datum;
+						if (datum > max) max = datum;
+					}
+					ctx.lineTo(i, (1 + min) * amp);
+					ctx.lineTo(i, (1 + max) * amp);
+				}
+
+				ctx.stroke();
+				
+				// Draw time ruler
+				drawTimeRuler(zoomedWidth);
+				
+				// Draw envelope overlay
+				drawEnvelope(zoomedWidth, waveformDiv.offsetHeight);
+			}
+
+			// Draw envelope visualization
+			function drawEnvelope(width, height) {
+				const canvas = envelopeCanvas;
+				const ctx = canvas.getContext('2d');
+				const dpr = window.devicePixelRatio || 1;
+				
+				// Size the envelope canvas to match waveform
+				canvas.style.width = `${width}px`;
+				canvas.width = width * dpr;
+				canvas.height = height * dpr;
+				ctx.scale(dpr, dpr);
+				
+				if (bufferDuration === 0) return;
+				
+				const start = parseFloat(startSlider.value);
+				const end = parseFloat(endSlider.value);
+				const attack = parseFloat(attackSlider.value);
+				const release = parseFloat(releaseSlider.value);
+				const selectionDuration = end - start;
+				
+				if (selectionDuration <= 0) return;
+				
+				// Convert times to pixel positions
+				const pxPerSec = width / bufferDuration;
+				const startPx = start * pxPerSec;
+				const endPx = end * pxPerSec;
+				const attackPx = Math.min(attack * pxPerSec, endPx - startPx);
+				const releasePx = Math.min(release * pxPerSec, endPx - startPx - attackPx);
+				
+				ctx.clearRect(0, 0, width, height);
+				
+				// Draw envelope shape (inverted - shows what gets faded out)
+				ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+				
+				// Attack fade region (left side of selection)
+				if (attackPx > 0) {
+					ctx.beginPath();
+					ctx.moveTo(startPx, 0);
+					ctx.lineTo(startPx, height);
+					
+					if (currentCurve === 'exponential') {
+						// Exponential curve (fast rise)
+						const steps = 20;
+						for (let i = 0; i <= steps; i++) {
+							const t = i / steps;
+							// Exponential: starts slow, ends fast
+							const curve = 1 - Math.pow(1 - t, 3);
+							const x = startPx + (attackPx * t);
+							const fadeHeight = height * (1 - curve);
+							ctx.lineTo(x, fadeHeight);
+						}
+						for (let i = steps; i >= 0; i--) {
+							const t = i / steps;
+							const curve = 1 - Math.pow(1 - t, 3);
+							const x = startPx + (attackPx * t);
+							const fadeHeight = height - (height * (1 - curve));
+							ctx.lineTo(x, fadeHeight);
+						}
+					} else {
+						// Linear curve
+						ctx.lineTo(startPx + attackPx, 0);
+						ctx.lineTo(startPx + attackPx, height);
+					}
+					
+					ctx.closePath();
+					ctx.fill();
+				}
+				
+				// Release fade region (right side of selection)
+				if (releasePx > 0) {
+					const releaseStartPx = endPx - releasePx;
+					
+					ctx.beginPath();
+					ctx.moveTo(releaseStartPx, 0);
+					
+					if (currentCurve === 'exponential') {
+						// Exponential curve
+						const steps = 20;
+						for (let i = 0; i <= steps; i++) {
+							const t = i / steps;
+							// Exponential fade out
+							const curve = Math.pow(t, 3);
+							const x = releaseStartPx + (releasePx * t);
+							const fadeHeight = height * curve;
+							ctx.lineTo(x, fadeHeight);
+						}
+						ctx.lineTo(endPx, height);
+						for (let i = steps; i >= 0; i--) {
+							const t = i / steps;
+							const curve = Math.pow(t, 3);
+							const x = releaseStartPx + (releasePx * t);
+							const fadeHeight = height - (height * curve);
+							ctx.lineTo(x, fadeHeight);
+						}
+					} else {
+						// Linear curve
+						ctx.lineTo(endPx, 0);
+						ctx.lineTo(endPx, height);
+						ctx.lineTo(releaseStartPx, height);
+					}
+					
+					ctx.closePath();
+					ctx.fill();
+				}
+				
+				// Draw envelope line on top
+				ctx.strokeStyle = '#ff9800';
+				ctx.lineWidth = 2;
+				ctx.beginPath();
+				
+				// Start at bottom left of selection
+				ctx.moveTo(startPx, height / 2);
+				
+				// Attack curve
+				if (attackPx > 0) {
+					if (currentCurve === 'exponential') {
+						const steps = 20;
+						for (let i = 0; i <= steps; i++) {
+							const t = i / steps;
+							const curve = 1 - Math.pow(1 - t, 3);
+							const x = startPx + (attackPx * t);
+							const y = (height / 2) * (1 - curve) + 5;
+							ctx.lineTo(x, y);
+						}
+					} else {
+						ctx.lineTo(startPx + attackPx, 5);
+					}
+				} else {
+					ctx.lineTo(startPx, 5);
+				}
+				
+				// Sustain (flat top)
+				ctx.lineTo(endPx - releasePx, 5);
+				
+				// Release curve
+				if (releasePx > 0) {
+					const releaseStartPx = endPx - releasePx;
+					if (currentCurve === 'exponential') {
+						const steps = 20;
+						for (let i = 0; i <= steps; i++) {
+							const t = i / steps;
+							const curve = Math.pow(t, 3);
+							const x = releaseStartPx + (releasePx * t);
+							const y = 5 + (height / 2 - 5) * curve;
+							ctx.lineTo(x, y);
+						}
+					} else {
+						ctx.lineTo(endPx, height / 2);
+					}
+				} else {
+					ctx.lineTo(endPx, height / 2);
+				}
+				
+				ctx.stroke();
+			}
+
+			// Draw time ruler with markers
+			function drawTimeRuler(width) {
+				timeRuler.innerHTML = '';
+				timeRuler.style.width = `${width}px`;
+				
+				if (bufferDuration === 0) return;
+				
+				// Calculate appropriate interval based on zoom
+				const pixelsPerSecond = width / bufferDuration;
+				let interval = 1; // seconds
+				if (pixelsPerSecond > 200) interval = 0.1;
+				else if (pixelsPerSecond > 50) interval = 0.5;
+				else if (pixelsPerSecond < 20) interval = 5;
+				else if (pixelsPerSecond < 10) interval = 10;
+				
+				for (let t = 0; t <= bufferDuration; t += interval) {
+					const x = (t / bufferDuration) * width;
+					const marker = document.createElement('div');
+					marker.className = 'time-marker';
+					marker.style.left = `${x}px`;
+					marker.textContent = t.toFixed(interval < 1 ? 1 : 0) + 's';
+					timeRuler.appendChild(marker);
+				}
+			}
+
+			// Update range overlay on waveform
+			function updateRangeOverlay() {
+				if (bufferDuration === 0) return;
+				const start = parseFloat(startSlider.value);
+				const end = parseFloat(endSlider.value);
+				const containerWidth = waveformContainer.offsetWidth;
+				const zoomedWidth = containerWidth * zoomLevel;
+				
+				const leftPx = (start / bufferDuration) * zoomedWidth;
+				const widthPx = ((end - start) / bufferDuration) * zoomedWidth;
+				
+				rangeOverlay.style.left = `${leftPx}px`;
+				rangeOverlay.style.width = `${widthPx}px`;
+			}
+
+			// Slider/input sync functions
+			function updateStartDisplay() {
+				const val = parseFloat(startSlider.value).toFixed(2);
+				startDisplay.textContent = `${val}s`;
+				startInput.value = val;
+				// Ensure start < end
+				if (parseFloat(startSlider.value) >= parseFloat(endSlider.value)) {
+					endSlider.value = parseFloat(startSlider.value) + 0.01;
+					updateEndDisplay();
+				}
+				updateRangeOverlay();
+				if (audioBuffer) drawEnvelope(waveformContainer.offsetWidth * zoomLevel, waveformDiv.offsetHeight);
+				if (autoFitEnabled) fitToSelection();
+			}
+
+			function updateEndDisplay() {
+				const val = parseFloat(endSlider.value).toFixed(2);
+				endDisplay.textContent = `${val}s`;
+				endInput.value = val;
+				// Ensure end > start
+				if (parseFloat(endSlider.value) <= parseFloat(startSlider.value)) {
+					startSlider.value = parseFloat(endSlider.value) - 0.01;
+					updateStartDisplay();
+				}
+				updateRangeOverlay();
+				if (audioBuffer) drawEnvelope(waveformContainer.offsetWidth * zoomLevel, waveformDiv.offsetHeight);
+				if (autoFitEnabled) fitToSelection();
+			}
+
+			// Event listeners for sliders
+			startSlider.addEventListener('input', updateStartDisplay);
+			endSlider.addEventListener('input', updateEndDisplay);
+			startInput.addEventListener('change', () => {
+				startSlider.value = startInput.value;
+				updateStartDisplay();
+			});
+			endInput.addEventListener('change', () => {
+				endSlider.value = endInput.value;
+				updateEndDisplay();
+			});
+
+			attackSlider.addEventListener('input', () => {
+				const val = parseFloat(attackSlider.value).toFixed(2);
+				attackDisplay.textContent = `${val}s`;
+				if (sampler) sampler.attack = parseFloat(val);
+				if (audioBuffer) drawEnvelope(waveformContainer.offsetWidth * zoomLevel, waveformDiv.offsetHeight);
+			});
+
+			releaseSlider.addEventListener('input', () => {
+				const val = parseFloat(releaseSlider.value).toFixed(2);
+				releaseDisplay.textContent = `${val}s`;
+				if (sampler) sampler.release = parseFloat(val);
+				if (audioBuffer) drawEnvelope(waveformContainer.offsetWidth * zoomLevel, waveformDiv.offsetHeight);
+			});
+
+			curveSelect.addEventListener('change', () => {
+				currentCurve = curveSelect.value;
+				if (sampler) sampler.curve = currentCurve;
+				if (audioBuffer) drawEnvelope(waveformContainer.offsetWidth * zoomLevel, waveformDiv.offsetHeight);
+			});
+
+			// Toggle buttons
+			reverseBtn.addEventListener('click', () => {
+				isReversed = !isReversed;
+				reverseBtn.textContent = `🔄 Reverse: ${isReversed ? 'ON' : 'OFF'}`;
+				reverseBtn.classList.toggle('active', isReversed);
+				if (sampler) sampler.reverse = isReversed;
+			});
+
+			loopBtn.addEventListener('click', () => {
+				isLooping = !isLooping;
+				loopBtn.textContent = `🔁 Loop: ${isLooping ? 'ON' : 'OFF'}`;
+				loopBtn.classList.toggle('active', isLooping);
+				if (sampler) sampler.loop = isLooping;
+			});
+
+			// Play buttons
+			playBtn.addEventListener('click', async () => {
+				if (!sampler) return;
+				await Tone.start();
+				
+				const start = parseFloat(startSlider.value);
+				const end = parseFloat(endSlider.value);
+				
+				// Use the new start/end parameters in triggerAttack
+				sampler.triggerAttack("C4", Tone.now(), 1, start, end);
+				
+				// Start playhead animation
+				startPlayhead(start, end);
+				
+				status.textContent = `Playing range: ${start.toFixed(2)}s - ${end.toFixed(2)}s ${isReversed ? '(reversed)' : ''}`;
+			});
+
+			playFullBtn.addEventListener('click', async () => {
+				if (!sampler) return;
+				await Tone.start();
+				
+				// Play full sample without start/end constraints
+				sampler.triggerAttack("C4", Tone.now(), 1);
+				
+				// Start playhead animation for full sample
+				startPlayhead(0, bufferDuration);
+				
+				status.textContent = `Playing full sample ${isReversed ? '(reversed)' : ''}`;
+			});
+
+			stopBtn.addEventListener('click', () => {
+				if (!sampler) return;
+				sampler.triggerRelease("C4", Tone.now());
+				stopPlayhead();
+				status.textContent = 'Stopped';
+			});
+
+			// Playhead animation
+			function startPlayhead(startPos, endPos) {
+				stopPlayhead(); // Stop any existing animation
+				
+				isPlaying = true;
+				playbackStartTime = Tone.now();
+				playbackStartPos = startPos;
+				playbackEndPos = endPos;
+				
+				playhead.style.display = 'block';
+				updatePlayhead();
+			}
+
+			function stopPlayhead() {
+				isPlaying = false;
+				if (animationFrameId) {
+					cancelAnimationFrame(animationFrameId);
+					animationFrameId = null;
+				}
+				playhead.style.display = 'none';
+			}
+
+			function updatePlayhead() {
+				if (!isPlaying || bufferDuration === 0) return;
+				
+				const elapsed = Tone.now() - playbackStartTime;
+				const duration = playbackEndPos - playbackStartPos;
+				
+				let currentPos;
+				if (isReversed) {
+					// When reversed, playhead moves from end to start
+					currentPos = playbackEndPos - elapsed;
+					if (currentPos < playbackStartPos) {
+						if (isLooping) {
+							playbackStartTime = Tone.now();
+							currentPos = playbackEndPos;
+						} else {
+							stopPlayhead();
+							return;
+						}
+					}
+				} else {
+					// Normal playback: playhead moves from start to end
+					currentPos = playbackStartPos + elapsed;
+					if (currentPos > playbackEndPos) {
+						if (isLooping) {
+							playbackStartTime = Tone.now();
+							currentPos = playbackStartPos;
+						} else {
+							stopPlayhead();
+							return;
+						}
+					}
+				}
+				
+				// Calculate position in pixels
+				const containerWidth = waveformContainer.offsetWidth;
+				const zoomedWidth = containerWidth * zoomLevel;
+				const xPos = (currentPos / bufferDuration) * zoomedWidth;
+				
+				playhead.style.left = `${xPos}px`;
+				
+				// Auto-scroll to keep playhead visible
+				const scrollLeft = waveformContainer.scrollLeft;
+				const visibleWidth = waveformContainer.offsetWidth;
+				if (xPos < scrollLeft + 50 || xPos > scrollLeft + visibleWidth - 50) {
+					waveformContainer.scrollLeft = xPos - visibleWidth / 2;
+				}
+				
+				animationFrameId = requestAnimationFrame(updatePlayhead);
+			}
+
+			// Zoom controls
+			function updateZoom(newZoom) {
+				zoomLevel = Math.max(1, Math.min(50, newZoom));
+				zoomSlider.value = zoomLevel;
+				zoomDisplay.textContent = `${zoomLevel.toFixed(1)}x`;
+				if (audioBuffer) {
+					drawWaveform(audioBuffer);
+					updateRangeOverlay();
+				}
+			}
+
+			zoomSlider.addEventListener('input', () => {
+				updateZoom(parseFloat(zoomSlider.value));
+			});
+
+			zoomInBtn.addEventListener('click', () => {
+				updateZoom(zoomLevel * 1.5);
+			});
+
+			zoomOutBtn.addEventListener('click', () => {
+				updateZoom(zoomLevel / 1.5);
+			});
+
+			zoomFitBtn.addEventListener('click', () => {
+				updateZoom(1);
+				waveformContainer.scrollLeft = 0;
+			});
+
+			zoomSelectionBtn.addEventListener('click', () => {
+				fitToSelection();
+			});
+
+			// Fit selection to view (reusable function)
+			function fitToSelection() {
+				if (bufferDuration === 0) return;
+				const start = parseFloat(startSlider.value);
+				const end = parseFloat(endSlider.value);
+				const selectionDuration = end - start;
+				if (selectionDuration <= 0) return;
+				
+				// Calculate zoom to fit selection exactly in view
+				const newZoom = bufferDuration / selectionDuration;
+				updateZoom(Math.min(newZoom, 50));
+				
+				// Scroll so start aligns with left edge
+				setTimeout(() => {
+					const containerWidth = waveformContainer.offsetWidth;
+					const zoomedWidth = containerWidth * zoomLevel;
+					const scrollTo = (start / bufferDuration) * zoomedWidth;
+					waveformContainer.scrollLeft = scrollTo;
+				}, 50);
+			}
+
+			// Auto-fit toggle
+			autoFitBtn.addEventListener('click', () => {
+				autoFitEnabled = !autoFitEnabled;
+				autoFitBtn.textContent = `🔒 Auto-fit: ${autoFitEnabled ? 'ON' : 'OFF'}`;
+				autoFitBtn.classList.toggle('active', autoFitEnabled);
+				if (autoFitEnabled && audioBuffer) {
+					fitToSelection();
+				} else if (!autoFitEnabled && audioBuffer) {
+					// When deactivated, reset to full view with no scroll
+					updateZoom(1);
+					waveformContainer.scrollLeft = 0;
+				}
+			});
+
+			// Mouse wheel zoom
+			waveformContainer.addEventListener('wheel', (e) => {
+				if (e.ctrlKey || e.metaKey) {
+					e.preventDefault();
+					const delta = e.deltaY > 0 ? 0.9 : 1.1;
+					updateZoom(zoomLevel * delta);
+				}
+			}, { passive: false });
+
+			// Enable controls after loading
+			function enableControls() {
+				playBtn.disabled = false;
+				playFullBtn.disabled = false;
+				stopBtn.disabled = false;
+			}
+		</script>
+	</body>
+</html>
diff --git a/package-lock.json b/package-lock.json
index 99de77df5..0c67391dd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1387,9 +1387,9 @@
 			"license": "Python-2.0"
 		},
 		"node_modules/@eslint/eslintrc/node_modules/js-yaml": {
-			"version": "4.1.0",
-			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-			"integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+			"integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -1423,19 +1423,32 @@
 			}
 		},
 		"node_modules/@eslint/plugin-kit": {
-			"version": "0.3.1",
-			"resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.1.tgz",
-			"integrity": "sha512-0J+zgWxHN+xXONWIyPWKFMgVuJoZuGiIFu8yxk7RJjxkzpGmyja5wRFqZIVtjDVOQpV+Rw0iOAjYPE2eQyjr0w==",
+			"version": "0.3.5",
+			"resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.5.tgz",
+			"integrity": "sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==",
 			"dev": true,
 			"license": "Apache-2.0",
 			"dependencies": {
-				"@eslint/core": "^0.14.0",
+				"@eslint/core": "^0.15.2",
 				"levn": "^0.4.1"
 			},
 			"engines": {
 				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
 			}
 		},
+		"node_modules/@eslint/plugin-kit/node_modules/@eslint/core": {
+			"version": "0.15.2",
+			"resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.15.2.tgz",
+			"integrity": "sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@types/json-schema": "^7.0.15"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			}
+		},
 		"node_modules/@gerrit0/mini-shiki": {
 			"version": "3.12.0",
 			"resolved": "https://registry.npmjs.org/@gerrit0/mini-shiki/-/mini-shiki-3.12.0.tgz",
@@ -3192,9 +3205,9 @@
 			}
 		},
 		"node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-			"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+			"integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -4301,24 +4314,24 @@
 			}
 		},
 		"node_modules/body-parser": {
-			"version": "1.20.3",
-			"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
-			"integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
+			"version": "1.20.4",
+			"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.4.tgz",
+			"integrity": "sha512-ZTgYYLMOXY9qKU/57FAo8F+HA2dGX7bqGc71txDRC1rS4frdFI5R7NhluHxH6M0YItAP0sHB4uqAOcYKxO6uGA==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"bytes": "3.1.2",
+				"bytes": "~3.1.2",
 				"content-type": "~1.0.5",
 				"debug": "2.6.9",
 				"depd": "2.0.0",
-				"destroy": "1.2.0",
-				"http-errors": "2.0.0",
-				"iconv-lite": "0.4.24",
-				"on-finished": "2.4.1",
-				"qs": "6.13.0",
-				"raw-body": "2.5.2",
+				"destroy": "~1.2.0",
+				"http-errors": "~2.0.1",
+				"iconv-lite": "~0.4.24",
+				"on-finished": "~2.4.1",
+				"qs": "~6.14.0",
+				"raw-body": "~2.5.3",
 				"type-is": "~1.6.18",
-				"unpipe": "1.0.0"
+				"unpipe": "~1.0.0"
 			},
 			"engines": {
 				"node": ">= 0.8",
@@ -4336,20 +4349,24 @@
 			}
 		},
 		"node_modules/body-parser/node_modules/http-errors": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
-			"integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
+			"integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"depd": "2.0.0",
-				"inherits": "2.0.4",
-				"setprototypeof": "1.2.0",
-				"statuses": "2.0.1",
-				"toidentifier": "1.0.1"
+				"depd": "~2.0.0",
+				"inherits": "~2.0.4",
+				"setprototypeof": "~1.2.0",
+				"statuses": "~2.0.2",
+				"toidentifier": "~1.0.1"
 			},
 			"engines": {
 				"node": ">= 0.8"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
 			}
 		},
 		"node_modules/body-parser/node_modules/ms": {
@@ -4359,26 +4376,10 @@
 			"dev": true,
 			"license": "MIT"
 		},
-		"node_modules/body-parser/node_modules/qs": {
-			"version": "6.13.0",
-			"resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
-			"integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
-			"dev": true,
-			"license": "BSD-3-Clause",
-			"dependencies": {
-				"side-channel": "^1.0.6"
-			},
-			"engines": {
-				"node": ">=0.6"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
 		"node_modules/body-parser/node_modules/statuses": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
-			"integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+			"integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
 			"dev": true,
 			"license": "MIT",
 			"engines": {
@@ -4404,9 +4405,9 @@
 			"license": "ISC"
 		},
 		"node_modules/brace-expansion": {
-			"version": "1.1.11",
-			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-			"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+			"version": "1.1.12",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+			"integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -5300,9 +5301,9 @@
 			}
 		},
 		"node_modules/cosmiconfig/node_modules/js-yaml": {
-			"version": "4.1.0",
-			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-			"integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+			"integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -6642,40 +6643,40 @@
 			"license": "ISC"
 		},
 		"node_modules/express": {
-			"version": "4.21.2",
-			"resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
-			"integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
+			"version": "4.22.1",
+			"resolved": "https://registry.npmjs.org/express/-/express-4.22.1.tgz",
+			"integrity": "sha512-F2X8g9P1X7uCPZMA3MVf9wcTqlyNp7IhH5qPCI0izhaOIYXaW9L535tGA3qmjRzpH+bZczqq7hVKxTR4NWnu+g==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"accepts": "~1.3.8",
 				"array-flatten": "1.1.1",
-				"body-parser": "1.20.3",
-				"content-disposition": "0.5.4",
+				"body-parser": "~1.20.3",
+				"content-disposition": "~0.5.4",
 				"content-type": "~1.0.4",
-				"cookie": "0.7.1",
-				"cookie-signature": "1.0.6",
+				"cookie": "~0.7.1",
+				"cookie-signature": "~1.0.6",
 				"debug": "2.6.9",
 				"depd": "2.0.0",
 				"encodeurl": "~2.0.0",
 				"escape-html": "~1.0.3",
 				"etag": "~1.8.1",
-				"finalhandler": "1.3.1",
-				"fresh": "0.5.2",
-				"http-errors": "2.0.0",
+				"finalhandler": "~1.3.1",
+				"fresh": "~0.5.2",
+				"http-errors": "~2.0.0",
 				"merge-descriptors": "1.0.3",
 				"methods": "~1.1.2",
-				"on-finished": "2.4.1",
+				"on-finished": "~2.4.1",
 				"parseurl": "~1.3.3",
-				"path-to-regexp": "0.1.12",
+				"path-to-regexp": "~0.1.12",
 				"proxy-addr": "~2.0.7",
-				"qs": "6.13.0",
+				"qs": "~6.14.0",
 				"range-parser": "~1.2.1",
 				"safe-buffer": "5.2.1",
-				"send": "0.19.0",
-				"serve-static": "1.16.2",
+				"send": "~0.19.0",
+				"serve-static": "~1.16.2",
 				"setprototypeof": "1.2.0",
-				"statuses": "2.0.1",
+				"statuses": "~2.0.1",
 				"type-is": "~1.6.18",
 				"utils-merge": "1.0.1",
 				"vary": "~1.1.2"
@@ -6732,22 +6733,6 @@
 			"dev": true,
 			"license": "MIT"
 		},
-		"node_modules/express/node_modules/qs": {
-			"version": "6.13.0",
-			"resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
-			"integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
-			"dev": true,
-			"license": "BSD-3-Clause",
-			"dependencies": {
-				"side-channel": "^1.0.6"
-			},
-			"engines": {
-				"node": ">=0.6"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
 		"node_modules/express/node_modules/statuses": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
@@ -7337,9 +7322,9 @@
 			"license": "BSD-2-Clause"
 		},
 		"node_modules/glob/node_modules/brace-expansion": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-			"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+			"integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -8688,9 +8673,9 @@
 			}
 		},
 		"node_modules/koa": {
-			"version": "2.16.1",
-			"resolved": "https://registry.npmjs.org/koa/-/koa-2.16.1.tgz",
-			"integrity": "sha512-umfX9d3iuSxTQP4pnzLOz0HKnPg0FaUUIKcye2lOiz3KPu1Y3M3xlz76dISdFPQs37P9eJz1wUpcTS6KDPn9fA==",
+			"version": "2.16.3",
+			"resolved": "https://registry.npmjs.org/koa/-/koa-2.16.3.tgz",
+			"integrity": "sha512-zPPuIt+ku1iCpFBRwseMcPYQ1cJL8l60rSmKeOuGfOXyE6YnTBmf2aEFNL2HQGrD0cPcLO/t+v9RTgC+fwEh/g==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -9397,9 +9382,9 @@
 			"license": "Python-2.0"
 		},
 		"node_modules/mocha/node_modules/brace-expansion": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-			"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+			"integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -9417,9 +9402,9 @@
 			}
 		},
 		"node_modules/mocha/node_modules/js-yaml": {
-			"version": "4.1.0",
-			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-			"integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+			"integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -10502,9 +10487,9 @@
 			}
 		},
 		"node_modules/qs": {
-			"version": "6.14.0",
-			"resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz",
-			"integrity": "sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==",
+			"version": "6.14.1",
+			"resolved": "https://registry.npmjs.org/qs/-/qs-6.14.1.tgz",
+			"integrity": "sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==",
 			"dev": true,
 			"license": "BSD-3-Clause",
 			"dependencies": {
@@ -10559,42 +10544,46 @@
 			}
 		},
 		"node_modules/raw-body": {
-			"version": "2.5.2",
-			"resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
-			"integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
+			"version": "2.5.3",
+			"resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.3.tgz",
+			"integrity": "sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"bytes": "3.1.2",
-				"http-errors": "2.0.0",
-				"iconv-lite": "0.4.24",
-				"unpipe": "1.0.0"
+				"bytes": "~3.1.2",
+				"http-errors": "~2.0.1",
+				"iconv-lite": "~0.4.24",
+				"unpipe": "~1.0.0"
 			},
 			"engines": {
 				"node": ">= 0.8"
 			}
 		},
 		"node_modules/raw-body/node_modules/http-errors": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
-			"integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
+			"integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"depd": "2.0.0",
-				"inherits": "2.0.4",
-				"setprototypeof": "1.2.0",
-				"statuses": "2.0.1",
-				"toidentifier": "1.0.1"
+				"depd": "~2.0.0",
+				"inherits": "~2.0.4",
+				"setprototypeof": "~1.2.0",
+				"statuses": "~2.0.2",
+				"toidentifier": "~1.0.1"
 			},
 			"engines": {
 				"node": ">= 0.8"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
 			}
 		},
 		"node_modules/raw-body/node_modules/statuses": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
-			"integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+			"integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
 			"dev": true,
 			"license": "MIT",
 			"engines": {
@@ -12454,9 +12443,9 @@
 			}
 		},
 		"node_modules/typedoc/node_modules/brace-expansion": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-			"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+			"integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {

From e38bc2c03077e75c499fd8badc68e56bf440c791 Mon Sep 17 00:00:00 2001
From: LoopBraker <carrieta@udemedellin.edu.co>
Date: Sat, 3 Jan 2026 16:11:12 -0500
Subject: [PATCH 4/4] Attack fades in at the start position, Release fades out
 completing exactly at the end position

---
 Tone/instrument/Sampler.ts       |  11 +-
 examples/js/ExampleList.json     |   3 +-
 examples/samplerRangeModern.html | 786 +++++++++++++++++++++++++++++++
 3 files changed, 796 insertions(+), 4 deletions(-)
 create mode 100644 examples/samplerRangeModern.html

diff --git a/Tone/instrument/Sampler.ts b/Tone/instrument/Sampler.ts
index a5b264071..de217950a 100644
--- a/Tone/instrument/Sampler.ts
+++ b/Tone/instrument/Sampler.ts
@@ -258,6 +258,9 @@ export class Sampler extends Instrument<SamplerOptions> {
 			let offset: number;
 			let duration: number | undefined;
 
+			// Get the release time in seconds for duration adjustment
+			const releaseSeconds = this.toSeconds(this.release);
+
 			if (this._reverse) {
 				// Reverse the buffer if not already reversed
 				if (!buffer.reverse) {
@@ -270,7 +273,9 @@ export class Sampler extends Instrument<SamplerOptions> {
 					const endSeconds = this.toSeconds(end);
 					// In reversed buffer: offset = buffer.duration - end (where we want to start from)
 					offset = buffer.duration - endSeconds;
-					duration = (endSeconds - startSeconds) / playbackRate;
+					// Subtract release time so fadeout completes exactly at 'start' position
+					const rangeDuration = (endSeconds - startSeconds) / playbackRate;
+					duration = Math.max(0, rangeDuration - releaseSeconds);
 				} else {
 					// No custom range, play from beginning of reversed buffer
 					offset = this.toSeconds(defaultArg(this._loopStart, 0));
@@ -289,7 +294,9 @@ export class Sampler extends Instrument<SamplerOptions> {
 				if (start !== undefined && end !== undefined) {
 					const startSeconds = this.toSeconds(start);
 					const endSeconds = this.toSeconds(end);
-					duration = (endSeconds - startSeconds) / playbackRate;
+					// Subtract release time so fadeout completes exactly at 'end' position
+					const rangeDuration = (endSeconds - startSeconds) / playbackRate;
+					duration = Math.max(0, rangeDuration - releaseSeconds);
 				} else if (this._loop) {
 					duration = undefined;
 				} else {
diff --git a/examples/js/ExampleList.json b/examples/js/ExampleList.json
index 9593abe4c..823c66147 100644
--- a/examples/js/ExampleList.json
+++ b/examples/js/ExampleList.json
@@ -16,8 +16,7 @@
 		"FatOscillator" : "jump",
 		"MetalSynth" : "bembe",
 		"Granular Synthesis" : "grainPlayer",
-		"Sampler" : "sampler",
-		"Sampler Range" : "samplerRange"
+		"Sampler" : "sampler"
 	},
 	"Effects" : {
 		"LFO Effects" : "lfoEffects",
diff --git a/examples/samplerRangeModern.html b/examples/samplerRangeModern.html
new file mode 100644
index 000000000..21fad54b3
--- /dev/null
+++ b/examples/samplerRangeModern.html
@@ -0,0 +1,786 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<title>Sampler Range Playback</title>
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1, maximum-scale=1"
+		/>
+		<link
+			href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto:400,500,700&display=swap"
+			rel="stylesheet"
+		/>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
+		<script src="../build/Tone.js"></script>
+		<script src="./js/tone-ui.js"></script>
+		<script src="./js/components.js"></script>
+	</head>
+	<body>
+		<style type="text/css">
+			:root {
+				--bg-dark: #1e1e1e;
+				--bg-panel: #2b2b2b;
+				--text-main: #e0e0e0;
+				--text-dim: #888888;
+				--accent-yellow: #ffca28;
+				--accent-teal: rgba(0, 150, 136, 0.3);
+				--accent-teal-border: #009688;
+				--waveform-gray: #555555;
+				--waveform-bg: #111111;
+			}
+
+			body {
+				background-color: var(--bg-dark);
+				color: var(--text-main);
+				font-family: "Roboto", sans-serif;
+				margin: 0;
+				padding: 20px;
+			}
+
+			/* Main Container */
+			.daw-container {
+				max-width: 950px;
+				margin: 0 auto;
+				background: var(--bg-panel);
+				padding: 20px;
+				border-radius: 6px;
+				box-shadow: 0 8px 20px rgba(0,0,0,0.5);
+			}
+
+			h2 {
+				margin-top: 0;
+				font-size: 1.1rem;
+				color: var(--text-dim);
+				text-transform: uppercase;
+				letter-spacing: 1px;
+			}
+
+			/* Controls Grid */
+			.controls-grid {
+				display: grid;
+				grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+				gap: 15px;
+				margin-bottom: 20px;
+			}
+
+			.control-row {
+				display: flex;
+				align-items: center;
+				gap: 10px;
+				background: #333;
+				padding: 8px 12px;
+				border-radius: 4px;
+			}
+
+			label {
+				font-size: 0.75rem;
+				font-weight: 700;
+				color: var(--text-dim);
+				text-transform: uppercase;
+				min-width: 80px;
+			}
+
+			/* Sliders */
+			input[type="range"] {
+				flex: 1;
+				-webkit-appearance: none;
+				background: transparent;
+			}
+			input[type="range"]::-webkit-slider-runnable-track {
+				height: 4px;
+				background: #555;
+				border-radius: 2px;
+			}
+			input[type="range"]::-webkit-slider-thumb {
+				-webkit-appearance: none;
+				height: 14px;
+				width: 14px;
+				border-radius: 50%;
+				background: var(--accent-yellow);
+				margin-top: -5px;
+				cursor: pointer;
+			}
+
+			/* Inputs */
+			input[type="number"], select {
+				background: #222;
+				border: 1px solid #444;
+				color: var(--accent-yellow);
+				font-family: "Roboto Mono", monospace;
+				padding: 4px;
+				border-radius: 3px;
+				width: 70px;
+				text-align: right;
+			}
+
+			.value-display {
+				font-family: "Roboto Mono", monospace;
+				font-size: 0.85rem;
+				color: var(--accent-yellow);
+				min-width: 60px;
+				text-align: right;
+			}
+
+			/* Waveform Area */
+			#waveformContainer {
+				width: 100%;
+				height: 140px; /* Matched to original height feel */
+				background: var(--waveform-bg);
+				border: 1px solid #333;
+				border-radius: 4px;
+				overflow-x: auto;
+				overflow-y: hidden;
+				position: relative;
+				margin: 15px 0;
+				/* Custom Scrollbar */
+				scrollbar-width: thin;
+				scrollbar-color: #444 #222;
+			}
+			#waveformContainer::-webkit-scrollbar { height: 8px; }
+			#waveformContainer::-webkit-scrollbar-track { background: #222; }
+			#waveformContainer::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
+
+			#waveform {
+				height: 120px; /* Space for ruler */
+				position: relative;
+				min-width: 100%;
+			}
+
+			/* Canvas Layering */
+			#waveform canvas {
+				position: absolute;
+				top: 0;
+				left: 0;
+				height: 100%;
+				display: block;
+			}
+			#waveformCanvas { z-index: 1; }
+			#envelopeCanvas { z-index: 2; pointer-events: none; }
+
+			/* Playhead */
+			#playhead {
+				position: absolute;
+				top: 0;
+				height: 100%;
+				width: 1px;
+				background: #fff;
+				z-index: 10;
+				display: none;
+				box-shadow: 0 0 4px rgba(255,255,255,0.8);
+				pointer-events: none;
+			}
+			#playhead::before {
+				content: '';
+				position: absolute;
+				top: 0; left: -4px;
+				border-left: 4px solid transparent;
+				border-right: 4px solid transparent;
+				border-top: 6px solid #fff;
+			}
+
+			/* Time Ruler */
+			#timeRuler {
+				height: 20px;
+				background: #1a1a1a;
+				border-top: 1px solid #333;
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				z-index: 5;
+				font-family: "Roboto Mono", monospace;
+				font-size: 10px;
+				color: #666;
+				overflow: hidden;
+			}
+			.time-marker {
+				position: absolute;
+				top: 0;
+				height: 100%;
+				border-left: 1px solid #444;
+				padding-left: 3px;
+			}
+
+			/* Buttons */
+			.button-row {
+				display: flex;
+				gap: 10px;
+				margin-top: 20px;
+				flex-wrap: wrap;
+			}
+			button {
+				background: #444;
+				color: white;
+				border: none;
+				padding: 10px 18px;
+				border-radius: 4px;
+				cursor: pointer;
+				font-weight: bold;
+				text-transform: uppercase;
+				font-size: 0.75rem;
+				letter-spacing: 0.5px;
+				transition: background 0.2s;
+			}
+			button:hover:not(:disabled) { background: #555; }
+			button:disabled { opacity: 0.5; cursor: not-allowed; }
+			button.toggle-btn.active {
+				background: var(--accent-teal-border);
+				color: white;
+				box-shadow: 0 0 8px rgba(0, 150, 136, 0.4);
+			}
+
+			/* Zoom Toolbar */
+			.zoom-controls {
+				display: flex;
+				align-items: center;
+				gap: 10px;
+				margin-bottom: 5px;
+				background: #252525;
+				padding: 5px 10px;
+				border-radius: 4px 4px 0 0;
+			}
+			.zoom-controls button {
+				padding: 2px 10px;
+				font-size: 14px;
+				min-width: 30px;
+			}
+
+			#status {
+				margin-top: 10px;
+				font-family: "Roboto Mono", monospace;
+				font-size: 0.8rem;
+				color: #888;
+			}
+		</style>
+
+		<div class="daw-container">
+			<h2>Sampler Range & Loop</h2>
+
+			<!-- Zoom Toolbar -->
+			<div class="zoom-controls">
+				<label>Zoom</label>
+				<button id="zoomOutBtn">−</button>
+				<input type="range" id="zoomSlider" min="1" max="50" step="0.5" value="1" style="width: 100px;" />
+				<button id="zoomInBtn">+</button>
+				<span id="zoomDisplay" class="value-display" style="text-align: center; width: 50px;">1.0x</span>
+				<div style="flex:1"></div>
+				<button id="zoomFitBtn">Fit View</button>
+				<button id="zoomSelectionBtn" disabled>Zoom Selection</button>
+			</div>
+
+			<!-- Waveform Display -->
+			<div id="waveformContainer">
+				<div id="waveform">
+					<canvas id="waveformCanvas"></canvas>
+					<canvas id="envelopeCanvas"></canvas>
+					<div id="playhead"></div>
+				</div>
+				<div id="timeRuler"></div>
+			</div>
+
+			<!-- Controls -->
+			<div class="controls-grid">
+				<!-- File -->
+				<div class="control-row">
+					<label>File</label>
+					<input type="file" id="fileInput" accept=".wav,.mp3,.ogg,.flac" style="font-size: 0.8rem; color: #aaa;" />
+				</div>
+				<!-- Start -->
+				<div class="control-row">
+					<label>Start</label>
+					<input type="range" id="startSlider" min="0" max="10" step="0.01" value="0" />
+					<span class="value-display" id="startDisplay">0.00s</span>
+				</div>
+				<!-- End -->
+				<div class="control-row">
+					<label>End</label>
+					<input type="range" id="endSlider" min="0" max="10" step="0.01" value="1" />
+					<span class="value-display" id="endDisplay">1.00s</span>
+				</div>
+				<!-- Envelope -->
+				<div class="control-row">
+					<label>Att/Rel</label>
+					<input type="number" id="attackInput" min="0" step="0.01" value="0.01">
+					<input type="number" id="releaseInput" min="0" step="0.01" value="0.1">
+					<select id="curveSelect" style="width: auto;">
+						<option value="exponential" selected>Exp</option>
+						<option value="linear">Lin</option>
+					</select>
+				</div>
+			</div>
+
+			<!-- Buttons -->
+			<div class="button-row">
+				<button id="reverseBtn" class="toggle-btn">🔄 Reverse</button>
+				<button id="loopBtn" class="toggle-btn">🔁 Loop</button>
+				<div style="flex:1"></div>
+				<button id="playBtn" disabled>▶ Play Range</button>
+				<button id="playFullBtn" disabled>▶ Play Full</button>
+				<button id="stopBtn" disabled>⏹ Stop</button>
+			</div>
+
+			<div id="status">Upload a sample...</div>
+		</div>
+
+		<script type="text/javascript">
+			// State
+			let sampler = null;
+			let bufferDuration = 0;
+			let audioBuffer = null;
+			let zoomLevel = 1;
+			
+			let isReversed = false;
+			let isLooping = false;
+			let isPlaying = false;
+			let playbackStartTime = 0;
+			let playbackStartPos = 0;
+			let playbackEndPos = 0;
+			let animationFrameId = null;
+
+			// DOM Elements
+			const els = {
+				fileInput: document.getElementById('fileInput'),
+				startSlider: document.getElementById('startSlider'),
+				endSlider: document.getElementById('endSlider'),
+				startDisplay: document.getElementById('startDisplay'),
+				endDisplay: document.getElementById('endDisplay'),
+				attackInput: document.getElementById('attackInput'),
+				releaseInput: document.getElementById('releaseInput'),
+				curveSelect: document.getElementById('curveSelect'),
+				waveformContainer: document.getElementById('waveformContainer'),
+				waveformDiv: document.getElementById('waveform'),
+				waveformCanvas: document.getElementById('waveformCanvas'),
+				envelopeCanvas: document.getElementById('envelopeCanvas'),
+				playhead: document.getElementById('playhead'),
+				timeRuler: document.getElementById('timeRuler'),
+				status: document.getElementById('status'),
+				
+				playBtn: document.getElementById('playBtn'),
+				playFullBtn: document.getElementById('playFullBtn'),
+				stopBtn: document.getElementById('stopBtn'),
+				reverseBtn: document.getElementById('reverseBtn'),
+				loopBtn: document.getElementById('loopBtn'),
+				
+				zoomSlider: document.getElementById('zoomSlider'),
+				zoomDisplay: document.getElementById('zoomDisplay'),
+				zoomIn: document.getElementById('zoomInBtn'),
+				zoomOut: document.getElementById('zoomOutBtn'),
+				zoomFit: document.getElementById('zoomFitBtn'),
+				zoomSelection: document.getElementById('zoomSelectionBtn')
+			};
+
+			// 1. File Upload Logic
+			els.fileInput.addEventListener('change', async (e) => {
+				const file = e.target.files[0];
+				if (!file) return;
+
+				els.status.textContent = 'Loading sample...';
+
+				try {
+					const arrayBuffer = await file.arrayBuffer();
+					const ctx = Tone.getContext().rawContext;
+					audioBuffer = await ctx.decodeAudioData(arrayBuffer);
+					bufferDuration = audioBuffer.duration;
+
+					if (sampler) sampler.dispose();
+
+					sampler = new Tone.Sampler({
+						urls: { C4: new Tone.ToneAudioBuffer(audioBuffer) },
+						attack: parseFloat(els.attackInput.value),
+						release: parseFloat(els.releaseInput.value),
+						curve: els.curveSelect.value,
+						onload: () => {
+							els.status.textContent = `Loaded: ${file.name}`;
+							enableControls();
+						}
+					}).toDestination();
+
+					// Update Sliders
+					els.startSlider.max = bufferDuration;
+					els.endSlider.max = bufferDuration;
+					els.endSlider.value = bufferDuration;
+					updateDisplays();
+					
+					// Draw Waveform
+					drawWaveform(audioBuffer);
+
+				} catch (err) {
+					els.status.textContent = 'Error: ' + err.message;
+					console.error(err);
+				}
+			});
+
+			function enableControls() {
+				els.playBtn.disabled = false;
+				els.playFullBtn.disabled = false;
+				els.stopBtn.disabled = false;
+				els.zoomSelection.disabled = false;
+			}
+
+			// 2. Waveform Drawing Logic (Preserved shape/style)
+			function drawWaveform(buffer) {
+				if (!buffer) return;
+
+				const canvas = els.waveformCanvas;
+				const ctx = canvas.getContext('2d');
+				const dpr = window.devicePixelRatio || 1;
+				
+				const containerWidth = els.waveformContainer.offsetWidth;
+				const zoomedWidth = containerWidth * zoomLevel;
+				const height = 120; // Height inside waveform div
+
+				// Size Elements
+				els.waveformDiv.style.width = `${zoomedWidth}px`;
+				canvas.style.width = `${zoomedWidth}px`;
+				canvas.style.height = `${height}px`;
+				canvas.width = zoomedWidth * dpr;
+				canvas.height = height * dpr;
+				ctx.scale(dpr, dpr);
+
+				// Prepare drawing
+				const data = buffer.getChannelData(0);
+				const step = Math.ceil(data.length / zoomedWidth);
+				const amp = height / 2;
+
+				const startVal = parseFloat(els.startSlider.value);
+				const endVal = parseFloat(els.endSlider.value);
+				const pxPerSec = zoomedWidth / bufferDuration;
+				const startPx = startVal * pxPerSec;
+				const endPx = endVal * pxPerSec;
+				const widthPx = endPx - startPx;
+
+				// Clear
+				ctx.clearRect(0, 0, zoomedWidth, height);
+
+				// -- Layer 1: Background Teal (Loop Region) --
+				// This replicates the "inside range" background color
+				ctx.fillStyle = 'rgba(0, 150, 136, 0.25)';
+				ctx.fillRect(startPx, 0, widthPx, height);
+				
+				// -- Layer 2: Range Borders --
+				ctx.strokeStyle = '#009688';
+				ctx.lineWidth = 2;
+				ctx.beginPath();
+				ctx.moveTo(startPx, 0); ctx.lineTo(startPx, height);
+				ctx.moveTo(endPx, 0); ctx.lineTo(endPx, height);
+				ctx.stroke();
+
+				// Handles (Triangles)
+				drawHandle(ctx, startPx, true);
+				drawHandle(ctx, endPx, false);
+
+				// -- Layer 3: The Waveform --
+				// Function to draw the wave path based on audio data
+				const drawPath = () => {
+					ctx.beginPath();
+					for (let i = 0; i < zoomedWidth; i++) {
+						let min = 1.0;
+						let max = -1.0;
+						// Optimization for loops to avoid UI freezing
+						const sampleIdx = Math.floor(i * step);
+						const iterStep = Math.max(1, Math.floor(step/10));
+						
+						for (let j = 0; j < step; j += iterStep) {
+							const datum = data[sampleIdx + j];
+							if (datum < min) min = datum;
+							if (datum > max) max = datum;
+						}
+						// Draw vertical line for this pixel
+						ctx.lineTo(i, (1 + min) * amp);
+						ctx.lineTo(i, (1 + max) * amp);
+					}
+					ctx.stroke();
+				};
+
+				// A. Draw GRAY waveform everywhere (Outside range)
+				ctx.strokeStyle = '#555555'; // Gray inactive color
+				ctx.lineWidth = 1;
+				drawPath();
+
+				// B. Draw YELLOW waveform ONLY inside the range (Clipped)
+				ctx.save();
+				ctx.beginPath();
+				ctx.rect(startPx, 0, widthPx, height);
+				ctx.clip(); // Restrict drawing to range box
+				
+				ctx.strokeStyle = '#ffca28'; // Yellow active color
+				ctx.lineWidth = 1;
+				drawPath();
+				ctx.restore();
+
+				// Updates
+				drawRuler(zoomedWidth);
+				drawEnvelope(zoomedWidth, height);
+			}
+
+			function drawHandle(ctx, x, isLeft) {
+				ctx.fillStyle = '#bbb';
+				ctx.beginPath();
+				if(isLeft) {
+					ctx.moveTo(x, 0); ctx.lineTo(x+10, 0); ctx.lineTo(x, 10);
+				} else {
+					ctx.moveTo(x, 0); ctx.lineTo(x-10, 0); ctx.lineTo(x, 10);
+				}
+				ctx.fill();
+			}
+
+			// 3. Envelope Drawing (Overlay)
+			function drawEnvelope(width, height) {
+				const canvas = els.envelopeCanvas;
+				const ctx = canvas.getContext('2d');
+				const dpr = window.devicePixelRatio || 1;
+				
+				canvas.style.width = `${width}px`;
+				canvas.style.height = `${height}px`;
+				canvas.width = width * dpr;
+				canvas.height = height * dpr;
+				ctx.scale(dpr, dpr);
+				
+				if (!bufferDuration) return;
+
+				const start = parseFloat(els.startSlider.value);
+				const end = parseFloat(els.endSlider.value);
+				const attack = parseFloat(els.attackInput.value);
+				const release = parseFloat(els.releaseInput.value);
+
+				const pxPerSec = width / bufferDuration;
+				const startPx = start * pxPerSec;
+				const endPx = end * pxPerSec;
+				const attPx = attack * pxPerSec;
+				const relPx = release * pxPerSec;
+				
+				if (end <= start) return;
+
+				ctx.strokeStyle = 'rgba(255, 255, 255, 0.6)';
+				ctx.lineWidth = 2;
+				ctx.beginPath();
+				
+				// Start bottom left
+				ctx.moveTo(startPx, height);
+				
+				const isExp = els.curveSelect.value === 'exponential';
+				
+				// Attack Curve
+				if (isExp) {
+					ctx.bezierCurveTo(startPx, height, startPx + attPx/2, 5, startPx + attPx, 5);
+				} else {
+					ctx.lineTo(startPx + attPx, 5);
+				}
+				
+				// Sustain
+				ctx.lineTo(endPx - relPx, 5);
+				
+				// Release Curve
+				if (isExp) {
+					ctx.bezierCurveTo(endPx - relPx/2, 5, endPx, height, endPx, height);
+				} else {
+					ctx.lineTo(endPx, height);
+				}
+				
+				ctx.stroke();
+			}
+
+			function drawRuler(width) {
+				els.timeRuler.innerHTML = '';
+				els.timeRuler.style.width = `${width}px`;
+				
+				if (!bufferDuration) return;
+				
+				const pxPerSec = width / bufferDuration;
+				let interval = 1;
+				if (pxPerSec > 150) interval = 0.5;
+				else if (pxPerSec < 20) interval = 5;
+
+				for (let t = 0; t <= bufferDuration; t += interval) {
+					const x = (t / bufferDuration) * width;
+					const m = document.createElement('div');
+					m.className = 'time-marker';
+					m.style.left = `${x}px`;
+					m.textContent = t.toFixed(1);
+					els.timeRuler.appendChild(m);
+				}
+			}
+
+			// 4. Zoom Logic (Original behavior)
+			function updateZoom(newZoom) {
+				zoomLevel = Math.max(1, Math.min(50, newZoom));
+				els.zoomSlider.value = zoomLevel;
+				els.zoomDisplay.textContent = `${zoomLevel.toFixed(1)}x`;
+				if (audioBuffer) drawWaveform(audioBuffer);
+			}
+
+			els.zoomSlider.addEventListener('input', () => updateZoom(parseFloat(els.zoomSlider.value)));
+			els.zoomIn.addEventListener('click', () => updateZoom(zoomLevel * 1.5));
+			els.zoomOut.addEventListener('click', () => updateZoom(zoomLevel / 1.5));
+			els.zoomFit.addEventListener('click', () => {
+				updateZoom(1);
+				els.waveformContainer.scrollLeft = 0;
+			});
+			els.zoomSelection.addEventListener('click', () => {
+				if(!bufferDuration) return;
+				const start = parseFloat(els.startSlider.value);
+				const end = parseFloat(els.endSlider.value);
+				const dur = end - start;
+				if(dur <= 0) return;
+				const newZoom = bufferDuration / dur;
+				updateZoom(newZoom);
+				setTimeout(() => {
+					const w = els.waveformContainer.offsetWidth * zoomLevel;
+					els.waveformContainer.scrollLeft = (start / bufferDuration) * w;
+				}, 10);
+			});
+			els.waveformContainer.addEventListener('wheel', (e) => {
+				if(e.ctrlKey || e.metaKey) {
+					e.preventDefault();
+					const delta = e.deltaY > 0 ? 0.9 : 1.1;
+					updateZoom(zoomLevel * delta);
+				}
+			}, {passive:false});
+
+
+			// 5. Update & Playback Logic
+			function updateDisplays() {
+				// Ensure start < end
+				let s = parseFloat(els.startSlider.value);
+				let e = parseFloat(els.endSlider.value);
+				if (s >= e) {
+					if (document.activeElement === els.startSlider) els.endSlider.value = s + 0.01;
+					else els.startSlider.value = e - 0.01;
+				}
+				
+				els.startDisplay.textContent = parseFloat(els.startSlider.value).toFixed(2) + 's';
+				els.endDisplay.textContent = parseFloat(els.endSlider.value).toFixed(2) + 's';
+				
+				if(audioBuffer) {
+					drawWaveform(audioBuffer); // Redraws masks
+				}
+			}
+
+			[els.startSlider, els.endSlider].forEach(el => el.addEventListener('input', updateDisplays));
+			[els.attackInput, els.releaseInput, els.curveSelect].forEach(el => el.addEventListener('input', () => {
+				if(sampler) {
+					sampler.attack = parseFloat(els.attackInput.value);
+					sampler.release = parseFloat(els.releaseInput.value);
+					sampler.curve = els.curveSelect.value;
+				}
+				drawEnvelope(els.waveformDiv.offsetWidth, 120);
+			}));
+
+
+			// --- PLAYBACK ---
+			
+			els.reverseBtn.addEventListener('click', () => {
+				isReversed = !isReversed;
+				els.reverseBtn.classList.toggle('active', isReversed);
+				if(sampler) sampler.reverse = isReversed;
+			});
+			els.loopBtn.addEventListener('click', () => {
+				isLooping = !isLooping;
+				els.loopBtn.classList.toggle('active', isLooping);
+				if(audioBuffer) drawWaveform(audioBuffer);
+			});
+
+			els.playBtn.addEventListener('click', async () => {
+				if (!sampler) return;
+				await Tone.start();
+				const start = parseFloat(els.startSlider.value);
+				const end = parseFloat(els.endSlider.value);
+				
+				// RESTORED ORIGINAL PLAY LINE:
+				// Passing 'start' and 'end' as originally requested. 
+				// Note: if audio stops abruptly on short loops, check Attack/Release settings vs Loop duration.
+				sampler.triggerAttack("C4", Tone.now(), 1, start, end);
+				
+				startPlayhead(start, end);
+				els.status.textContent = `Playing Range: ${start.toFixed(2)} - ${end.toFixed(2)}`;
+			});
+
+			els.playFullBtn.addEventListener('click', async () => {
+				if (!sampler) return;
+				await Tone.start();
+				// Full play usually triggers just the note
+				sampler.triggerAttack("C4", Tone.now(), 1);
+				
+				startPlayhead(0, bufferDuration);
+				els.status.textContent = 'Playing Full Sample';
+			});
+
+			els.stopBtn.addEventListener('click', () => {
+				if (!sampler) return;
+				// RESTORED ORIGINAL STOP LINE:
+				sampler.triggerRelease("C4", Tone.now());
+				stopPlayhead();
+				els.status.textContent = 'Stopped';
+			});
+
+			function startPlayhead(start, end) {
+				stopPlayhead();
+				isPlaying = true;
+				playbackStartTime = Tone.now();
+				playbackStartPos = start;
+				playbackEndPos = end;
+				els.playhead.style.display = 'block';
+				updatePlayhead();
+			}
+
+			function stopPlayhead() {
+				isPlaying = false;
+				if(animationFrameId) cancelAnimationFrame(animationFrameId);
+				els.playhead.style.display = 'none';
+			}
+
+			function updatePlayhead() {
+				if(!isPlaying || !bufferDuration) return;
+				
+				const elapsed = Tone.now() - playbackStartTime;
+				let currentPos;
+
+				if (isReversed) {
+					currentPos = playbackEndPos - elapsed;
+					if (currentPos < playbackStartPos) {
+						if (isLooping) {
+							playbackStartTime = Tone.now();
+							// Retriggering logic for loop visualization
+							// In real-world apps, sampler.loop would handle this, 
+							// but for this visualization we reset:
+							sampler.triggerAttack("C4", Tone.now(), 1, playbackStartPos, playbackEndPos);
+							currentPos = playbackEndPos;
+						} else {
+							stopPlayhead();
+							return;
+						}
+					}
+				} else {
+					currentPos = playbackStartPos + elapsed;
+					if (currentPos > playbackEndPos) {
+						if (isLooping) {
+							playbackStartTime = Tone.now();
+							sampler.triggerAttack("C4", Tone.now(), 1, playbackStartPos, playbackEndPos);
+							currentPos = playbackStartPos;
+						} else {
+							stopPlayhead();
+							return;
+						}
+					}
+				}
+
+				// Position Playhead
+				const containerWidth = els.waveformContainer.offsetWidth;
+				const zoomedWidth = containerWidth * zoomLevel;
+				const px = (currentPos / bufferDuration) * zoomedWidth;
+				
+				els.playhead.style.left = `${px}px`;
+
+				// Scroll Follow
+				const scrollLeft = els.waveformContainer.scrollLeft;
+				const visibleWidth = els.waveformContainer.offsetWidth;
+				if (px > scrollLeft + visibleWidth || px < scrollLeft) {
+					els.waveformContainer.scrollLeft = px - (visibleWidth / 2);
+				}
+
+				animationFrameId = requestAnimationFrame(updatePlayhead);
+			}
+
+		</script>
+	</body>
+</html>
\ No newline at end of file