From db96ea91cd38e30dd803cc138cdf27d474ed04d1 Mon Sep 17 00:00:00 2001
From: John O'Keefe <git@linuxhg.com>
Date: Wed, 21 Oct 2026 21:08:15 -0400
Subject: [PATCH] =?UTF-8?q?refactor(audio-player):=20one=20source=20for=20?=
 =?UTF-8?q?the=20speed=20list=20(plan=20=C2=A75)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The rate list was duplicated — hardcoded in the templ x-for AND
implicitly in audio.ts — and phase 2's keyboard stepping would have
needed a third copy. SPEEDS is now the single exported const (the
agreed nine values, 0.5 through 3); the component exposes it as
'speeds' for the dropdown's x-for (templ cannot import TS), and
stepSpeed() walks the same array for the future audio-keys consumer.

normalizeSpeed() maps persisted values onto the list: garbage or
out-of-list localStorage entries fall back to 1x, and init() writes
the normalized value back so storage heals instead of staying
poisoned.

Pure logic unit-tested in audio.test.ts; live-verified with Playwright
on the KJV folder book: nine options render, pick/reload/persist and
the stale-value fallback all behave, button label and
audio.playbackRate agree in every case.
---
 templates/audio_reader.templ    |  2 +-
 templates/audio_reader_templ.go |  2 +-
 web/src/audio.test.ts           | 55 +++++++++++++++++++++++++++++++++
 web/src/audio.ts                | 37 ++++++++++++++++++++--
 4 files changed, 91 insertions(+), 5 deletions(-)
 create mode 100644 web/src/audio.test.ts

