diff --git a/frontend/src/components/Audio/index.jsx b/frontend/src/components/Audio/index.jsx
new file mode 100644
index 0000000..d7fee0b
--- /dev/null
+++ b/frontend/src/components/Audio/index.jsx
@@ -0,0 +1,66 @@
+import { Button } from "@material-ui/core";
+import React, { useRef } from "react";
+import { useEffect } from "react";
+import { useState } from "react";
+
+const LS_NAME = 'audioMessageRate';
+
+export default function({url}) {
+ const audioRef = useRef(null);
+ const [audioRate, setAudioRate] = useState( parseFloat(localStorage.getItem(LS_NAME) || "1") );
+ const [showButtonRate, setShowButtonRate] = useState(false);
+
+ useEffect(() => {
+ console.log('set-ar', audioRate);
+
+ audioRef.current.playbackRate = audioRate;
+ localStorage.setItem(LS_NAME, audioRate);
+ }, [audioRate]);
+
+ useEffect(() => {
+ audioRef.current.onplaying = () => {
+ setShowButtonRate(true);
+ };
+ audioRef.current.onpause = () => {
+ setShowButtonRate(false);
+ };
+ audioRef.current.onended = () => {
+ setShowButtonRate(false);
+ };
+ }, []);
+
+ 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;
+ }
+
+ console.log('new-ar', newRate);
+
+ setAudioRate(newRate);
+ };
+
+ return (
+ <>
+
+ {showButtonRate && }
+ >
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/components/MessagesList/index.js b/frontend/src/components/MessagesList/index.js
index 181a91c..383aaa5 100644
--- a/frontend/src/components/MessagesList/index.js
+++ b/frontend/src/components/MessagesList/index.js
@@ -30,6 +30,7 @@ import whatsBackground from "../../assets/wa-background.png";
import api from "../../services/api";
import toastError from "../../errors/toastError";
+import Audio from "../Audio";
const useStyles = makeStyles((theme) => ({
messagesListWrapper: {
@@ -467,11 +468,7 @@ const MessagesList = ({ ticketId, isGroup }) => {
else if (message.mediaType === "image") {
return ;
} else if (message.mediaType === "audio") {
- return (
-
- );
+ return
} else if (message.mediaType === "video") {
return (