Added timers for audio recorder and playing feature (#322)

package.json

@@ -183,7 +183,7 @@
     "usfm-editor": "0.8.7",
     "usfm-grammar": "^2.3.0",
     "uuid": "^8.3.2",
-    "wavesurfer.js": "^6.6.2",
+    "wavesurfer.js": "^6.6.4",
     "webpack-node-externals": "^3.0.0",
     "winston": "^3.7.2",
     "word-aligner": "1.0.0",

renderer/src/components/AudioRecorder/components/Player.js

@@ -40,6 +40,30 @@ const Player = ({
   const [currentSpeed, setCurrentSpeed] = useState(1);
   const speed = [0.5, 1, 1.5, 2];
   const path = require('path');
+  const [time, setTime] = useState(0);
+  const [playTime, setPlayTime] = useState(0);
+  // state to check stopwatch running or not
+  const [isRunning, setIsRunning] = useState(false);
+
+  useEffect(() => {
+    let intervalId;
+    if (isRunning) {
+      // setting time from 0 to 1 every 10 milisecond using javascript setInterval method
+      intervalId = setInterval(() => setTime(time + 1), 10);
+    }
+    return () => clearInterval(intervalId);
+  }, [isRunning, time]);
+
+  // playTime is the total time of audio & time is recording time
+  // Minutes calculation
+  const minutes = playTime > 0 ? Math.floor(playTime / 60) : (time > 0 ? Math.floor((time % 360000) / 6000) : 0);
+
+  // Seconds calculation
+  const seconds = playTime > 0 ? Math.floor(playTime % 60) : (time > 0 ? Math.floor((time % 6000) / 100) : 0);
+
+  // Milliseconds calculation
+  const milliseconds = playTime > 0 ? Math.floor((playTime - Math.floor(playTime)) * 100) : (time > 0 ? time % 100 : 0);
+
   const handleRecord = () => {
     // check whether its a first record or re-recording
     if (url[take]) {
@@ -52,6 +76,8 @@ const Player = ({
     } else {
       // Recording for the first time
       setTrigger('record');
+      setTime(0);
+      setIsRunning(true);
     }
   };
   const handleDelete = () => {
@@ -177,6 +203,20 @@ const Player = ({
               </Listbox.Options>
             </Listbox>
           </div>
+          <div className="flex flex-col px-10 items-center border-r border-r-gray-800">
+            <div className="flex flex-col items-center text-xl">
+              <div className="text-xs text-gray-300 uppercase tracking-wider">
+                m:s:ms
+              </div>
+              <div>
+                {minutes.toString().padStart(2, '0')}
+                :
+                {seconds.toString().padStart(2, '0')}
+                :
+                {milliseconds.toString().padStart(2, '0')}
+              </div>
+            </div>
+          </div>
           <div className="flex flex-row items-center justify-evenly border-r border-r-gray-800">
             <div className="flex flex-col items-center">
               {((trigger === 'record' || trigger === 'recResume') && (
@@ -188,7 +228,7 @@ const Player = ({
                   type="button"
                   title="P"
                   className="p-2 bg-error rounded-md hover:bg-dark"
-                  onClick={() => setTrigger('recPause')}
+                  onClick={() => { setTrigger('recPause'); setIsRunning(false); }}
                 >
                   <PauseIcon
                     fill="currentColor"
@@ -207,7 +247,7 @@ const Player = ({
                   type="button"
                   title="E"
                   className="p-2 bg-dark rounded-md hover:bg-error"
-                  onClick={() => setTrigger('recResume')}
+                  onClick={() => { setTrigger('recResume'); setIsRunning(true); }}
                 >
                   <PlayIcon
                     fill="currentColor"
@@ -244,7 +284,7 @@ const Player = ({
                 type="button"
                 title="S"
                 className="p-2 bg-dark rounded-md hover:bg-primary"
-                onClick={() => setTrigger('recStop')}
+                onClick={() => { setTrigger('recStop'); setIsRunning(false); }}
               >
                 <StopIcon
                   fill="currentColor"
@@ -263,7 +303,7 @@ const Player = ({
                 type="button"
                 title="<"
                 className="p-2 bg-dark rounded-md hover:bg-error"
-                onClick={() => setTrigger('rewind')}
+                onClick={() => { setTrigger('rewind'); setTime(0); setPlayTime(0); }}
               >
                 <ArrowPathIcon
                   className="w-5 h-5"
@@ -343,7 +383,7 @@ const Player = ({
                 </button>
                 <input
                   type="range"
-                  className="md:w-12 w-full xl:w-44"
+                  className="md:w-12 w-full xl:w-44 accent-primary"
                   min={0}
                   max={1}
                   step={0.1}
@@ -385,7 +425,7 @@ const Player = ({
             } text-xs font-bold ${
               url?.take1 ? 'text-white' : 'text-black'
             } uppercase tracking-wider rounded-full`}
-                onClick={() => changeTake('take1')}
+                onClick={() => { changeTake('take1'); setTime(0); setPlayTime(0); }}
                 title="select : A"
                 onDoubleClick={() => changeDefault(1)}
               >
@@ -406,7 +446,7 @@ const Player = ({
             } text-xs font-bold ${
               url?.take2 ? 'text-white' : 'text-black'
             } uppercase tracking-wider rounded-full`}
-                onClick={() => changeTake('take2')}
+                onClick={() => { changeTake('take2'); setTime(0); setPlayTime(0); }}
                 title="select : B"
                 onDoubleClick={() => changeDefault(2)}
               >
@@ -427,7 +467,7 @@ const Player = ({
             } text-xs font-bold ${
               url?.take3 ? 'text-white' : 'text-black'
             } uppercase tracking-wider rounded-full`}
-                onClick={() => changeTake('take3')}
+                onClick={() => { changeTake('take3'); setTime(0); setPlayTime(0); }}
                 title="select : C"
                 onDoubleClick={() => changeDefault(3)}
               >
@@ -474,6 +514,7 @@ const Player = ({
             speed={currentSpeed}
             show={false}
             setTrigger={setTrigger}
+            setAudioPlayBack={setPlayTime}
           />
         </div>
       </div>

renderer/src/components/AudioRecorder/components/WaveForm.js

@@ -29,6 +29,7 @@ const AudioWaveForm = (props) => {
     barGap,
     barWidth,
     barRadius,
+    setAudioPlayBack,
   } = props;
 
   const waveformRef = useRef(null);
@@ -65,6 +66,22 @@ const AudioWaveForm = (props) => {
     wavesurfer.current?.load(currentUrl);
     // wavesurfer.current?.setVolume(volume);
     wavesurfer.current?.setPlaybackRate(speed);
+    wavesurfer.current.on('ready', () => {
+      const duration = wavesurfer?.current?.getDuration();
+      if (duration && duration !== Infinity) {
+        setAudioPlayBack(duration);
+      } else {
+        setAudioPlayBack(0);
+      }
+    });
+
+    wavesurfer.current.on('audioprocess', (time) => {
+      setAudioPlayBack(time);
+    });
+
+    wavesurfer.current.on('seeking', (time) => {
+      setAudioPlayBack(time);
+    });
   };
 
   const createRecForm = async () => {
@@ -88,6 +105,7 @@ const AudioWaveForm = (props) => {
         if (wavesurfer.current) {
           wavesurfer.current.destroy();
           wavesurfer.current.microphone.destroy();
+          setAudioPlayBack(0);
         }
       };
     }
@@ -236,4 +254,5 @@ AudioWaveForm.propTypes = {
   resumeRecording: PropTypes.func,
   setTrigger: PropTypes.func,
   interaction: PropTypes.bool,
+  setAudioPlayBack: PropTypes.any,
 };

yarn.lock

@@ -19920,7 +19920,7 @@ [email protected], watchpack@^2.4.0:
     glob-to-regexp "^0.4.1"
     graceful-fs "^4.1.2"
 
-wavesurfer.js@^6.6.2:
+wavesurfer.js@^6.6.4:
   version "6.6.4"
   resolved "https://registry.yarnpkg.com/wavesurfer.js/-/wavesurfer.js-6.6.4.tgz#45e2d613fbfd60d906362ed6e11b649f481e4485"
   integrity sha512-nBbc0pD/3FdClxKUKL1UW2V9AJPL+JOjC8T6/YF9/FCAn4uo+H6Y8VBkXo9UJXIHoBewoc7iXj3tPeL0UCJhjA==