feat: Segment article text for improved playback

Splits article content into smaller audio segments. This allows for more granular control over playback, faster processing, and improved user experience by enabling auto-scrolling to the currently read segment.

Updates `types.ts` to include `AudioSegment` interface and modify `Article` to hold `segments`, `currentSegmentIndex`, and `audioUrl` per segment.

Introduces `segmentText` utility in `services/textUtils.ts` for robust text segmentation logic.

Modifies `App.tsx` to utilize the new segmentation approach for fetching and processing audio.

Enhances `components/ReaderView.tsx` to display and auto-scroll through segmented text, highlighting the current segment during playback.
This commit is contained in:
Anthony
2025-11-19 19:57:43 +08:00
parent 0775104b69
commit 78f1e0e93c
4 changed files with 345 additions and 153 deletions

View File

@@ -1,3 +1,4 @@
export enum VoiceName {
Puck = 'Puck',
Charon = 'Charon',
@@ -17,12 +18,23 @@ export enum PlaybackStatus {
COMPLETED = 'COMPLETED'
}
export interface AudioSegment {
id: string;
text: string;
audioUrl?: string; // Blob URL for this specific segment
isLoading: boolean;
hasError: boolean;
}
export interface Article {
id: string;
url: string;
title: string;
// We keep the full text for display/reference
text: string;
audioUrl?: string; // Blob URL for the WAV file
// We split content into segments for faster playback
segments: AudioSegment[];
currentSegmentIndex: number;
status: PlaybackStatus;
errorMessage?: string;
}
@@ -32,4 +44,4 @@ export interface PlayerState {
playbackRate: number;
currentArticleId: string | null;
selectedVoice: VoiceName;
}
}