diff --git a/templates/audio_reader.templ b/templates/audio_reader.templ
index 4b95ea91..f5aaef04 100644
--- a/templates/audio_reader.templ
+++ b/templates/audio_reader.templ
@@ -249,7 +249,7 @@ templ AudioReader(user User, metadata ReaderMetadata) {
 						class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 rounded-xl shadow-lg p-1.5 flex flex-col min-w-[7rem]"
 						style="background-color: var(--bg-secondary); border: 1px solid var(--border); z-index: 30;"
 					>
-						<template x-for="rate in [0.75, 1, 1.25, 1.5, 2]" :key="'speed' + rate">
+						<template x-for="rate in speeds" :key="'speed' + rate">
 							<button
 								type="button"
 								@click="setSpeed(rate); speedOpen = false"
diff --git a/templates/audio_reader_templ.go b/templates/audio_reader_templ.go
index 89bc9f01..e8dcc6e4 100644
--- a/templates/audio_reader_templ.go
+++ b/templates/audio_reader_templ.go
@@ -194,7 +194,7 @@ func AudioReader(user User, metadata ReaderMetadata) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</h1><p class=\"text-sm mt-0.5 truncate\" style=\"color: var(--text-secondary);\" x-text=\"chapterTitle()\">—</p></div></div><!-- Scrubber + transports --><div class=\"w-full max-w-xl flex flex-col gap-2\"><div class=\"flex items-center gap-2 text-xs tabular-nums\" style=\"color: var(--text-secondary);\"><span x-text=\"fmtTime(currentTime)\">0:00</span> <input id=\"audio-scrub\" type=\"range\" min=\"0\" step=\"0.1\" :max=\"chaptersDuration() || 1\" :value=\"scrubbing ? scrubValue : currentTime\" class=\"flex-1 accent-current\" @input=\"scrubbing = true; scrubValue = Number($event.target.value)\" @pointerup=\"seekTo(scrubValue); scrubbing = false\" @change=\"seekTo(scrubValue); scrubbing = false\" style=\"z-index: 20;\"> <span x-text=\"fmtTime(chaptersDuration() || 1)\">0:00</span></div><div class=\"flex items-center justify-center gap-3 md:gap-5\"><button type=\"button\" @click=\"stepChapter(-1)\" class=\"rounded-full p-2.5 hover:bg-surface-hover transition-colors\" aria-label=\"Previous chapter\" title=\"Previous chapter\" style=\"color: var(--text-primary);\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M19 20 9 12l10-8v16z\"></path> <path d=\"M5 19V5\"></path></svg></button> <button type=\"button\" @click=\"skip(-1)\" class=\"relative rounded-full h-14 w-14 grid place-items-center hover:bg-surface-hover transition-colors\" :aria-label=\"'Skip back ' + skipSeconds + 's'\" :title=\"'Skip back ' + skipSeconds + 's'\" style=\"color: var(--text-primary);\"><svg width=\"52\" height=\"52\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\"></path> <path d=\"M3 3v5h5\"></path></svg> <span class=\"absolute inset-0 grid place-items-center text-[11px] font-semibold pointer-events-none\"><span x-text=\"skipSeconds\">10</span></span></button> <button id=\"audio-play\" type=\"button\" @click=\"togglePlay()\" class=\"rounded-full h-16 w-16 grid place-items-center\" style=\"background-color: var(--accent); color: var(--bg-primary);\" aria-label=\"Play or pause\"><span x-show=\"!playing\" class=\"grid place-items-center\"><svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\" style=\"margin-left: 2px;\"><path d=\"M8 5.2v13.6L19.2 12z\"></path></svg></span> <span x-show=\"playing\" class=\"grid place-items-center\" x-cloak><svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><rect x=\"6.2\" y=\"4.5\" width=\"4.2\" height=\"15\" rx=\"1.7\"></rect> <rect x=\"13.6\" y=\"4.5\" width=\"4.2\" height=\"15\" rx=\"1.7\"></rect></svg></span></button> <button type=\"button\" @click=\"skip(1)\" class=\"relative rounded-full h-14 w-14 grid place-items-center hover:bg-surface-hover transition-colors\" :aria-label=\"'Skip forward ' + skipSeconds + 's'\" :title=\"'Skip forward ' + skipSeconds + 's'\" style=\"color: var(--text-primary);\"><svg width=\"52\" height=\"52\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8\"></path> <path d=\"M21 3v5h-5\"></path></svg> <span class=\"absolute inset-0 grid place-items-center text-[11px] font-semibold pointer-events-none\"><span x-text=\"skipSeconds\">10</span></span></button> <button type=\"button\" @click=\"stepChapter(1)\" class=\"rounded-full p-2.5 hover:bg-surface-hover transition-colors\" aria-label=\"Next chapter\" title=\"Next chapter\" style=\"color: var(--text-primary);\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 4l10 8-10 8V4z\"></path> <path d=\"M19 5v14\"></path></svg></button></div></div><!-- Settings strip: Skip ▾ · Speed ▾ · Bookmark · Volume ▾ --><div class=\"w-full max-w-xl flex items-center justify-center gap-2\"><div class=\"relative\" @click.outside=\"skipOpen = false\"><button type=\"button\" @click=\"skipOpen = !skipOpen\" class=\"text-xs px-3 py-2 rounded-lg hover:bg-surface-hover transition-colors inline-flex items-center gap-1.5\" :aria-label=\"'Skip duration, currently ' + skipSeconds + ' seconds'\" style=\"color: var(--text-secondary);\"><span>Skip</span> <span class=\"font-semibold\" style=\"color: var(--text-primary);\" x-text=\"skipSeconds + 's'\">10s</span> <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"></path></svg></button><div x-show=\"skipOpen\" x-cloak class=\"absolute bottom-full mb-2 left-1/2 -translate-x-1/2 rounded-xl shadow-lg p-1.5 flex flex-col min-w-[7.5rem]\" style=\"background-color: var(--bg-secondary); border: 1px solid var(--border); z-index: 30;\"><template x-for=\"secs in [1, 5, 10, 15, 30]\" :key=\"'skip' + secs\"><button type=\"button\" @click=\"setSkip(secs); skipOpen = false\" class=\"w-full text-left px-3 py-1.5 rounded-md text-sm\" :class=\"Number(skipSeconds) === secs ? 'font-semibold' : ''\" :style=\"Number(skipSeconds) === secs ? 'background-color: var(--accent-muted); color: var(--text-primary);' : 'color: var(--text-secondary);'\" x-text=\"secs + ' seconds'\"></button></template></div></div><div class=\"relative\" @click.outside=\"speedOpen = false\"><button type=\"button\" @click=\"speedOpen = !speedOpen\" class=\"text-xs px-3 py-2 rounded-lg hover:bg-surface-hover transition-colors inline-flex items-center gap-1.5\" :aria-label=\"'Playback speed, currently ' + speed + ' times'\" style=\"color: var(--text-secondary);\"><span>Speed</span> <span class=\"font-semibold\" style=\"color: var(--text-primary);\" x-text=\"speed + '×'\">1×</span> <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"></path></svg></button><div x-show=\"speedOpen\" x-cloak class=\"absolute bottom-full mb-2 left-1/2 -translate-x-1/2 rounded-xl shadow-lg p-1.5 flex flex-col min-w-[7rem]\" style=\"background-color: var(--bg-secondary); border: 1px solid var(--border); z-index: 30;\"><template x-for=\"rate in [0.75, 1, 1.25, 1.5, 2]\" :key=\"'speed' + rate\"><button type=\"button\" @click=\"setSpeed(rate); speedOpen = false\" class=\"w-full text-left px-3 py-1.5 rounded-md text-sm\" :class=\"Number(speed) === rate ? 'font-semibold' : ''\" :style=\"Number(speed) === rate ? 'background-color: var(--accent-muted); color: var(--text-primary);' : 'color: var(--text-secondary);'\" x-text=\"rate + '×'\"></button></template></div></div><button type=\"button\" @click=\"toggleBookmarkCapture()\" class=\"text-xs px-3 py-2 rounded-lg hover:bg-surface-hover transition-colors inline-flex items-center gap-1.5\" :class=\"bookmarkCaptureOpen ? 'opacity-100' : 'opacity-70'\" aria-label=\"Add bookmark at current position\" style=\"color: var(--text-secondary);\"><svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z\"></path> <path d=\"M12 7v6M9 10h6\"></path></svg> <span>Bookmark</span></button><div class=\"relative\" @click.outside=\"volumeOpen = false\"><button type=\"button\" @click=\"volumeOpen = !volumeOpen\" class=\"rounded-lg p-2 hover:bg-surface-hover transition-colors\" :aria-label=\"'Volume ' + Math.round(Number(volume) * 100) + '%'\" style=\"color: var(--text-secondary);\"><span x-show=\"volumeIcon() === 'muted'\" x-cloak><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M11 5 6 9H2v6h4l5 4z\"></path> <path d=\"m17 9 4 6M21 9l-4 6\"></path></svg></span> <span x-show=\"volumeIcon() === 'low'\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M11 5 6 9H2v6h4l5 4z\"></path> <path d=\"M15.5 9.5a3.5 3.5 0 0 1 0 5\"></path></svg></span> <span x-show=\"volumeIcon() === 'mid'\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M11 5 6 9H2v6h4l5 4z\"></path> <path d=\"M14.5 8a5 5 0 0 1 0 8\"></path> <path d=\"M17.5 5.5a9 9 0 0 1 0 13\"></path></svg></span> <span x-show=\"volumeIcon() === 'high'\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M11 5 6 9H2v6h4l5 4z\"></path> <path d=\"M14.5 8a5 5 0 0 1 0 8\"></path> <path d=\"M17.5 5.5a9 9 0 0 1 0 13\"></path> <path d=\"M20.5 3a13 13 0 0 1 0 18\"></path></svg></span></button><div x-show=\"volumeOpen\" x-cloak class=\"absolute bottom-full mb-2 left-1/2 -translate-x-1/2 rounded-xl shadow-lg px-3 py-2.5 flex items-center gap-3\" style=\"background-color: var(--bg-secondary); border: 1px solid var(--border); z-index: 30;\"><button type=\"button\" @click=\"toggleMute()\" class=\"rounded-full p-1.5 hover:bg-surface-hover transition-colors\" :aria-label=\"muted ? 'Unmute' : 'Mute'\" style=\"color: var(--text-secondary);\"><span x-show=\"muted\" x-cloak class=\"block\" style=\"color: var(--text-primary);\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M11 5 6 9H2v6h4l5 4z\"></path> <path d=\"m17 9 4 6M21 9l-4 6\"></path></svg></span> <span x-show=\"!muted\" class=\"block\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M11 5 6 9H2v6h4l5 4z\"></path> <path d=\"M14.5 8a5 5 0 0 1 0 8\"></path> <path d=\"M17.5 5.5a9 9 0 0 1 0 13\"></path></svg></span></button> <input type=\"range\" min=\"0\" max=\"1\" step=\"0.05\" :value=\"muted ? 0 : volume\" @input=\"setVolume(Number($event.target.value))\" class=\"accent-current\" style=\"width: 7.5rem;\" aria-label=\"Volume\"></div></div></div><!-- Chapter drawer: slides top-to-bottom, floats above the page\n\t\t\t     (backdrop overlay — the page never shifts) --><div x-show=\"chaptersOpen\" x-cloak class=\"fixed inset-0 z-40\" style=\"background-color: color-mix(in srgb, black 32%, transparent);\" @click=\"chaptersOpen = false\"></div><div x-show=\"chaptersOpen\" x-cloak x-transition:enter=\"transition ease-out duration-200\" x-transition:enter-start=\"-translate-y-4 opacity-0\" x-transition:enter-end=\"translate-y-0 opacity-100\" x-transition:leave=\"transition ease-in duration-150\" x-transition:leave-start=\"translate-y-0 opacity-100\" x-transition:leave-end=\"-translate-y-4 opacity-0\" class=\"fixed top-0 right-0 z-50 w-full sm:w-96 max-h-[70vh] overflow-y-auto rounded-b-2xl shadow-2xl p-3\" style=\"background-color: var(--bg-secondary); border: 1px solid var(--border); border-top-width: 0;\" @click.outside=\"chaptersOpen = false\"><div class=\"flex items-center justify-between mb-2 px-1\"><span class=\"text-sm font-semibold\" style=\"color: var(--text-primary);\">Chapters</span> <button type=\"button\" @click=\"chaptersOpen = false\" class=\"rounded-full p-1.5 hover:bg-surface-hover\" style=\"color: var(--text-secondary);\" aria-label=\"Close chapters\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg></button></div><template x-for=\"ch in chapters\" :key=\"ch.index\"><button type=\"button\" @click=\"jumpToChapter(ch.index)\" class=\"w-full text-left px-3 py-2.5 rounded-lg text-sm flex justify-between gap-3 hover:bg-surface-hover transition-colors\" :class=\"currentChapter() === ch.index ? 'font-semibold' : ''\" :style=\"currentChapter() === ch.index ? 'background-color: var(--accent-muted); color: var(--text-primary);' : 'color: var(--text-secondary);'\"><span class=\"truncate\" x-text=\"ch.title || ('Chapter ' + (ch.index + 1))\"></span> <span class=\"shrink-0 text-xs tabular-nums\" x-text=\"fmtTime(ch.start)\"></span></button></template><p x-show=\"!chapters.length\" class=\"text-sm text-center py-4\" style=\"color: var(--text-secondary);\">No chapters detected for this audiobook.</p></div><!-- Bookmarks drawer: same slide-down panel shape as chapters;\n\t\t\t     note is the point (A2d) --><div x-show=\"bookmarksOpen\" x-cloak x-transition:enter=\"transition ease-out duration-200\" x-transition:enter-start=\"-translate-y-4 opacity-0\" x-transition:enter-end=\"translate-y-0 opacity-100\" x-transition:leave=\"transition ease-in duration-150\" x-transition:leave-start=\"translate-y-0 opacity-100\" x-transition:leave-end=\"-translate-y-4 opacity-0\" class=\"fixed top-0 right-0 z-50 w-full sm:w-96 max-h-[70vh] overflow-y-auto rounded-b-2xl shadow-2xl p-3\" style=\"background-color: var(--bg-secondary); border: 1px solid var(--border); border-top-width: 0;\"><div class=\"flex items-center justify-between mb-2 px-1\"><span class=\"text-sm font-semibold\" style=\"color: var(--text-primary);\">Bookmarks</span> <button type=\"button\" @click=\"bookmarksOpen = false\" class=\"rounded-full p-1.5 hover:bg-surface-hover\" style=\"color: var(--text-secondary);\" aria-label=\"Close bookmarks\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg></button></div><template x-for=\"b in bookmarks\" :key=\"String(b.id)\"><div class=\"px-3 py-2 rounded-lg hover:bg-surface-hover transition-colors\"><div class=\"flex justify-between items-center gap-3\"><button type=\"button\" class=\"flex-1 text-left min-w-0\" @click=\"jumpToBookmark(b)\"><span class=\"text-sm font-medium truncate block\" style=\"color: var(--text-primary);\" x-text=\"b.title\"></span></button><div class=\"shrink-0 flex items-center gap-1\"><button type=\"button\" @click=\"startEditNote(b)\" class=\"rounded p-1 hover:bg-surface-hover\" style=\"color: var(--text-secondary);\" aria-label=\"Edit note\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z\"></path></svg></button> <button type=\"button\" @click=\"deleteBookmark(b)\" class=\"rounded p-1 hover:bg-surface-hover\" style=\"color: var(--text-secondary);\" aria-label=\"Delete bookmark\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 6h18\"></path><path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6\"></path><path d=\"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"></path></svg></button></div></div><div class=\"note-rich text-xs mt-1\" x-show=\"b.notes && editingBookmarkId !== String(b.id)\" x-html=\"bookmarkNoteHtml(b)\"></div><div x-show=\"editingBookmarkId === String(b.id)\" x-cloak class=\"mt-1\"><textarea x-model=\"editingNote\" rows=\"3\" class=\"input text-sm resize-y\" placeholder=\"Note (markdown)\"></textarea><div class=\"flex justify-end gap-2 mt-1\"><button type=\"button\" @click=\"editingBookmarkId = ''\" class=\"btn btn-ghost text-xs px-2 py-1\">Cancel</button> <button type=\"button\" @click=\"saveNote()\" class=\"btn btn-primary text-xs px-2 py-1\">Save note</button></div></div></div></template><p x-show=\"!bookmarks.length\" class=\"text-sm text-center py-4\" style=\"color: var(--text-secondary);\">No bookmarks yet — tap the <span class=\"inline-flex align-middle\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z\"></path></svg></span> button to save your position.</p></div><!-- Bookmark capture pill: floats under the header while playing\n\t\t\t     position is live; optional note per the A2d spec --><div x-show=\"bookmarkCaptureOpen\" x-cloak x-transition class=\"fixed top-16 right-4 z-50 w-80 rounded-xl shadow-2xl p-3\" style=\"background-color: var(--bg-secondary); border: 1px solid var(--border);\"><p class=\"text-sm font-semibold mb-2\" style=\"color: var(--text-primary);\">Bookmark at <span class=\"tabular-nums\" x-text=\"fmtTime(currentTime)\">0:00</span></p><textarea x-model=\"bookmarkNote\" rows=\"3\" placeholder=\"Optional note — markdown welcome (e.g. **great quote**, list, [link](https://…))\" class=\"input mb-2 resize-y\"></textarea><div class=\"flex justify-end gap-2\"><button type=\"button\" @click=\"bookmarkCaptureOpen = false\" class=\"btn btn-ghost text-sm px-3 py-1.5\">Cancel</button> <button type=\"button\" @click=\"saveBookmark()\" class=\"btn btn-primary text-sm px-3 py-1.5\">Save</button></div></div><audio id=\"audio-element\" preload=\"auto\" class=\"hidden\"></audio></div></body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</h1><p class=\"text-sm mt-0.5 truncate\" style=\"color: var(--text-secondary);\" x-text=\"chapterTitle()\">—</p></div></div><!-- Scrubber + transports --><div class=\"w-full max-w-xl flex flex-col gap-2\"><div class=\"flex items-center gap-2 text-xs tabular-nums\" style=\"color: var(--text-secondary);\"><span x-text=\"fmtTime(currentTime)\">0:00</span> <input id=\"audio-scrub\" type=\"range\" min=\"0\" step=\"0.1\" :max=\"chaptersDuration() || 1\" :value=\"scrubbing ? scrubValue : currentTime\" class=\"flex-1 accent-current\" @input=\"scrubbing = true; scrubValue = Number($event.target.value)\" @pointerup=\"seekTo(scrubValue); scrubbing = false\" @change=\"seekTo(scrubValue); scrubbing = false\" style=\"z-index: 20;\"> <span x-text=\"fmtTime(chaptersDuration() || 1)\">0:00</span></div><div class=\"flex items-center justify-center gap-3 md:gap-5\"><button type=\"button\" @click=\"stepChapter(-1)\" class=\"rounded-full p-2.5 hover:bg-surface-hover transition-colors\" aria-label=\"Previous chapter\" title=\"Previous chapter\" style=\"color: var(--text-primary);\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M19 20 9 12l10-8v16z\"></path> <path d=\"M5 19V5\"></path></svg></button> <button type=\"button\" @click=\"skip(-1)\" class=\"relative rounded-full h-14 w-14 grid place-items-center hover:bg-surface-hover transition-colors\" :aria-label=\"'Skip back ' + skipSeconds + 's'\" :title=\"'Skip back ' + skipSeconds + 's'\" style=\"color: var(--text-primary);\"><svg width=\"52\" height=\"52\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\"></path> <path d=\"M3 3v5h5\"></path></svg> <span class=\"absolute inset-0 grid place-items-center text-[11px] font-semibold pointer-events-none\"><span x-text=\"skipSeconds\">10</span></span></button> <button id=\"audio-play\" type=\"button\" @click=\"togglePlay()\" class=\"rounded-full h-16 w-16 grid place-items-center\" style=\"background-color: var(--accent); color: var(--bg-primary);\" aria-label=\"Play or pause\"><span x-show=\"!playing\" class=\"grid place-items-center\"><svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\" style=\"margin-left: 2px;\"><path d=\"M8 5.2v13.6L19.2 12z\"></path></svg></span> <span x-show=\"playing\" class=\"grid place-items-center\" x-cloak><svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><rect x=\"6.2\" y=\"4.5\" width=\"4.2\" height=\"15\" rx=\"1.7\"></rect> <rect x=\"13.6\" y=\"4.5\" width=\"4.2\" height=\"15\" rx=\"1.7\"></rect></svg></span></button> <button type=\"button\" @click=\"skip(1)\" class=\"relative rounded-full h-14 w-14 grid place-items-center hover:bg-surface-hover transition-colors\" :aria-label=\"'Skip forward ' + skipSeconds + 's'\" :title=\"'Skip forward ' + skipSeconds + 's'\" style=\"color: var(--text-primary);\"><svg width=\"52\" height=\"52\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8\"></path> <path d=\"M21 3v5h-5\"></path></svg> <span class=\"absolute inset-0 grid place-items-center text-[11px] font-semibold pointer-events-none\"><span x-text=\"skipSeconds\">10</span></span></button> <button type=\"button\" @click=\"stepChapter(1)\" class=\"rounded-full p-2.5 hover:bg-surface-hover transition-colors\" aria-label=\"Next chapter\" title=\"Next chapter\" style=\"color: var(--text-primary);\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 4l10 8-10 8V4z\"></path> <path d=\"M19 5v14\"></path></svg></button></div></div><!-- Settings strip: Skip ▾ · Speed ▾ · Bookmark · Volume ▾ --><div class=\"w-full max-w-xl flex items-center justify-center gap-2\"><div class=\"relative\" @click.outside=\"skipOpen = false\"><button type=\"button\" @click=\"skipOpen = !skipOpen\" class=\"text-xs px-3 py-2 rounded-lg hover:bg-surface-hover transition-colors inline-flex items-center gap-1.5\" :aria-label=\"'Skip duration, currently ' + skipSeconds + ' seconds'\" style=\"color: var(--text-secondary);\"><span>Skip</span> <span class=\"font-semibold\" style=\"color: var(--text-primary);\" x-text=\"skipSeconds + 's'\">10s</span> <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"></path></svg></button><div x-show=\"skipOpen\" x-cloak class=\"absolute bottom-full mb-2 left-1/2 -translate-x-1/2 rounded-xl shadow-lg p-1.5 flex flex-col min-w-[7.5rem]\" style=\"background-color: var(--bg-secondary); border: 1px solid var(--border); z-index: 30;\"><template x-for=\"secs in [1, 5, 10, 15, 30]\" :key=\"'skip' + secs\"><button type=\"button\" @click=\"setSkip(secs); skipOpen = false\" class=\"w-full text-left px-3 py-1.5 rounded-md text-sm\" :class=\"Number(skipSeconds) === secs ? 'font-semibold' : ''\" :style=\"Number(skipSeconds) === secs ? 'background-color: var(--accent-muted); color: var(--text-primary);' : 'color: var(--text-secondary);'\" x-text=\"secs + ' seconds'\"></button></template></div></div><div class=\"relative\" @click.outside=\"speedOpen = false\"><button type=\"button\" @click=\"speedOpen = !speedOpen\" class=\"text-xs px-3 py-2 rounded-lg hover:bg-surface-hover transition-colors inline-flex items-center gap-1.5\" :aria-label=\"'Playback speed, currently ' + speed + ' times'\" style=\"color: var(--text-secondary);\"><span>Speed</span> <span class=\"font-semibold\" style=\"color: var(--text-primary);\" x-text=\"speed + '×'\">1×</span> <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"></path></svg></button><div x-show=\"speedOpen\" x-cloak class=\"absolute bottom-full mb-2 left-1/2 -translate-x-1/2 rounded-xl shadow-lg p-1.5 flex flex-col min-w-[7rem]\" style=\"background-color: var(--bg-secondary); border: 1px solid var(--border); z-index: 30;\"><template x-for=\"rate in speeds\" :key=\"'speed' + rate\"><button type=\"button\" @click=\"setSpeed(rate); speedOpen = false\" class=\"w-full text-left px-3 py-1.5 rounded-md text-sm\" :class=\"Number(speed) === rate ? 'font-semibold' : ''\" :style=\"Number(speed) === rate ? 'background-color: var(--accent-muted); color: var(--text-primary);' : 'color: var(--text-secondary);'\" x-text=\"rate + '×'\"></button></template></div></div><button type=\"button\" @click=\"toggleBookmarkCapture()\" class=\"text-xs px-3 py-2 rounded-lg hover:bg-surface-hover transition-colors inline-flex items-center gap-1.5\" :class=\"bookmarkCaptureOpen ? 'opacity-100' : 'opacity-70'\" aria-label=\"Add bookmark at current position\" style=\"color: var(--text-secondary);\"><svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z\"></path> <path d=\"M12 7v6M9 10h6\"></path></svg> <span>Bookmark</span></button><div class=\"relative\" @click.outside=\"volumeOpen = false\"><button type=\"button\" @click=\"volumeOpen = !volumeOpen\" class=\"rounded-lg p-2 hover:bg-surface-hover transition-colors\" :aria-label=\"'Volume ' + Math.round(Number(volume) * 100) + '%'\" style=\"color: var(--text-secondary);\"><span x-show=\"volumeIcon() === 'muted'\" x-cloak><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M11 5 6 9H2v6h4l5 4z\"></path> <path d=\"m17 9 4 6M21 9l-4 6\"></path></svg></span> <span x-show=\"volumeIcon() === 'low'\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M11 5 6 9H2v6h4l5 4z\"></path> <path d=\"M15.5 9.5a3.5 3.5 0 0 1 0 5\"></path></svg></span> <span x-show=\"volumeIcon() === 'mid'\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M11 5 6 9H2v6h4l5 4z\"></path> <path d=\"M14.5 8a5 5 0 0 1 0 8\"></path> <path d=\"M17.5 5.5a9 9 0 0 1 0 13\"></path></svg></span> <span x-show=\"volumeIcon() === 'high'\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M11 5 6 9H2v6h4l5 4z\"></path> <path d=\"M14.5 8a5 5 0 0 1 0 8\"></path> <path d=\"M17.5 5.5a9 9 0 0 1 0 13\"></path> <path d=\"M20.5 3a13 13 0 0 1 0 18\"></path></svg></span></button><div x-show=\"volumeOpen\" x-cloak class=\"absolute bottom-full mb-2 left-1/2 -translate-x-1/2 rounded-xl shadow-lg px-3 py-2.5 flex items-center gap-3\" style=\"background-color: var(--bg-secondary); border: 1px solid var(--border); z-index: 30;\"><button type=\"button\" @click=\"toggleMute()\" class=\"rounded-full p-1.5 hover:bg-surface-hover transition-colors\" :aria-label=\"muted ? 'Unmute' : 'Mute'\" style=\"color: var(--text-secondary);\"><span x-show=\"muted\" x-cloak class=\"block\" style=\"color: var(--text-primary);\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M11 5 6 9H2v6h4l5 4z\"></path> <path d=\"m17 9 4 6M21 9l-4 6\"></path></svg></span> <span x-show=\"!muted\" class=\"block\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M11 5 6 9H2v6h4l5 4z\"></path> <path d=\"M14.5 8a5 5 0 0 1 0 8\"></path> <path d=\"M17.5 5.5a9 9 0 0 1 0 13\"></path></svg></span></button> <input type=\"range\" min=\"0\" max=\"1\" step=\"0.05\" :value=\"muted ? 0 : volume\" @input=\"setVolume(Number($event.target.value))\" class=\"accent-current\" style=\"width: 7.5rem;\" aria-label=\"Volume\"></div></div></div><!-- Chapter drawer: slides top-to-bottom, floats above the page\n\t\t\t     (backdrop overlay — the page never shifts) --><div x-show=\"chaptersOpen\" x-cloak class=\"fixed inset-0 z-40\" style=\"background-color: color-mix(in srgb, black 32%, transparent);\" @click=\"chaptersOpen = false\"></div><div x-show=\"chaptersOpen\" x-cloak x-transition:enter=\"transition ease-out duration-200\" x-transition:enter-start=\"-translate-y-4 opacity-0\" x-transition:enter-end=\"translate-y-0 opacity-100\" x-transition:leave=\"transition ease-in duration-150\" x-transition:leave-start=\"translate-y-0 opacity-100\" x-transition:leave-end=\"-translate-y-4 opacity-0\" class=\"fixed top-0 right-0 z-50 w-full sm:w-96 max-h-[70vh] overflow-y-auto rounded-b-2xl shadow-2xl p-3\" style=\"background-color: var(--bg-secondary); border: 1px solid var(--border); border-top-width: 0;\" @click.outside=\"chaptersOpen = false\"><div class=\"flex items-center justify-between mb-2 px-1\"><span class=\"text-sm font-semibold\" style=\"color: var(--text-primary);\">Chapters</span> <button type=\"button\" @click=\"chaptersOpen = false\" class=\"rounded-full p-1.5 hover:bg-surface-hover\" style=\"color: var(--text-secondary);\" aria-label=\"Close chapters\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg></button></div><template x-for=\"ch in chapters\" :key=\"ch.index\"><button type=\"button\" @click=\"jumpToChapter(ch.index)\" class=\"w-full text-left px-3 py-2.5 rounded-lg text-sm flex justify-between gap-3 hover:bg-surface-hover transition-colors\" :class=\"currentChapter() === ch.index ? 'font-semibold' : ''\" :style=\"currentChapter() === ch.index ? 'background-color: var(--accent-muted); color: var(--text-primary);' : 'color: var(--text-secondary);'\"><span class=\"truncate\" x-text=\"ch.title || ('Chapter ' + (ch.index + 1))\"></span> <span class=\"shrink-0 text-xs tabular-nums\" x-text=\"fmtTime(ch.start)\"></span></button></template><p x-show=\"!chapters.length\" class=\"text-sm text-center py-4\" style=\"color: var(--text-secondary);\">No chapters detected for this audiobook.</p></div><!-- Bookmarks drawer: same slide-down panel shape as chapters;\n\t\t\t     note is the point (A2d) --><div x-show=\"bookmarksOpen\" x-cloak x-transition:enter=\"transition ease-out duration-200\" x-transition:enter-start=\"-translate-y-4 opacity-0\" x-transition:enter-end=\"translate-y-0 opacity-100\" x-transition:leave=\"transition ease-in duration-150\" x-transition:leave-start=\"translate-y-0 opacity-100\" x-transition:leave-end=\"-translate-y-4 opacity-0\" class=\"fixed top-0 right-0 z-50 w-full sm:w-96 max-h-[70vh] overflow-y-auto rounded-b-2xl shadow-2xl p-3\" style=\"background-color: var(--bg-secondary); border: 1px solid var(--border); border-top-width: 0;\"><div class=\"flex items-center justify-between mb-2 px-1\"><span class=\"text-sm font-semibold\" style=\"color: var(--text-primary);\">Bookmarks</span> <button type=\"button\" @click=\"bookmarksOpen = false\" class=\"rounded-full p-1.5 hover:bg-surface-hover\" style=\"color: var(--text-secondary);\" aria-label=\"Close bookmarks\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg></button></div><template x-for=\"b in bookmarks\" :key=\"String(b.id)\"><div class=\"px-3 py-2 rounded-lg hover:bg-surface-hover transition-colors\"><div class=\"flex justify-between items-center gap-3\"><button type=\"button\" class=\"flex-1 text-left min-w-0\" @click=\"jumpToBookmark(b)\"><span class=\"text-sm font-medium truncate block\" style=\"color: var(--text-primary);\" x-text=\"b.title\"></span></button><div class=\"shrink-0 flex items-center gap-1\"><button type=\"button\" @click=\"startEditNote(b)\" class=\"rounded p-1 hover:bg-surface-hover\" style=\"color: var(--text-secondary);\" aria-label=\"Edit note\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z\"></path></svg></button> <button type=\"button\" @click=\"deleteBookmark(b)\" class=\"rounded p-1 hover:bg-surface-hover\" style=\"color: var(--text-secondary);\" aria-label=\"Delete bookmark\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 6h18\"></path><path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6\"></path><path d=\"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"></path></svg></button></div></div><div class=\"note-rich text-xs mt-1\" x-show=\"b.notes && editingBookmarkId !== String(b.id)\" x-html=\"bookmarkNoteHtml(b)\"></div><div x-show=\"editingBookmarkId === String(b.id)\" x-cloak class=\"mt-1\"><textarea x-model=\"editingNote\" rows=\"3\" class=\"input text-sm resize-y\" placeholder=\"Note (markdown)\"></textarea><div class=\"flex justify-end gap-2 mt-1\"><button type=\"button\" @click=\"editingBookmarkId = ''\" class=\"btn btn-ghost text-xs px-2 py-1\">Cancel</button> <button type=\"button\" @click=\"saveNote()\" class=\"btn btn-primary text-xs px-2 py-1\">Save note</button></div></div></div></template><p x-show=\"!bookmarks.length\" class=\"text-sm text-center py-4\" style=\"color: var(--text-secondary);\">No bookmarks yet — tap the <span class=\"inline-flex align-middle\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z\"></path></svg></span> button to save your position.</p></div><!-- Bookmark capture pill: floats under the header while playing\n\t\t\t     position is live; optional note per the A2d spec --><div x-show=\"bookmarkCaptureOpen\" x-cloak x-transition class=\"fixed top-16 right-4 z-50 w-80 rounded-xl shadow-2xl p-3\" style=\"background-color: var(--bg-secondary); border: 1px solid var(--border);\"><p class=\"text-sm font-semibold mb-2\" style=\"color: var(--text-primary);\">Bookmark at <span class=\"tabular-nums\" x-text=\"fmtTime(currentTime)\">0:00</span></p><textarea x-model=\"bookmarkNote\" rows=\"3\" placeholder=\"Optional note — markdown welcome (e.g. **great quote**, list, [link](https://…))\" class=\"input mb-2 resize-y\"></textarea><div class=\"flex justify-end gap-2\"><button type=\"button\" @click=\"bookmarkCaptureOpen = false\" class=\"btn btn-ghost text-sm px-3 py-1.5\">Cancel</button> <button type=\"button\" @click=\"saveBookmark()\" class=\"btn btn-primary text-sm px-3 py-1.5\">Save</button></div></div><audio id=\"audio-element\" preload=\"auto\" class=\"hidden\"></audio></div></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/web/src/audio.test.ts b/web/src/audio.test.ts
new file mode 100644
index 00000000..35aee42a
--- /dev/null
+++ b/web/src/audio.test.ts
@@ -0,0 +1,55 @@
+import { describe, expect, it } from "vitest";
+
+import { SPEEDS, normalizeSpeed, stepSpeed } from "./audio";
+
+describe("SPEEDS", () => {
+  it("is the agreed list from the player plan (0.5 through 3)", () => {
+    expect(SPEEDS).toEqual([0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3]);
+  });
+
+  it("contains 1× exactly once and stays ascending", () => {
+    expect(SPEEDS.filter((r) => r === 1)).toHaveLength(1);
+    expect([...SPEEDS].sort((a, b) => a - b)).toEqual([...SPEEDS]);
+  });
+});
+
+describe("normalizeSpeed", () => {
+  it("passes through every listed rate", () => {
+    for (const rate of SPEEDS) {
+      expect(normalizeSpeed(String(rate))).toBe(rate);
+    }
+  });
+
+  it("falls back to 1× for null, garbage and out-of-list values", () => {
+    expect(normalizeSpeed(null)).toBe(1);
+    expect(normalizeSpeed("")).toBe(1);
+    expect(normalizeSpeed("not-a-number")).toBe(1);
+    expect(normalizeSpeed("0")).toBe(1);
+    expect(normalizeSpeed("2.2")).toBe(1);
+    expect(normalizeSpeed("10")).toBe(1);
+  });
+
+  it("accepts a stale pre-plan entry of 0.75 or 2", () => {
+    expect(normalizeSpeed("0.75")).toBe(0.75);
+    expect(normalizeSpeed("2")).toBe(2);
+  });
+});
+
+describe("stepSpeed", () => {
+  it("steps forward and backward through the list", () => {
+    expect(stepSpeed(1, 1)).toBe(1.25);
+    expect(stepSpeed(1, -1)).toBe(0.75);
+    expect(stepSpeed(0.5, 1)).toBe(0.75);
+    expect(stepSpeed(2, 1)).toBe(2.5);
+  });
+
+  it("clamps at both ends instead of wrapping", () => {
+    expect(stepSpeed(0.5, -1)).toBe(0.5);
+    expect(stepSpeed(3, 1)).toBe(3);
+  });
+
+  it("anchors unknown currents at 1× before stepping", () => {
+    expect(stepSpeed(2.2, 1)).toBe(1.25);
+    expect(stepSpeed(2.2, -1)).toBe(0.75);
+  });
+});
diff --git a/web/src/audio.ts b/web/src/audio.ts
index c705b197..869c1a7b 100644
--- a/web/src/audio.ts
+++ b/web/src/audio.ts
@@ -52,6 +52,28 @@ export function globalSecondsFor(
   return (track ? track.start : 0) + Math.max(0, localSeconds);
 }
 
+// Playback speeds — ONE source. The templ dropdown iterates it through
+// the component's `speeds` property, and keyboard stepping (audio-keys,
+// player plan §2) walks the same array through stepSpeed. Never hardcode
+// a rate list elsewhere.
+export const SPEEDS: readonly number[] = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3];
+
+// normalizeSpeed maps a persisted speed onto the SPEEDS list: missing,
+// malformed or out-of-list values (e.g. a stale localStorage entry from
+// before the list changed) fall back to 1×.
+export function normalizeSpeed(value: string | null): number {
+  const n = Number(value);
+  return SPEEDS.includes(n) ? n : 1;
+}
+
+// stepSpeed moves through SPEEDS by delta, clamping at both ends; an
+// unknown current anchors at 1× before stepping.
+export function stepSpeed(current: number, delta: 1 | -1): number {
+  const idx = SPEEDS.indexOf(current);
+  const base = idx === -1 ? SPEEDS.indexOf(1) : idx;
+  return SPEEDS[Math.min(SPEEDS.length - 1, Math.max(0, base + delta))];
+}
+
 const PROGRESS_INTERVAL_MS = 30_000;
 
 interface AudioConfig {
@@ -85,7 +107,10 @@ Alpine.data("audioReader", () => ({
   chaptersOpen: false,
   currentTime: 0,
   playing: false,
-  speed: Number(localStorage.getItem("audio_speed") || 1),
+  speed: normalizeSpeed(localStorage.getItem("audio_speed")),
+  // Exposed for the templ dropdown's x-for — templ cannot import the
+  // const directly; this property is the binding.
+  speeds: SPEEDS,
   skipSeconds: Number(localStorage.getItem("audio_skip") || 10),
   // Scrub guard: while dragging, timeupdate must not fight the handle
   scrubbing: false,
@@ -143,6 +168,12 @@ Alpine.data("audioReader", () => ({
   init() {
     if (this.initialized) return; // Alpine can re-init the body tree
     this.initialized = true;
+    // Heal a stale/out-of-list persisted speed so the storage matches
+    // what the player actually uses (normalizeSpeed already fixed the
+    // in-memory value at state creation).
+    if (localStorage.getItem("audio_speed") !== String(this.speed)) {
+      localStorage.setItem("audio_speed", String(this.speed));
+    }
     window.addEventListener("error", (e) => {
       document.title = "ERR: " + (e.message || "unknown");
     });
@@ -163,7 +194,7 @@ Alpine.data("audioReader", () => ({
     // src is set by restorePosition once the track manifest is known —
     // for multi-file books data-file-url (a directory or a zip root) is
     // NOT directly playable. The catch branch below falls back to it.
-    audio.playbackRate = Number(this.speed) || 1;
+    audio.playbackRate = this.speed;
     audio.preload = "auto";
     // Restored volume/mute from the settings strip's persisted state.
     audio.volume = Math.min(1, Math.max(0, Number(this.volume)));
@@ -303,7 +334,7 @@ Alpine.data("audioReader", () => ({
     } else {
       this.pendingSeek = Math.max(0, localSeconds);
       audio.setAttribute("src", track.url);
-      audio.playbackRate = Number(this.speed) || 1;
+      audio.playbackRate = this.speed;
       audio.load();
     }
     if (resume) audio.play().catch(() => showToast("Playback failed to start", "error"));