Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-08 03:28:51 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

🎧 fix(TTS): Improve State of audio playback, hook patterns, and fix undefined MediaSource (#3632)

Browse source
This commit is contained in:
Danny Avila 2024-08-13 12:08:55 -04:00 • committed by GitHub
parent e3ebcfd2b1
commit dc8d30ad90
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 108 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

12
client/src/components/Chat/Input/StreamAudio.tsx
View file

@ -5,9 +5,9 @@ import { useQueryClient } from '@tanstack/react-query';
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import type { TMessage } from 'librechat-data-provider';
import { useCustomAudioRef, MediaSourceAppender, usePauseGlobalAudio } from '~/hooks/Audio';
import { getLatestText, logger } from '~/utils';
import { useAuthContext } from '~/hooks';
import { globalAudioId } from '~/common';
import { getLatestText } from '~/utils';
import store from '~/store';
function timeoutPromise(ms: number, message?: string) {
@ -51,7 +51,7 @@ export default function StreamAudio({ index = 0 }) {
const latestText = getLatestText(latestMessage);
const shouldFetch = !!(
token &&
token != null &&
automaticPlayback &&
isSubmitting &&
latestMessage &&
@ -60,7 +60,7 @@ export default function StreamAudio({ index = 0 }) {
latestMessage.messageId &&
!latestMessage.messageId.includes('_') &&
!isFetching &&
activeRunId &&
activeRunId != null &&
activeRunId !== audioRunId
);
@ -109,7 +109,8 @@ export default function StreamAudio({ index = 0 }) {
const reader = response.body.getReader();
const type = 'audio/mpeg';
const browserSupportsType = MediaSource.isTypeSupported(type);
const browserSupportsType =
typeof MediaSource !== 'undefined' && MediaSource.isTypeSupported(type);
let mediaSource: MediaSourceAppender | undefined;
if (browserSupportsType) {
mediaSource = new MediaSourceAppender(type);
@ -210,6 +211,7 @@ export default function StreamAudio({ index = 0 }) {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [paramId]);
logger.log('StreamAudio.tsx - globalAudioURL:', globalAudioURL);
return (
<audio
ref={audioRef}
@ -222,7 +224,7 @@ export default function StreamAudio({ index = 0 }) {
height: '0px',
width: '0px',
}}
src={globalAudioURL || undefined}
src={globalAudioURL ?? undefined}
id={globalAudioId}
muted
autoPlay

13
client/src/components/Chat/Messages/MessageAudio.tsx
View file

@ -3,6 +3,7 @@ import { useRecoilValue } from 'recoil';
import type { TMessageContentParts } from 'librechat-data-provider';
import { VolumeIcon, VolumeMuteIcon, Spinner } from '~/components/svg';
import { useLocalize, useTextToSpeech } from '~/hooks';
import { logger } from '~/utils';
import store from '~/store';
type THoverButtons = {
@ -45,6 +46,12 @@ export default function MessageAudio({ isLast, index, messageId, content }: THov
}
}, [audioRef, isSpeaking, playbackRate, messageId]);
logger.log(
'MessageAudio: audioRef.current?.src, audioRef.current',
audioRef.current?.src,
audioRef.current,
);
return (
<>
<button
@ -75,6 +82,7 @@ export default function MessageAudio({ isLast, index, messageId, content }: THov
<audio
ref={audioRef}
controls
preload="none"
controlsList="nodownload nofullscreen noremoteplayback"
style={{
position: 'absolute',
@ -83,7 +91,10 @@ export default function MessageAudio({ isLast, index, messageId, content }: THov
height: '0px',
width: '0px',
}}
src={audioRef.current?.src ?? undefined}
src={audioRef.current?.src}
onError={(error) => {
console.error('Error fetching audio:', error);
}}
id={`audio-${messageId}`}
muted
autoPlay