fix(*): add functionality for listen button

src/Components/Article/MainContainer.jsx

@@ -9,6 +9,7 @@ import {NamePlate, WarppedDate, GrayText, DisplayItem, BlogTitle, BlogSubTitle,
 import {ArticleHr} from '../../Layout/Hr/styledHr';
 import {AlertP} from '../../Layout/Paragraph/styledParagraph';
 import {AlertLink} from '../../Layout/ATag/styledATag';
+import TextToSpeech from './TextToSpeech';
 import marked from 'marked';
 import Newsletter from '../Subscribe/Newsletter';
 import RelatedPosts from './RelatedPosts';
@@ -47,7 +48,7 @@ const MainContainer = (props) => {
                     <span>&nbsp;&#183;&nbsp;</span>
                     <DisplayItem>{readTime} min read &nbsp; <AiFillStar/></DisplayItem>
                     <span>&nbsp;&#183;&nbsp;</span>
-                    <DisplayItem Green><AiFillPlayCircle style={{fontSize: 'larger'}}/> &nbsp; Listen</DisplayItem>
+                    <TextToSpeech text={markdown} />
                   </WarppedDate>
                 </div>
               </JustifyContent>

src/Components/Article/TextToSpeech.jsx

@@ -0,0 +1,77 @@
+import React, { useState, useEffect } from "react";
+import { DisplayItem } from '../../Layout/Text/styledText';
+import { AiFillPlayCircle, AiFillPauseCircle, AiFillStop } from 'react-icons/ai';
+
+const TextToSpeech = ({ text }) => {
+  const [isPaused, setIsPaused] = useState(false);
+  const [utterance, setUtterance] = useState(null);
+
+  useEffect(() => {
+    const synth = window.speechSynthesis;
+    const u = new SpeechSynthesisUtterance(text);
+
+    setUtterance(u);
+    setIsPaused(true)
+
+    return () => {
+        synth.cancel();
+    };
+}, [text]);
+
+const handlePlay = () => {
+    const synth = window.speechSynthesis;
+    const voices = synth.getVoices();
+
+    utterance.voice = voices[15];
+    utterance.rate = 0.95;
+
+    if (isPaused) {
+      synth.resume();
+    }
+
+    synth.speak(utterance);
+
+    setIsPaused(false);
+  };
+
+  const handlePause = () => {
+    const synth = window.speechSynthesis;
+
+    synth.pause();
+
+    setIsPaused(true);
+  };
+
+  const handleStop = () => {
+    const synth = window.speechSynthesis;
+
+    synth.cancel();
+
+    setIsPaused(true);
+  };
+
+  return (
+    <div style={{display: 'flex'}}>
+      {
+        isPaused ?
+            <DisplayItem Green onClick={handlePlay}>
+                <AiFillPlayCircle style={{fontSize: 'larger'}}/> 
+                &nbsp; {isPaused ? "Listen" : "Resume"}
+            </DisplayItem>
+      :
+            <DisplayItem Green onClick={handlePause}>
+                <AiFillPauseCircle style={{fontSize: 'larger'}}/> 
+                &nbsp; Pause
+            </DisplayItem>
+
+      }
+        &nbsp;&nbsp;
+        <DisplayItem Red onClick={handleStop}>
+            <AiFillStop style={{fontSize: 'larger'}}/> 
+            &nbsp; Stop
+        </DisplayItem>
+    </div>
+  );
+};
+
+export default TextToSpeech;

src/Layout/Text/styledText.jsx

@@ -54,6 +54,9 @@ export const DisplayItem= styled.div`
   ${props => props.Green && css`
     color: green;
   `}
+  ${props => props.Red && css`
+    color: red;
+  `}
 `;
 
 export const BlogTitle= styled.h2`