mirror of
https://github.com/jamiepine/voicebox.git
synced 2026-09-19 23:00:45 -07:00
- Added a new AudioPlayer component for audio playback functionality, utilizing WaveSurfer for waveform visualization. - Integrated audio playback controls into the HistoryTable and SampleList components, allowing users to play audio directly from their history and samples. - Updated player state management to handle audio URL, ID, title, and playback state. - Introduced a custom Slider component for volume control and seek functionality. - Enhanced UI to ensure the AudioPlayer is always visible except in settings, improving user experience.
56 lines
1.3 KiB
TypeScript
56 lines
1.3 KiB
TypeScript
import { create } from 'zustand';
|
|
|
|
interface PlayerState {
|
|
audioUrl: string | null;
|
|
audioId: string | null;
|
|
title: string | null;
|
|
isPlaying: boolean;
|
|
currentTime: number;
|
|
duration: number;
|
|
volume: number;
|
|
isLooping: boolean;
|
|
|
|
setAudio: (url: string, id: string, title?: string) => void;
|
|
setIsPlaying: (playing: boolean) => void;
|
|
setCurrentTime: (time: number) => void;
|
|
setDuration: (duration: number) => void;
|
|
setVolume: (volume: number) => void;
|
|
toggleLoop: () => void;
|
|
reset: () => void;
|
|
}
|
|
|
|
export const usePlayerStore = create<PlayerState>((set) => ({
|
|
audioUrl: null,
|
|
audioId: null,
|
|
title: null,
|
|
isPlaying: false,
|
|
currentTime: 0,
|
|
duration: 0,
|
|
volume: 1,
|
|
isLooping: false,
|
|
|
|
setAudio: (url, id, title) =>
|
|
set({
|
|
audioUrl: url,
|
|
audioId: id,
|
|
title: title || null,
|
|
currentTime: 0,
|
|
isPlaying: false,
|
|
}),
|
|
setIsPlaying: (playing) => set({ isPlaying: playing }),
|
|
setCurrentTime: (time) => set({ currentTime: time }),
|
|
setDuration: (duration) => set({ duration }),
|
|
setVolume: (volume) => set({ volume }),
|
|
toggleLoop: () => set((state) => ({ isLooping: !state.isLooping })),
|
|
reset: () =>
|
|
set({
|
|
audioUrl: null,
|
|
audioId: null,
|
|
title: null,
|
|
isPlaying: false,
|
|
currentTime: 0,
|
|
duration: 0,
|
|
isLooping: false,
|
|
}),
|
|
}));
|