kamil/libnovel
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases 162 Wiki Activity

feat(audio): add voice selector, voice samples, MediaSession cover art, and fix speed/voice bug

Browse Source 
- Fix speed/voice bug: AudioPlayer no longer accepts speed/voice as props;
  startPlayback() reads audioStore.voice/speed directly instead of overwriting them
- Add GET /api/voices endpoint (Go) proxying Kokoro, cached in-memory
- Add POST /api/audio/voice-samples endpoint (Go) to pre-generate sample clips
  for all voices and store them in MinIO under _voice-samples/{voice}.mp3
- Add GET /api/presign/voice-sample/{voice} endpoint (Go)
- Add SvelteKit proxy routes: /api/voices, /api/presign/voice-sample, /api/audio/voice-samples
- Add presignVoiceSample() helper in minio.ts with proper host rewrite
- Pass book.cover through +page.server.ts -> +page.svelte -> AudioPlayer
- Set navigator.mediaSession.metadata on playback start so cover art,
  book title, and chapter title appear on phone lock screen / notification
This commit is contained in:
Admin
2026-03-04 19:05:08 +05:00
parent 1e7f396b2d
commit 3899a96576
8 changed files with 544 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

271
ui/src/lib/components/AudioPlayer.svelte
View File

@@ -15,6 +15,16 @@
* 4. If 404, POST /api/audio/:slug/:n to generate. Drive pseudo progress bar.
* On success, presign again and set audioUrl.
*
* ── Voice selection ──────────────────────────────────────────────────────
* A "Change voice" panel lets users pick from the available Kokoro voices.
* Each voice shows a play button that streams a pre-generated sample from
* MinIO (GET /api/presign/voice-sample?voice=...). Samples are generated
* server-side via POST /api/audio/voice-samples.
*
* Changing voice updates audioStore.voice (saved to settings via layout).
* The currently loaded chapter audio is NOT re-generated automatically —
* the new voice takes effect on next "Play narration" click.
*
* ── Pre-fetch (immediate + 90% fallback) ────────────────────────────────
* When autoNext is on, prefetchNext() is called as soon as the current
* chapter starts playing (via maybeStartPrefetch() at the end of
@@ -45,10 +55,12 @@
chapter: number;
chapterTitle?: string;
bookTitle?: string;
/** Cover image URL for the book (used in MediaSession for lock-screen art). */
cover?: string;
/** Next chapter number, or null/undefined if this is the last chapter. */
nextChapter?: number | null;
voice?: string;
speed?: number;
/** List of available voices from the Kokoro API. */
voices?: string[];
}
let {
@@ -56,11 +68,107 @@
chapter,
chapterTitle = '',
bookTitle = '',
cover = '',
nextChapter = null,
voice = 'af_bella',
speed = 1.0
voices = []
}: Props = $props();
// ── Voice selector state ────────────────────────────────────────────────
let showVoicePanel = $state(false);
/** Voice whose sample is currently being fetched or playing. */
let samplePlayingVoice = $state<string | null>(null);
/** Currently active sample <audio> element — one at a time. */
let sampleAudio = $state<HTMLAudioElement | null>(null);
/**
* Human-readable label for a voice ID.
* e.g. "af_bella" → "Bella (US F)" | "bm_george" → "George (UK M)"
*/
function voiceLabel(v: string): string {
const langMap: Record<string, string> = {
af: 'US', am: 'US',
bf: 'UK', bm: 'UK',
ef: 'ES', em: 'ES',
ff: 'FR',
hf: 'IN', hm: 'IN',
'if': 'IT', im: 'IT',
jf: 'JP', jm: 'JP',
pf: 'PT', pm: 'PT',
zf: 'ZH', zm: 'ZH',
};
const genderMap: Record<string, string> = {
af: 'F', am: 'M',
bf: 'F', bm: 'M',
ef: 'F', em: 'M',
ff: 'F',
hf: 'F', hm: 'M',
'if': 'F', im: 'M',
jf: 'F', jm: 'M',
pf: 'F', pm: 'M',
zf: 'F', zm: 'M',
};
const prefix = v.slice(0, 2);
const name = v.slice(3);
// Capitalise and strip legacy v0 prefix.
const displayName = name
.replace(/^v0/, '')
.replace(/^([a-z])/, (c: string) => c.toUpperCase());
const lang = langMap[prefix] ?? prefix.toUpperCase();
const gender = genderMap[prefix] ?? '?';
return `${displayName} (${lang} ${gender})`;
}
/** Stop any currently playing sample. */
function stopSample() {
if (sampleAudio) {
sampleAudio.pause();
sampleAudio.src = '';
sampleAudio = null;
}
samplePlayingVoice = null;
}
/** Play a voice sample from MinIO. */
async function playSample(voice: string) {
// If this voice is already playing, stop it.
if (samplePlayingVoice === voice) {
stopSample();
return;
}
stopSample();
samplePlayingVoice = voice;
try {
const res = await fetch(`/api/presign/voice-sample?voice=${encodeURIComponent(voice)}`);
if (res.status === 404) {
// Sample not generated yet — silently ignore
samplePlayingVoice = null;
return;
}
if (!res.ok) throw new Error(`presign failed: ${res.status}`);
const data = (await res.json()) as { url: string };
const audio = new Audio(data.url);
sampleAudio = audio;
audio.onended = () => {
if (samplePlayingVoice === voice) stopSample();
};
audio.onerror = () => {
if (samplePlayingVoice === voice) stopSample();
};
await audio.play();
} catch {
samplePlayingVoice = null;
}
}
/** Select a voice and close the panel. */
function selectVoice(voice: string) {
stopSample();
audioStore.voice = voice;
showVoicePanel = false;
}
// Keep nextChapter in the store so the layout's onended can navigate.
// NOTE: we do NOT clear on unmount here — the store retains the value so
// onended (which may fire after {#key} unmounts this component) can still
@@ -94,6 +202,14 @@
}
});
// Close voice panel when user clicks outside (escape key).
function handleKeyDown(e: KeyboardEvent) {
if (e.key === 'Escape') {
stopSample();
showVoicePanel = false;
}
}
// ── 90% pre-fetch trigger ─────────────────────────────────────────────────
// Watch playback progress; when >= 90% of current chapter, pre-generate
// the next chapter's audio so it's ready when we navigate.
@@ -220,6 +336,9 @@
if (nextChapter === null || nextChapter === undefined) return;
if (audioStore.nextStatus !== 'none') return; // already running or done
const voice = audioStore.voice;
const speed = audioStore.speed;
audioStore.nextStatus = 'prefetching';
audioStore.nextChapterPrefetched = nextChapter;
startNextProgress();
@@ -257,16 +376,42 @@
}
}
// ── Media Session ──────────────────────────────────────────────────────────
// Sets the OS-level media metadata so the book cover, title, and chapter
// appear on the phone lock screen / notification center.
function setMediaSession() {
if (typeof navigator === 'undefined' || !('mediaSession' in navigator)) return;
const artwork: MediaImage[] = cover
? [
{ src: cover, sizes: '512x512', type: 'image/jpeg' },
{ src: cover, sizes: '256x256', type: 'image/jpeg' }
]
: [];
navigator.mediaSession.metadata = new MediaMetadata({
title: chapterTitle || `Chapter ${chapter}`,
artist: bookTitle,
album: bookTitle,
artwork
});
}
// ── Core play flow ─────────────────────────────────────────────────────────
async function startPlayback() {
const voice = audioStore.voice;
const speed = audioStore.speed;
// Populate store metadata so layout + mini-bar have track info.
audioStore.slug = slug;
audioStore.chapter = chapter;
audioStore.chapterTitle = chapterTitle;
audioStore.bookTitle = bookTitle;
audioStore.voice = voice;
audioStore.speed = speed;
// Update OS media session (lock screen / notification center).
setMediaSession();
audioStore.status = 'loading';
audioStore.errorMsg = '';
@@ -390,14 +535,118 @@
}
</script>
<svelte:window onkeydown={handleKeyDown} />
<div class="mt-6 p-4 rounded-lg bg-zinc-800 border border-zinc-700">
<div class="flex items-center gap-2 mb-3">
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 3v10.55A4 4 0 1014 17V7h4V3h-6z"/>
</svg>
<span class="text-sm text-zinc-300 font-medium">Audio Narration</span>
<div class="flex items-center justify-between gap-2 mb-3">
<div class="flex items-center gap-2">
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 3v10.55A4 4 0 1014 17V7h4V3h-6z"/>
</svg>
<span class="text-sm text-zinc-300 font-medium">Audio Narration</span>
</div>
<!-- Voice selector button -->
{#if voices.length > 0}
<button
onclick={() => { stopSample(); showVoicePanel = !showVoicePanel; }}
class="flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium transition-colors {showVoicePanel
? 'text-amber-400 bg-amber-400/15 hover:bg-amber-400/25'
: 'text-zinc-400 bg-zinc-700 hover:bg-zinc-600 hover:text-zinc-200'}"
title="Change voice"
>
<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1-9c0-.55.45-1 1-1s1 .45 1 1v6c0 .55-.45 1-1 1s-1-.45-1-1V5zm6 6c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/>
</svg>
<span class="max-w-[80px] truncate">{voiceLabel(audioStore.voice)}</span>
<svg class="w-3 h-3 flex-shrink-0 transition-transform {showVoicePanel ? 'rotate-180' : ''}" fill="currentColor" viewBox="0 0 24 24">
<path d="M7 10l5 5 5-5z"/>
</svg>
</button>
{/if}
</div>
<!-- ── Voice selector panel ──────────────────────────────────────────── -->
{#if showVoicePanel && voices.length > 0}
<div class="mb-3 rounded-lg border border-zinc-600 bg-zinc-900 overflow-hidden">
<div class="px-3 py-2 border-b border-zinc-700 flex items-center justify-between">
<span class="text-xs font-semibold text-zinc-400 uppercase tracking-wider">Choose Voice</span>
<button
onclick={() => { stopSample(); showVoicePanel = false; }}
class="text-zinc-500 hover:text-zinc-300 transition-colors"
aria-label="Close voice selector"
>
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
<div class="max-h-64 overflow-y-auto">
{#each voices as v (v)}
<div
class="flex items-center gap-2 px-3 py-2 hover:bg-zinc-800 transition-colors cursor-pointer {audioStore.voice === v ? 'bg-amber-400/10' : ''}"
role="button"
tabindex="0"
onclick={() => selectVoice(v)}
onkeydown={(e) => e.key === 'Enter' && selectVoice(v)}
>
<!-- Selected indicator -->
<div class="w-4 flex-shrink-0">
{#if audioStore.voice === v}
<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 24 24">
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>
</svg>
{/if}
</div>
<!-- Voice name -->
<span class="flex-1 text-xs {audioStore.voice === v ? 'text-amber-400 font-medium' : 'text-zinc-300'}">
{voiceLabel(v)}
</span>
<span class="text-zinc-600 text-xs font-mono">{v}</span>
<!-- Sample play button (stop propagation so click doesn't select) -->
<button
onclick={(e) => { e.stopPropagation(); playSample(v); }}
class="p-1 rounded transition-colors flex-shrink-0 {samplePlayingVoice === v
? 'text-amber-400 bg-amber-400/15 hover:bg-amber-400/25'
: 'text-zinc-500 hover:text-zinc-200 hover:bg-zinc-700'}"
title={samplePlayingVoice === v ? 'Stop sample' : 'Play sample'}
aria-label={samplePlayingVoice === v ? `Stop ${v} sample` : `Play ${v} sample`}
>
{#if samplePlayingVoice === v}
<!-- Stop icon -->
<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
<path d="M6 6h12v12H6z"/>
</svg>
{:else}
<!-- Play icon -->
<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
{/if}
</button>
</div>
{/each}
</div>
<div class="px-3 py-2 border-t border-zinc-700 bg-zinc-800/50">
<p class="text-xs text-zinc-500">
New voice applies on next "Play narration".
{#if voices.length > 0}
<a
href="/api/audio/voice-samples"
class="text-zinc-400 hover:text-amber-400 transition-colors underline"
onclick={(e) => {
e.preventDefault();
fetch('/api/audio/voice-samples', { method: 'POST' }).catch(() => {});
}}
>Generate missing samples</a>
{/if}
</p>
</div>
</div>
{/if}
{#if audioStore.isCurrentChapter(slug, chapter)}
<!-- ── This chapter is the active one ── -->