wip
Browse files- src/components/court/Court.tsx +20 -5
- src/components/end/End.tsx +7 -0
src/components/court/Court.tsx
CHANGED
@@ -17,18 +17,21 @@ const CourtScene: FC<CourtSceneProps> = ({
|
|
17 |
}) => {
|
18 |
const [showFirstImage, setShowFirstImage] = useState(true);
|
19 |
const audioRef = useRef<HTMLAudioElement | null>(null);
|
|
|
20 |
|
21 |
useEffect(() => {
|
22 |
const playAudio = async () => {
|
|
|
|
|
|
|
23 |
try {
|
24 |
-
|
25 |
|
26 |
-
// Cleanup previous audio if exists
|
27 |
if (audioRef.current) {
|
28 |
audioRef.current.pause();
|
29 |
audioRef.current = null;
|
30 |
}
|
31 |
-
|
32 |
const response = await fetch('/api/voice', {
|
33 |
method: 'POST',
|
34 |
headers: {
|
@@ -47,24 +50,36 @@ const CourtScene: FC<CourtSceneProps> = ({
|
|
47 |
|
48 |
const audioBlob = await response.blob();
|
49 |
const audioUrl = URL.createObjectURL(audioBlob);
|
|
|
|
|
|
|
|
|
|
|
|
|
50 |
const audio = new Audio(audioUrl);
|
51 |
audioRef.current = audio;
|
|
|
|
|
|
|
|
|
|
|
52 |
await audio.play();
|
53 |
} catch (error) {
|
54 |
console.error('Error playing audio:', error);
|
|
|
55 |
}
|
56 |
};
|
57 |
|
58 |
playAudio();
|
59 |
|
60 |
return () => {
|
|
|
61 |
if (audioRef.current) {
|
62 |
audioRef.current.pause();
|
63 |
audioRef.current = null;
|
64 |
}
|
65 |
};
|
66 |
-
|
67 |
-
}, [currentQuestion]);
|
68 |
|
69 |
const handleNextScene = () => {
|
70 |
if (audioRef.current) {
|
|
|
17 |
}) => {
|
18 |
const [showFirstImage, setShowFirstImage] = useState(true);
|
19 |
const audioRef = useRef<HTMLAudioElement | null>(null);
|
20 |
+
const isPlayingRef = useRef<boolean>(false);
|
21 |
|
22 |
useEffect(() => {
|
23 |
const playAudio = async () => {
|
24 |
+
// Si déjà en train de jouer, on ne fait rien
|
25 |
+
if (isPlayingRef.current || !currentQuestion) return;
|
26 |
+
|
27 |
try {
|
28 |
+
isPlayingRef.current = true;
|
29 |
|
|
|
30 |
if (audioRef.current) {
|
31 |
audioRef.current.pause();
|
32 |
audioRef.current = null;
|
33 |
}
|
34 |
+
|
35 |
const response = await fetch('/api/voice', {
|
36 |
method: 'POST',
|
37 |
headers: {
|
|
|
50 |
|
51 |
const audioBlob = await response.blob();
|
52 |
const audioUrl = URL.createObjectURL(audioBlob);
|
53 |
+
|
54 |
+
if (audioRef.current) {
|
55 |
+
audioRef.current.pause();
|
56 |
+
audioRef.current = null;
|
57 |
+
}
|
58 |
+
|
59 |
const audio = new Audio(audioUrl);
|
60 |
audioRef.current = audio;
|
61 |
+
|
62 |
+
audio.addEventListener('ended', () => {
|
63 |
+
isPlayingRef.current = false;
|
64 |
+
});
|
65 |
+
|
66 |
await audio.play();
|
67 |
} catch (error) {
|
68 |
console.error('Error playing audio:', error);
|
69 |
+
isPlayingRef.current = false;
|
70 |
}
|
71 |
};
|
72 |
|
73 |
playAudio();
|
74 |
|
75 |
return () => {
|
76 |
+
isPlayingRef.current = false;
|
77 |
if (audioRef.current) {
|
78 |
audioRef.current.pause();
|
79 |
audioRef.current = null;
|
80 |
}
|
81 |
};
|
82 |
+
}, [currentQuestion, reaction]);
|
|
|
83 |
|
84 |
const handleNextScene = () => {
|
85 |
if (audioRef.current) {
|
src/components/end/End.tsx
CHANGED
@@ -52,6 +52,13 @@ const EndScene: FC<EndSceneProps> = ({
|
|
52 |
|
53 |
const audioBlob = await response.blob();
|
54 |
const audioUrl = URL.createObjectURL(audioBlob);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
55 |
const audio = new Audio(audioUrl);
|
56 |
audioRef.current = audio;
|
57 |
await audio.play();
|
|
|
52 |
|
53 |
const audioBlob = await response.blob();
|
54 |
const audioUrl = URL.createObjectURL(audioBlob);
|
55 |
+
|
56 |
+
|
57 |
+
if (audioRef.current) {
|
58 |
+
audioRef.current.pause();
|
59 |
+
audioRef.current = null;
|
60 |
+
}
|
61 |
+
|
62 |
const audio = new Audio(audioUrl);
|
63 |
audioRef.current = audio;
|
64 |
await audio.play();
|