kunthawat/ALwrity
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: WebM/Opus audio duration shows zero - add durationchange listener and preload=auto

Browse Source
This commit is contained in:
ajaysi
2026-04-22 06:10:15 +05:30
parent b1ca29f7f7
commit 6e9c11744c
2 changed files with 14 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/OnboardingWizard/PersonalizationStep/components/VoiceAvatarPlaceholder.tsx
View File

@@ -383,7 +383,7 @@ export const VoiceAvatarPlaceholder: React.FC<{ domainName?: string; onVoiceSet?
}
setAudioFile(file);
const url = URL.createObjectURL(blob);
console.log('[VoiceClone] Created audio preview URL:', url, 'size:', file.size, 'type:', blob.type);
if (process.env.NODE_ENV === 'development') console.log('[VoiceClone] Created audio preview URL:', url.split('?')[0], 'size:', file.size, 'type:', blob.type);
setAudioPreviewUrl(url);
} catch (err) {
console.error('[VoiceClone] Error creating audio blob:', err);
@@ -813,7 +813,8 @@ export const VoiceAvatarPlaceholder: React.FC<{ domainName?: string; onVoiceSet?
<audio
key={audioPreviewUrl}
controls
src={audioPreviewUrl}
src={audioPreviewUrl}
preload="auto"
style={{ height: '30px', width: '100%' }}
onError={(e) => {
console.error('[VoiceClone] Audio playback error:', e);
@@ -1075,7 +1076,8 @@ export const VoiceAvatarPlaceholder: React.FC<{ domainName?: string; onVoiceSet?
<audio
key={audioPreviewUrl}
controls
src={audioPreviewUrl}
src={audioPreviewUrl}
preload="auto"
style={{ width: '100%', height: '28px' }}
onError={(e) => {
console.error('[VoiceClone] Source audio playback error:', e);

11
frontend/src/components/PodcastMaker/InlineAudioPlayer.tsx
View File

@@ -105,7 +105,12 @@ export const InlineAudioPlayer: React.FC<InlineAudioPlayerProps> = ({ audioUrl,
if (!audio || !blobUrl) return;
const updateTime = () => setCurrentTime(audio.currentTime);
const updateDuration = () => setDuration(audio.duration);
const updateDuration = () => {
const d = audio.duration;
if (d && isFinite(d) && d > 0) {
setDuration(d);
}
};
const handleEnd = () => setPlaying(false);
const handleError = () => {
setError('Audio playback error. Please try again.');
@@ -114,12 +119,14 @@ export const InlineAudioPlayer: React.FC<InlineAudioPlayerProps> = ({ audioUrl,
audio.addEventListener("timeupdate", updateTime);
audio.addEventListener("loadedmetadata", updateDuration);
audio.addEventListener("durationchange", updateDuration);
audio.addEventListener("ended", handleEnd);
audio.addEventListener("error", handleError);
return () => {
audio.removeEventListener("timeupdate", updateTime);
audio.removeEventListener("loadedmetadata", updateDuration);
audio.removeEventListener("durationchange", updateDuration);
audio.removeEventListener("ended", handleEnd);
audio.removeEventListener("error", handleError);
};
@@ -239,7 +246,7 @@ export const InlineAudioPlayer: React.FC<InlineAudioPlayerProps> = ({ audioUrl,
</Tooltip>
</Stack>
{effectiveAudioUrl && (
<audio ref={audioRef} src={effectiveAudioUrl} preload="metadata" />
<audio ref={audioRef} src={effectiveAudioUrl} preload="auto" />
)}
</Stack>
</Paper>