更新

package-lock.json

@@ -9,17 +9,20 @@
       "version": "0.2.0",
       "license": "MIT",
       "dependencies": {
-        "@vant/use": "^1.5.1",
+        "@vant/use": "^1.5.2",
         "@vueuse/core": "^10.2.0",
         "clean-deep": "^3.4.0",
         "dayjs": "^1.11.7",
         "echarts": "^5.4.2",
         "numeral": "^2.0.6",
         "pinia": "^2.1.4",
+        "plyr": "^3.7.8",
+        "query-string": "^8.1.0",
         "umi-request": "^1.4.0",
         "vue": "^3.3.4",
         "vue-router": "^4.1.6",
-        "vue3-lottie": "^2.7.0"
+        "vue3-lottie": "^2.7.0",
+        "wavesurfer.js": "^7.0.0-beta.11"
       },
       "devDependencies": {
         "@babel/core": "^7.21.4",
@@ -2852,9 +2855,9 @@
       }
     },
     "node_modules/@vant/use": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmmirror.com/@vant/use/-/use-1.5.1.tgz",
-      "integrity": "sha512-Zxd7lDz/LliVYEQi3PR9a8CQa/kGCVzF0u9hqDMaTlgXlbG0wHMFPllrcG0ThR6bfs8xrYVuSFM9pJn6HSoUGQ==",
+      "version": "1.5.2",
+      "resolved": "https://registry.npmmirror.com/@vant/use/-/use-1.5.2.tgz",
+      "integrity": "sha512-CBK61iT568dCHUwFFsErGbW6/5tmrPnZJKGtcSy7Tjcrmws8Ku+YZo7IUFD9Xkj9MfSJ4pfhQ7pU2KouP5Cojg==",
       "peerDependencies": {
         "vue": "^3.0.0"
       }
@@ -3766,6 +3769,12 @@
         "is-what": "^3.14.1"
       }
     },
+    "node_modules/core-js": {
+      "version": "3.31.0",
+      "resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.31.0.tgz",
+      "integrity": "sha512-NIp2TQSGfR6ba5aalZD+ZQ1fSxGhDo/s1w0nx3RYzf2pnJxt7YynxFlFScP6eV7+GZsKO95NSjGxyJsU3DZgeQ==",
+      "hasInstallScript": true
+    },
     "node_modules/core-js-compat": {
       "version": "3.30.1",
       "resolved": "https://registry.npmmirror.com/core-js-compat/-/core-js-compat-3.30.1.tgz",
@@ -3828,6 +3837,11 @@
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.2.tgz",
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
+    "node_modules/custom-event-polyfill": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz",
+      "integrity": "sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w=="
+    },
     "node_modules/date-fns": {
       "version": "2.30.0",
       "resolved": "https://registry.npmmirror.com/date-fns/-/date-fns-2.30.0.tgz",
@@ -3877,6 +3891,14 @@
         }
       }
     },
+    "node_modules/decode-uri-component": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmmirror.com/decode-uri-component/-/decode-uri-component-0.4.1.tgz",
+      "integrity": "sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ==",
+      "engines": {
+        "node": ">=14.16"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmmirror.com/deep-is/-/deep-is-0.1.4.tgz",
@@ -4614,6 +4636,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/filter-obj": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/filter-obj/-/filter-obj-5.1.0.tgz",
+      "integrity": "sha512-qWeTREPoT7I0bifpPUXtxkZJ1XJzxWtfoWWkdVGqa+eCr3SHW/Ocp89o8vLvbUuQnadybJpjOKu4V+RwO6sGng==",
+      "engines": {
+        "node": ">=14.16"
+      }
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmmirror.com/find-up/-/find-up-5.0.0.tgz",
@@ -5823,6 +5853,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/loadjs": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/loadjs/-/loadjs-4.2.0.tgz",
+      "integrity": "sha512-AgQGZisAlTPbTEzrHPb6q+NYBMD+DP9uvGSIjSUM5uG+0jG15cb8axWpxuOIqrmQjn6scaaH8JwloiP27b2KXA=="
+    },
     "node_modules/local-pkg": {
       "version": "0.4.3",
       "resolved": "https://registry.npmmirror.com/local-pkg/-/local-pkg-0.4.3.tgz",
@@ -6939,6 +6974,18 @@
         "node": "^12.17.0 || ^14.13 || >=16.0.0"
       }
     },
