diff --git a/package.json b/package.json index fd859be4e..78dfc3661 100644 --- a/package.json +++ b/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", diff --git a/renderer/src/components/AudioRecorder/components/Player.js b/renderer/src/components/AudioRecorder/components/Player.js index 03f51e488..7bce950f3 100644 --- a/renderer/src/components/AudioRecorder/components/Player.js +++ b/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 = ({ +
+
+
+ m:s:ms +
+
+ {minutes.toString().padStart(2, '0')} + : + {seconds.toString().padStart(2, '0')} + : + {milliseconds.toString().padStart(2, '0')} +
+
+
{((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); }} > setTrigger('recResume')} + onClick={() => { setTrigger('recResume'); setIsRunning(true); }} > setTrigger('recStop')} + onClick={() => { setTrigger('recStop'); setIsRunning(false); }} > setTrigger('rewind')} + onClick={() => { setTrigger('rewind'); setTime(0); setPlayTime(0); }} > 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} />
diff --git a/renderer/src/components/AudioRecorder/components/WaveForm.js b/renderer/src/components/AudioRecorder/components/WaveForm.js index 03f0309f2..7b20209a4 100644 --- a/renderer/src/components/AudioRecorder/components/WaveForm.js +++ b/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, }; diff --git a/yarn.lock b/yarn.lock index 27fdceb4b..d1a764ae0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -19920,7 +19920,7 @@ watchpack@2.4.0, 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==