修改

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

@@ -46,7 +46,9 @@ export default defineComponent({
       duration: '00:00',
       showBar: true,
       afterMa3: true,
-      count: 0
+      count: 0,
+      previousBytesLoaded: 0,
+      previousTime: Date.now()
     });
     const canvas: any = ref();
     const audio: any = ref();
@@ -205,6 +207,27 @@ export default defineComponent({
             }}
             onProgress={(e: any) => {
               console.log(e, 'loadedmetadata onProgress');
+              const currentTime = Date.now();
+              const videoElement = e.target;
+              console.log(videoElement, audio.value.buffered);
+              const currentBytesLoaded = videoElement.buffered.length
+                ? videoElement.buffered.end(0) * videoElement.duration
+                : 0;
+
+              if (currentBytesLoaded > audioForms.previousBytesLoaded) {
+                const timeDiff = (currentTime - audioForms.previousTime) / 1000; // Time difference in seconds
+                const bytesDiff =
+                  currentBytesLoaded - audioForms.previousBytesLoaded; // Bytes downloaded since last check
+                const speed = bytesDiff / timeDiff; // Bytes per second
+
+                const speedInKbps = (speed / 1024).toFixed(2); // Convert to KB/s
+
+                // speedDisplay.textContent = `Download speed: ${speedInKbps} KB/s`;
+                console.log(`Download speed: ${speedInKbps} KB/s`);
+
+                audioForms.previousBytesLoaded = currentBytesLoaded;
+                audioForms.previousTime = currentTime;
+              }
             }}></audio>
 
           <canvas ref={canvas}></canvas>
@@ -269,6 +292,8 @@ export default defineComponent({
                         <img class={styles.playIcon} src={iconpause} />
                       )}
                     </div>
+
+                    <div class={styles.downloadSpeed}>37.8M/s</div>
                   </div>
                 </div>
               </>
@@ -286,6 +311,7 @@ export default defineComponent({
                     <button class={styles.iconReplay} onClick={onReplay}>
                       <img src={iconReplay} />
                     </button>
+                    <div class={styles.downloadSpeed}>37.8M/s</div>
                   </div>
                 </div>
                 <div class={styles.actions}>

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

@@ -1,147 +1,157 @@
-.audioWrap {
-  width: 100%;
-  height: 100%;
-  background-color: #fff;
-}
-
-.audioContainer {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  padding: 0 240px;
-
-  &>div {
-    flex: 1;
-  }
-
-  .audio {
-    position: absolute;
-    top: 0;
-    opacity: 0;
-  }
-
-  .tempVudio {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    padding: 0 240px;
-  }
-
-  canvas {
-    width: 100%;
-    height: 100%;
-  }
-}
-
-.sectionAnimate {
-  opacity: 0;
-  pointer-events: none;
-  transform: translateY(126px);
-  transition: all .2s;
-}
-
-.controls {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-  background: url('../image/../image/bg.png') no-repeat;
-  background-size: 100% 100%;
-  // backdrop-filter: blur(26px);
-  height: 120px;
-  padding: 0 40px !important;
-  transition: all 0.301s;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  .time {
-    display: flex;
-    justify-content: space-between;
-    color: #fff;
-    // font-size: 10px;
-    padding: 4px 20px 4px;
-    font-size: 24px;
-    font-weight: 600;
-    line-height: 33px;
-
-    &>div {
-      font-size: 20px !important;
-      color: rgba(255,255,255,0.8);
-    }
-
-    .line {
-      font-size: 12px;
-    }
-
-    :global {
-      .plyr__time+.plyr__time:before {
-        content: '';
-        margin-right: 0;
-      }
-    }
-  }
-}
-.tools{
-  display: flex;
-  justify-content: space-between;
-  padding: 0 10px;
-  margin-top: 10px;
-}
-.actions {
-  display: flex;
-  justify-content: space-between;
-  // width: 100%;
-  height: 100%;
-  color: #fff;
-  font-size: 12px;
-  align-items: center;
-
-  .actionWrap {
-    display: flex;
-    align-items: center;
-  }
-
-  .actionBtn {
-    width: 40px;
-    height: 40px;
-    background: transparent;
-    cursor: pointer;
-
-    &>img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-
-  .iconReplay {
-    width: 40px;
-    height: 40px;
-    background-color: transparent;
-    cursor: pointer;
-    margin: 0 22px;
-
-    &>img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-}
-
-.slider {
-  width: 100%;
-  padding-top: 6px;
-
-  :global {
-
-    .n-slider .n-slider-rail .n-slider-rail__fill,
-    .n-slider .n-slider-handles .n-slider-handle-wrapper {
-      transition: all .2s;
-    }
-  }
-}
+.audioWrap {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+}
+
+.audioContainer {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 0 240px;
+
+  &>div {
+    flex: 1;
+  }
+
+  .audio {
+    position: absolute;
+    top: 0;
+    opacity: 0;
+  }
+
+  .tempVudio {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    padding: 0 240px;
+  }
+
+  canvas {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.sectionAnimate {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(126px);
+  transition: all .2s;
+}
+
+.controls {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  background: url('../image/../image/bg.png') no-repeat;
+  background-size: 100% 100%;
+  // backdrop-filter: blur(26px);
+  height: 120px;
+  padding: 0 40px !important;
+  transition: all 0.301s;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+
+  .time {
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    // font-size: 10px;
+    padding: 4px 20px 4px;
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 33px;
+
+    &>div {
+      font-size: 20px !important;
+      color: rgba(255, 255, 255, 0.8);
+    }
+
+    .line {
+      font-size: 12px;
+    }
+
+    :global {
+      .plyr__time+.plyr__time:before {
+        content: '';
+        margin-right: 0;
+      }
+    }
+  }
+}
+
+.tools {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 10px;
+  margin-top: 10px;
+}
+
+.actions {
+  display: flex;
+  justify-content: space-between;
+  // width: 100%;
+  height: 100%;
+  color: #fff;
+  font-size: 12px;
+  align-items: center;
+
+  .actionWrap {
+    display: flex;
+    align-items: center;
+  }
+
+  .downloadSpeed {
+    font-weight: 600;
+    font-size: max(18px, 14Px);
+    color: #FFFFFF;
+    line-height: 25px;
+  }
+
+  .actionBtn {
+    width: 40px;
+    height: 40px;
+    background: transparent;
+    cursor: pointer;
+
+    &>img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+
+  .iconReplay {
+    width: 40px;
+    height: 40px;
+    background-color: transparent;
+    cursor: pointer;
+    margin: 0 22px;
+
+    &>img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.slider {
+  width: 100%;
+  padding-top: 6px;
+
+  :global {
+
+    .n-slider .n-slider-rail .n-slider-rail__fill,
+    .n-slider .n-slider-handles .n-slider-handle-wrapper {
+      transition: all .2s;
+    }
+  }
+}