Fix safari play on select

src/client/components/AudioPlayer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 export interface AudioPlayerProps {
   mp3StreamUrl: string | null;
@@ -10,6 +10,7 @@ export interface AudioPlayerProps {
   onPlay: () => void;
   cuePosition?: number;
 }
+
 export function AudioPlayer({
   mp3StreamUrl,
   onReady,
@@ -21,17 +22,18 @@ export function AudioPlayer({
   cuePosition,
 }: AudioPlayerProps) {
   const ref = useRef<HTMLAudioElement>(null);
+  const [shouldPlay, setShouldPlay] = useState(false);
 
   async function onCanPlayThrough() {
     const durationSecs = ref.current?.duration ?? 0;
     const durationMillis = durationSecs * 1000;
 
     onReady(durationMillis);
 
-    if (playing) {
+    if (shouldPlay) {
       ref.current
         ?.play()
-        .then()
+        .then(() => setShouldPlay(false))
         .catch((err) => console.error(`onCanPlay ${err}`));
     }
   }
@@ -40,6 +42,7 @@ export function AudioPlayer({
     if (ref.current && mp3StreamUrl) {
       ref.current.src = mp3StreamUrl;
       ref.current.load();
+      setShouldPlay(true);
     }
 
     return () => {