+    "node_modules/plyr": {
+      "version": "3.7.8",
+      "resolved": "https://registry.npmmirror.com/plyr/-/plyr-3.7.8.tgz",
+      "integrity": "sha512-yG/EHDobwbB/uP+4Bm6eUpJ93f8xxHjjk2dYcD1Oqpe1EcuQl5tzzw9Oq+uVAzd2lkM11qZfydSiyIpiB8pgdA==",
+      "dependencies": {
+        "core-js": "^3.26.1",
+        "custom-event-polyfill": "^1.0.7",
+        "loadjs": "^4.2.0",
+        "rangetouch": "^2.0.1",
+        "url-polyfill": "^1.1.12"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.23",
       "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.23.tgz",
@@ -7053,12 +7100,30 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/query-string": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmmirror.com/query-string/-/query-string-8.1.0.tgz",
+      "integrity": "sha512-BFQeWxJOZxZGix7y+SByG3F36dA0AbTy9o6pSmKFcFz7DAj0re9Frkty3saBn3nHo3D0oZJ/+rx3r8H8r8Jbpw==",
+      "dependencies": {
+        "decode-uri-component": "^0.4.1",
+        "filter-obj": "^5.1.0",
+        "split-on-first": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14.16"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
       "dev": true
     },
+    "node_modules/rangetouch": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/rangetouch/-/rangetouch-2.0.1.tgz",
+      "integrity": "sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA=="
+    },
     "node_modules/readable-stream": {
       "version": "3.6.2",
       "resolved": "https://registry.npmmirror.com/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -7448,6 +7513,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/split-on-first": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/split-on-first/-/split-on-first-3.0.0.tgz",
+      "integrity": "sha512-qxQJTx2ryR0Dw0ITYyekNQWpz6f8dGd7vffGNflQQ3Iqj9NJ6qiZ7ELpZsJ/QBhIVAiDfXdag3+Gp8RvWa62AA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/stdin-discarder": {
       "version": "0.1.0",
       "resolved": "https://registry.npmmirror.com/stdin-discarder/-/stdin-discarder-0.1.0.tgz",
@@ -7902,6 +7975,11 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/url-polyfill": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmmirror.com/url-polyfill/-/url-polyfill-1.1.12.tgz",
+      "integrity": "sha512-mYFmBHCapZjtcNHW0MDq9967t+z4Dmg5CJ0KqysK3+ZbyoNOWQHksGCTWwDhxGXllkWlOc10Xfko6v4a3ucM6A=="
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -8264,6 +8342,11 @@
         "vue": "^3.0.11"
       }
     },
+    "node_modules/wavesurfer.js": {
+      "version": "7.0.0-beta.11",
+      "resolved": "https://registry.npmmirror.com/wavesurfer.js/-/wavesurfer.js-7.0.0-beta.11.tgz",
+      "integrity": "sha512-PwcnEIcV3x8Zi0XMWFkzRy0NsJyTaFITIXByoQn/y6OqtJn9W5jzryTvt/mxv+FcKAWA7yGqkxRGX336D0iWTQ=="
+    },
     "node_modules/wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/wcwidth/-/wcwidth-1.0.1.tgz",
@@ -10521,9 +10604,9 @@
       }
     },
     "@vant/use": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmmirror.com/@vant/use/-/use-1.5.1.tgz",
-      "integrity": "sha512-Zxd7lDz/LliVYEQi3PR9a8CQa/kGCVzF0u9hqDMaTlgXlbG0wHMFPllrcG0ThR6bfs8xrYVuSFM9pJn6HSoUGQ=="
+      "version": "1.5.2",
+      "resolved": "https://registry.npmmirror.com/@vant/use/-/use-1.5.2.tgz",
+      "integrity": "sha512-CBK61iT568dCHUwFFsErGbW6/5tmrPnZJKGtcSy7Tjcrmws8Ku+YZo7IUFD9Xkj9MfSJ4pfhQ7pU2KouP5Cojg=="
     },
     "@vitejs/plugin-vue": {
       "version": "4.1.0",
@@ -11283,6 +11366,11 @@
         "is-what": "^3.14.1"
       }
     },
