fix bugs && upgrade functionality -> indexInterface.js

src/pages/indexInterface.js

@@ -12,6 +12,14 @@ const IndexInterface = () => {
         return new Promise(resolve => setTimeout(resolve, ms))
     }
 
+    useEffect(() => loadAudio(), [])
+
+    const loadAudio = () => {
+        let audio = document.getElementById("audio");
+        audio.src = audioTest;
+        audio.load();
+    }
+
     const controlAudio = async () => {
         if (play === false) {
             setPlay(!play)
@@ -40,8 +48,8 @@ const IndexInterface = () => {
     const playAudio = async () => {
 
         let audio = document.getElementById("audio");
-        audio.src = audioTest;
-        audio.load();
+        // audio.src = audioTest;
+        // audio.load();
         audio.play();
         let context = new AudioContext();
         let src = context.createMediaElementSource(audio);
@@ -124,9 +132,11 @@ const IndexInterface = () => {
             }
             document.getElementById('audioCurrentTime').innerHTML = minutes
                 + ':'
+                + (seconds < 10 ? '0' : '')
                 + seconds
             document.getElementById('audioTime').innerHTML = maxMinutes
                 + ':'
+                + (maxSeconds < 10 ? '0' : '')
                 + maxSeconds
         }
         const progressBarAudio = async () => {
@@ -185,7 +195,7 @@ const IndexInterface = () => {
                     {play === false || pause === true ? '>' : '||'}
                 </div>
                 <div id='audioCurrentTime' >
-                    0:0
+                    0:00
                 </div>
                 <div>===</div>
                 <div id='audioProgressBar' onClick={e => barClick(e)} onDrag={e => barClick(e)}>
@@ -212,7 +222,7 @@ const IndexInterface = () => {
                 </div>
                 <div>===</div>
                 <div id='audioTime'>
-                    0:0
+                    0:00
                 </div>
             </div>
             <canvas id='canvas'>