Melhoria no player de áudio

Correção para poder tocar áudio em dispositivos IOS.
rtenorioh · Jan 27, 2023 · 7453215 · 7453215
1 parent 8fbdd3c
commit 7453215
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 37 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -19,6 +19,7 @@
     "markdown-to-jsx": "^7.1.0",
     "material-ui-color": "^1.2.0",
     "mic-recorder-to-mp3": "^2.2.2",
+    "mui-audio-player": "^1.0.1",
     "qrcode.react": "^1.0.0",
     "react": "^16.13.1",
     "react-color": "^2.19.3",
@@ -54,4 +55,4 @@
       "last 1 safari version"
     ]
   }
-}
+}
diff --git a/frontend/src/components/Audio/index.jsx b/frontend/src/components/Audio/index.jsx
@@ -1,14 +1,12 @@
-import { Button } from "@material-ui/core";
-import React, { useRef } from "react";
-import { useEffect } from "react";
-import { useState } from "react";
+import React, { useRef, useEffect, useState } from "react";
+import { AudioPlayer } from 'mui-audio-player';
 
 const LS_NAME = 'audioMessageRate';
 
-export default function({url}) {
+export default function ({ url }) {
     const audioRef = useRef(null);
-    const [audioRate, setAudioRate] = useState( parseFloat(localStorage.getItem(LS_NAME) || "1") );
-    const [showButtonRate, setShowButtonRate] = useState(false);
+    const [audioRate] = useState(parseFloat(localStorage.getItem(LS_NAME) || "1"));
+    const [,setShowButtonRate] = useState(false);
 
     useEffect(() => {
         audioRef.current.playbackRate = audioRate;
@@ -27,36 +25,18 @@ export default function({url}) {
         };
     }, []);
 
-    const toogleRate = () => {
-        let newRate = null;
-
-        switch(audioRate) {
-            case 0.5:
-                newRate = 1;
-                break;
-            case 1:
-                newRate = 1.5;
-                break;
-            case 1.5:
-                newRate = 2;
-                break;
-            case 2:
-                newRate = 0.5;
-                break;
-            default:
-                newRate = 1;
-                break;
-        }
-
-        setAudioRate(newRate);
-    };
-
     return (
         <>
-            <audio ref={audioRef} controls>
-                <source src={url} type="audio/ogg"></source>
-            </audio>
-            {showButtonRate && <Button style={{marginLeft: "5px", marginTop: "-45px"}} onClick={toogleRate}>{audioRate}x</Button>}
+            <AudioPlayer
+                debug={false}
+                width="450px"
+                download={true}
+                ref={audioRef} controls
+                src={url} type="audio/ogg"
+                autoPlay={false}
+                rounded={true}
+                elevation={4}
+            />
         </>
     );
-}
+}