+    "core-js": {
+      "version": "3.31.0",
+      "resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.31.0.tgz",
+      "integrity": "sha512-NIp2TQSGfR6ba5aalZD+ZQ1fSxGhDo/s1w0nx3RYzf2pnJxt7YynxFlFScP6eV7+GZsKO95NSjGxyJsU3DZgeQ=="
+    },
     "core-js-compat": {
       "version": "3.30.1",
       "resolved": "https://registry.npmmirror.com/core-js-compat/-/core-js-compat-3.30.1.tgz",
@@ -11338,6 +11426,11 @@
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.2.tgz",
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
+    "custom-event-polyfill": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz",
+      "integrity": "sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w=="
+    },
     "date-fns": {
       "version": "2.30.0",
       "resolved": "https://registry.npmmirror.com/date-fns/-/date-fns-2.30.0.tgz",
@@ -11373,6 +11466,11 @@
         "ms": "2.1.2"
       }
     },
+    "decode-uri-component": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmmirror.com/decode-uri-component/-/decode-uri-component-0.4.1.tgz",
+      "integrity": "sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ=="
+    },
     "deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmmirror.com/deep-is/-/deep-is-0.1.4.tgz",
@@ -11967,6 +12065,11 @@
         "to-regex-range": "^5.0.1"
       }
     },
+    "filter-obj": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/filter-obj/-/filter-obj-5.1.0.tgz",
+      "integrity": "sha512-qWeTREPoT7I0bifpPUXtxkZJ1XJzxWtfoWWkdVGqa+eCr3SHW/Ocp89o8vLvbUuQnadybJpjOKu4V+RwO6sGng=="
+    },
     "find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmmirror.com/find-up/-/find-up-5.0.0.tgz",
@@ -12890,6 +12993,11 @@
         }
       }
     },
+    "loadjs": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/loadjs/-/loadjs-4.2.0.tgz",
+      "integrity": "sha512-AgQGZisAlTPbTEzrHPb6q+NYBMD+DP9uvGSIjSUM5uG+0jG15cb8axWpxuOIqrmQjn6scaaH8JwloiP27b2KXA=="
+    },
     "local-pkg": {
       "version": "0.4.3",
       "resolved": "https://registry.npmmirror.com/local-pkg/-/local-pkg-0.4.3.tgz",
@@ -13774,6 +13882,18 @@
         }
       }
     },
+    "plyr": {
+      "version": "3.7.8",
+      "resolved": "https://registry.npmmirror.com/plyr/-/plyr-3.7.8.tgz",
+      "integrity": "sha512-yG/EHDobwbB/uP+4Bm6eUpJ93f8xxHjjk2dYcD1Oqpe1EcuQl5tzzw9Oq+uVAzd2lkM11qZfydSiyIpiB8pgdA==",
+      "requires": {
+        "core-js": "^3.26.1",
+        "custom-event-polyfill": "^1.0.7",
+        "loadjs": "^4.2.0",
+        "rangetouch": "^2.0.1",
+        "url-polyfill": "^1.1.12"
+      }
+    },
     "postcss": {
       "version": "8.4.23",
       "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.23.tgz",
@@ -13864,12 +13984,27 @@
         "side-channel": "^1.0.4"
       }
     },
+    "query-string": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmmirror.com/query-string/-/query-string-8.1.0.tgz",
+      "integrity": "sha512-BFQeWxJOZxZGix7y+SByG3F36dA0AbTy9o6pSmKFcFz7DAj0re9Frkty3saBn3nHo3D0oZJ/+rx3r8H8r8Jbpw==",
+      "requires": {
+        "decode-uri-component": "^0.4.1",
+        "filter-obj": "^5.1.0",
+        "split-on-first": "^3.0.0"
+      }
+    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
       "dev": true
     },
+    "rangetouch": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/rangetouch/-/rangetouch-2.0.1.tgz",
+      "integrity": "sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA=="
+    },
     "readable-stream": {
       "version": "3.6.2",
       "resolved": "https://registry.npmmirror.com/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -14185,6 +14320,11 @@
       "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz",
       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
     },
