diff --git a/src/App.svelte b/src/App.svelte
index 37a2923..0c5d492 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -52,6 +52,7 @@
let duration = $state(loadDuration());
let volume = $state(loadVolume());
let playbackPosition = $state(-1);
+ let cuePoint = $state(0);
let waveformColor = $state(generateRandomColor());
let showModal = $state(true);
let isProcessed = $state(false);
@@ -195,7 +196,7 @@
onProcess: processSound,
onDownload: download,
onUndo: undo,
- onPlayFromStart: replaySound,
+ onPlayFromStart: togglePlayback,
onDurationDecrease: (large) => {
duration = Math.max(0.05, duration - (large ? 1 : 0.05));
},
@@ -267,6 +268,7 @@
pitchLock,
);
currentBuffer = audioService.createAudioBuffer(data);
+ cuePoint = 0;
audioService.play(currentBuffer);
}
@@ -276,9 +278,15 @@
}
}
- function playFromPosition(offset: number) {
- if (currentBuffer) {
- audioService.play(currentBuffer, offset);
+ function setCuePoint(offset: number) {
+ cuePoint = offset;
+ }
+
+ function togglePlayback() {
+ if (playbackPosition >= 0) {
+ audioService.stop();
+ } else if (currentBuffer) {
+ audioService.play(currentBuffer, cuePoint);
}
}
@@ -673,10 +681,11 @@
buffer={currentBuffer}
color={waveformColor}
{playbackPosition}
+ {cuePoint}
{selectionStart}
{selectionEnd}
onselectionchange={handleSelectionChange}
- onclick={playFromPosition}
+ onclick={setCuePoint}
/>
{/if}
@@ -705,7 +714,7 @@
>
{#if showProcessorPopup}
-
+
void;
@@ -15,6 +16,7 @@
buffer,
color = '#646cff',
playbackPosition = 0,
+ cuePoint = 0,
selectionStart = null,
selectionEnd = null,
onselectionchange,
@@ -43,6 +45,7 @@
buffer;
color;
playbackPosition;
+ cuePoint;
selectionStart;
selectionEnd;
draw();
@@ -251,6 +254,16 @@
const duration = buffer.length / buffer.sampleRate;
const x = (playbackPosition / duration) * width;
+ ctx.strokeStyle = '#fff';
+ ctx.lineWidth = 2;
+ ctx.beginPath();
+ ctx.moveTo(x, 0);
+ ctx.lineTo(x, height);
+ ctx.stroke();
+ } else if (cuePoint > 0 && buffer) {
+ const duration = buffer.length / buffer.sampleRate;
+ const x = (cuePoint / duration) * width;
+
ctx.strokeStyle = '#fff';
ctx.lineWidth = 2;
ctx.beginPath();
diff --git a/src/lib/components/WelcomeModal.svelte b/src/lib/components/WelcomeModal.svelte
index dec688a..b682c6a 100644
--- a/src/lib/components/WelcomeModal.svelte
+++ b/src/lib/components/WelcomeModal.svelte
@@ -157,15 +157,6 @@
border: 1px solid #444;
}
- .modal-content ul {
- margin: 0 0 1rem 0;
- padding-left: 1.25rem;
- }
-
- .modal-content ul li {
- margin-bottom: 0;
- }
-
.text-column ol li {
margin-bottom: 0;
}
@@ -229,10 +220,6 @@
.modal-content .description {
font-size: 0.9375rem;
}
-
- .modal-links p {
- font-size: 0.875rem;
- }
}
@media (min-width: 768px) {
@@ -257,10 +244,6 @@
line-height: 1.7;
}
- .modal-content ul {
- margin: 0;
- }
-
.modal-footer {
margin: 0 0 2.1rem 0;
font-size: 0.875rem;
@@ -282,9 +265,5 @@
.modal-close {
transition: none;
}
-
- .modal-links a {
- transition: none;
- }
}