still not fixed

frontend/src/Call/components/MediaPlayer.js

@@ -23,8 +23,9 @@ import "./MediaPlayer.css";
 
 
 const MediaPlayer = (props) => {
+
   const containerRef = useRef(null)
-  const audioRef = React.createRef();
+  const audioRef = useRef(new Audio());
   const call = props.call;
   const [sourceIndex, setSourceIndex] = useState(0);
   //const [wavesurfer, setWavesurfer] = useState(null)
@@ -59,8 +60,9 @@ const MediaPlayer = (props) => {
     barGap: 3,
     barRadius: 6,
     plugins: plugins,
-    backend: 'MediaElementWebAudio',
     responsive: true,
+    media: audioRef.current,
+    backend: 'MediaElement',
     //autoplay: true,
   })
   
@@ -71,22 +73,23 @@ const MediaPlayer = (props) => {
   // }, [wavesurfer])
   useEffect(() => {
     setSourceIndex(0);
+    if (audioRef.current) {
+        const audio = audioRef.current;
+        if ('mediaSession' in navigator) {
+          navigator.mediaSession.metadata = new MediaMetadata({
+            title: "Waiting for Call...",
+            album: 'OpenMHz',
+            artwork: [
+              { src: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
+              { src: '/android-chrome-192x192.png', sizes: '192x192', type: 'image/png' },
+              { src: '/android-chrome-192x192.png', sizes: '512x512', type: 'image/png' },
+            ]
+          });
+        }
 
-    if ('mediaSession' in navigator) {
+        audio.src = "/silence.m4a"; //wavesurfer.load("/silence.m4a");
-      navigator.mediaSession.metadata = new MediaMetadata({
+        regionsPlugin.clearRegions();
-        title: "Waiting for Call...",
+  }
-        album: 'OpenMHz',
-        artwork: [
-          { src: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
-          { src: '/android-chrome-192x192.png', sizes: '192x192', type: 'image/png' },
-          { src: '/android-chrome-192x192.png', sizes: '512x512', type: 'image/png' },
-        ]
-      });
-    }
-
-    wavesurfer && wavesurfer.load("/silence.m4a");
-    regionsPlugin.clearRegions();
-
     // // In browsers that don’t yet support this functionality,
     // // playPromise won’t be defined.
     // if (playPromise !== undefined) {
@@ -108,30 +111,53 @@ const MediaPlayer = (props) => {
     }
   }, [hasFinished]);
 
+
+  useEffect(() => {
+    const readyState = audioRef.current.readyState;
+    const audio = audioRef.current;
+    if (readyState === 4) {
+     // wavesurfer.load(audioRef.current.src);
+    }
+    console.log("readyState: " + readyState); 
+  }, [audioRef.current.readyState]);
+
   useEffect(() => {
     if (call && wavesurfer) {
-      wavesurfer.load(call.url);
+      const audio = audioRef.current;
-    }
+      if (audio) {
-    setSourceIndex(0);
+      audio.src = call.url; 
-  }, [call]);
+      audio.load();
+      const playPromise = audio.play();
 
-  useEffect(() => {
+      // In browsers that don’t yet support this functionality,
+      // playPromise won’t be defined.
+      if (playPromise !== undefined) {
+        
+        playPromise.then(function () {
+          console.log("clearRegions");
+          regionsPlugin.clearRegions();
+          call.srcList.forEach(src => {
+            regionsPlugin.addRegion({
+              start: src.pos,
+              color: "rgba(128, 128, 128, 1.0)",
+              drag: false,
+              resize: false
+            });
+          });
 
-    if (isReady && wavesurfer) {
+        }).catch(function (error) {
-      wavesurfer.play()
+          console.log("Automatic playback failed: " + error);
-      //regionsPlugin.clearRegions();
+          //handlePause();
-      if (call) {
+          //onEnded();
-        // call.srcList.forEach(src => {
+          // Show a UI element to let the user manually start playback.
-        //   regionsPlugin.addRegion({
+        });
-        //     start: src.pos,
+      } else {
-        //     color: "rgba(128, 128, 128, 1.0)",
+        audio.src = false;
-        //     drag: false,
-        //     resize: false
-        //   });
-        // });
       }
     }
-  }, [isReady]);
+  }
+    setSourceIndex(0);
+  }, [call]);