+    "split-on-first": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/split-on-first/-/split-on-first-3.0.0.tgz",
+      "integrity": "sha512-qxQJTx2ryR0Dw0ITYyekNQWpz6f8dGd7vffGNflQQ3Iqj9NJ6qiZ7ELpZsJ/QBhIVAiDfXdag3+Gp8RvWa62AA=="
+    },
     "stdin-discarder": {
       "version": "0.1.0",
       "resolved": "https://registry.npmmirror.com/stdin-discarder/-/stdin-discarder-0.1.0.tgz",
@@ -14535,6 +14675,11 @@
         "punycode": "^2.1.0"
       }
     },
+    "url-polyfill": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmmirror.com/url-polyfill/-/url-polyfill-1.1.12.tgz",
+      "integrity": "sha512-mYFmBHCapZjtcNHW0MDq9967t+z4Dmg5CJ0KqysK3+ZbyoNOWQHksGCTWwDhxGXllkWlOc10Xfko6v4a3ucM6A=="
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -14774,6 +14919,11 @@
         "vooks": "^0.2.4"
       }
     },
+    "wavesurfer.js": {
+      "version": "7.0.0-beta.11",
+      "resolved": "https://registry.npmmirror.com/wavesurfer.js/-/wavesurfer.js-7.0.0-beta.11.tgz",
+      "integrity": "sha512-PwcnEIcV3x8Zi0XMWFkzRy0NsJyTaFITIXByoQn/y6OqtJn9W5jzryTvt/mxv+FcKAWA7yGqkxRGX336D0iWTQ=="
+    },
     "wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/wcwidth/-/wcwidth-1.0.1.tgz",

src/views/attend-class/component/audio-pay.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, toRefs } from 'vue';
+import { defineComponent, onMounted, toRefs, reactive } from 'vue';
 import styles from './audio.module.less';
 import WaveSurfer from 'wavesurfer.js';
 import iconplay from '../image/icon-pause.svg';
@@ -21,12 +21,18 @@ export default defineComponent({
   setup(props) {
     const { item, isEmtry } = toRefs(props);
     const audioId = 'a' + +Date.now() + Math.floor(Math.random() * 100);
+    const audioForms = reactive({
+      paused: true,
+      currentTime: '00:00',
+      duration: '00:00'
+    });
+    const audioDom = new Audio();
+    audioDom.controls = true;
+    audioDom.style.width = '100%';
+    audioDom.className = styles.audio;
+    document.querySelector(`#${audioId}`)?.appendChild(audioDom);
+
     onMounted(() => {
-      const audio = new Audio();
-      audio.controls = true;
-      audio.style.width = '100%';
-      audio.className = styles.audio;
-      document.querySelector(`#${audioId}`)?.appendChild(audio);
       const wavesurfer = WaveSurfer.create({
         container: document.querySelector(`#${audioId}`) as HTMLElement,
         waveColor: '#C5C5C5',
@@ -45,66 +51,103 @@ export default defineComponent({
         /** If autoScroll is enabled, keep the cursor in the center of the waveform during playback */
         autoCenter: true,
         hideScrollbar: false,
-        media: audio
+        media: audioDom
       });
 
       wavesurfer.once('interaction', () => {
         // wavesurfer.play();
       });
+      wavesurfer.once('ready', () => {
+        audioForms.paused = audioDom.paused;
+        // console.log(audioDom.duration, wavesurfer.getDuration());
+        audioForms.duration = timeFormat(audioDom.duration);
+      });
+    });
+
+    // 切换音频播放
+    const onToggleAudio = (e: MouseEvent) => {
+      e.stopPropagation();
+      if (audioDom.paused) {
+        audioDom.play();
+      } else {
+        audioDom.pause();
+      }
+
+      audioForms.paused = audioDom.paused;
+    };
+
+    audioDom.addEventListener('timeupdate', () => {
+      console.log(audioDom.currentTime);
+      audioForms.currentTime = timeFormat(Math.floor(audioDom.currentTime));
     });
 
+    // 对时间进行格式化
+    const timeFormat = (num: number) => {
+      if (num > 0) {
+        const m = Math.floor(num / 60);
+        const s = num % 60;
+        return (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s);
+      } else {
+        return '00:00';
+      }
+    };
+
     return () => (
       <div class={styles.audioWrap}>
         <div class={styles.audioContainer}>
           <div id={audioId}></div>
         </div>
 
-        <div class={styles.controls}></div>
-        {/* <div
-          class="plyr__controls bottomFixed ${styles.controls}">
-          <div class="${styles.actions}">
-            <div class="${styles.actionWrap}">
-              <button id="${playBtnId}" class="${styles.actionBtn}">
-                <div
-                  class="van-loading van-loading--circular"
-                  aria-live="polite"
-                  aria-busy="true">
-                  <span
-                    class="van-loading__spinner van-loading__spinner--circular"
-                    style="color: rgb(255, 255, 255);">
-                    <svg class="van-loading__circular" viewBox="25 25 50 50">
-                      <circle cx="50" cy="50" r="20" fill="none"></circle>
-                    </svg>
-                  </span>
-                </div>
-                <img class="${styles.playIcon}" src="${iconplay}" />
-                <img class="${styles.playIcon}" src="${iconpause}" />
+        <div class={styles.controls}>
+          <div class={styles.actions}>
+            <div class={styles.actionWrap}>
+              <button class={styles.actionBtn} onClick={onToggleAudio}>
+                {audioForms.paused ? (
+                  <img class={styles.playIcon} src={iconplay} />
+                ) : (
+                  <img class={styles.playIcon} src={iconpause} />
+                )}
               </button>
             </div>
-            <div class="${styles.time}">
+            <div class={styles.time}>
               <div
                 class="plyr__time plyr__time--current"
                 aria-label="Current time">
-                00:00
+                {audioForms.currentTime}
               </div>
-              <span class="${styles.line}">/</span>
+              <span class={styles.line}>/</span>
               <div
                 class="plyr__time plyr__time--duration"
                 aria-label="Duration">
-                00:00
+                {audioForms.duration}
               </div>
             </div>
           </div>
+
           <div class="${styles.slider}">
             <div class="plyr__progress">
-              <input data-plyr="seek" type="range" min="0" max="100" step="0.01" value="0" aria-label="Seek">
-                        <progress class="plyr__progress__buffer" min="0" max="100" value="0">% buffered</progress>
+              <input
+                data-plyr="seek"
+                type="range"
+                min="0"
+                max="100"
+                step="0.01"
+                value="0"
+                aria-label="Seek"
+              />
+              <progress
+                class="plyr__progress__buffer"
+                // min="0"
+                max="100"
+                value="0">
+                % buffered
+              </progress>
               <span role="tooltip" class="plyr__tooltip">
                 00:00
               </span>
             </div>
           </div>
-        </div> */}
+        </div>
       </div>
     );
   }

src/views/attend-class/component/audio.module.less

@@ -34,4 +34,56 @@
   height: 150px;
   padding: 0 260px 0 200px !important;
   transition: all 0.5s;
+  display: flex;
+  align-items: center;
+
+  .time {
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    // font-size: 10px;
+    padding: 4px 0 4px 20px;
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 33px;
+
+    .line {
+      font-size: 12px;
+    }
+
+    :global {
+      .plyr__time+.plyr__time:before {
+        content: '';
+        margin-right: 0;
+      }
+    }
+  }
+}
+
+.actions {
+  display: flex;
+  justify-content: space-between;
+  // width: 100%;
+  height: 100%;
+  color: #fff;
+  font-size: 12px;
+  padding: 0 0 0 20px;
+  align-items: center;
+
+  .actionWrap {
+    display: flex;
+  }
+
+  .actionBtn {
+    display: flex;
+    width: 82px;
+    height: 82px;
+    padding: 4px 0;
+    background: transparent;
+  }
+
+  .actionBtn>img {
+    width: 100%;
+    height: 100%;
+  }
 }

src/views/attend-class/component/video.module.less

@@ -150,4 +150,4 @@
     }
 
   }
-}
+}

src/views/prepare-lessons/index.module.less

@@ -1,8 +1,8 @@
 .prepareLessons {
   display: flex;
   // padding: 32px;
-  padding-bottom: 32px;
-  height: calc(100vh - 96px);
+  // padding-bottom: 32px;
+  height: calc(100vh - 128px);
 
 
   .directoryMain,
@@ -18,4 +18,4 @@
     background-color: #fff;
     border-radius: 20px;
   }
-}
+}