fix:修复音频播放时不能拖动快进的问题

e66cf0a8 · guomingpang · e048c990 · e66cf0a8
Commit e66cf0a8 authored Jun 09, 2021 by guomingpang
Show whitespace changes
Inline Side-by-side

Showing with 59 additions and 73 deletions

src/modules/teach-tool/components/XMAudio.jsx
+59 -73

No files found.
--- a/src/modules/teach-tool/components/XMAudio.jsx
+++ b/src/modules/teach-tool/components/XMAudio.jsx
@@ -5,9 +5,9 @@
 * @Last Modified time: 2020-04-18 10:54:32
 */
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef } from 'react';
-import "./XMAudio.less";
+import './XMAudio.less';
-import VideoUpload from "@/core/upload";
+import VideoUpload from '@/core/upload';
 let timerInterval;
@@ -22,7 +22,7 @@ const XMAudio = (props) => {
  const [totalTime, setTotalTime] = useState(Math.round(Number(size)));
  const prevTimeRef = useRef();
  useEffect(() => {
-    if(!props.forbidParse){
+    if (!props.forbidParse) {
      VideoUpload.getVideoParseRoute(props.url).then((newUrl) => {
        setUrl(newUrl);
      });
@@ -30,7 +30,7 @@ const XMAudio = (props) => {
    setLeftTime(Math.round(Number(size)));
    setTotalTime(Math.round(Number(size)));
-    ref.current.addEventListener("pause", () => {
+    ref.current.addEventListener('pause', () => {
      clearInterval(timer);
      setPlaying(false);
      setTimer(null);
@@ -42,7 +42,6 @@ const XMAudio = (props) => {
  }, [props.url]);
  useEffect(() => {
    if (playing) {
      timerInterval = setInterval(() => {
        setPlayedTime((preTime) => {
@@ -53,18 +52,18 @@ const XMAudio = (props) => {
        if ((prevTimeRef.current + 20) % 1000 === 0) {
          setLeftTime(totalTime - (prevTimeRef.current + 20));
        }
-        if ((prevTimeRef.current + 30) >= totalTime) {
+        if (prevTimeRef.current + 30 >= totalTime) {
          clearInterval(timerInterval);
          setPlayedTime(0);
          setLeftTime(totalTime);
          setPlaying(false);
        }
      }, 20);
-      const audioDomList = document.querySelectorAll("audio");
+      const audioDomList = document.querySelectorAll('audio');
      for (let i = 0; i < Array.from(audioDomList).length; i++) {
        if (audioDomList[i] === ref.current) {
          ref.current.play();
-          setTimer(timerInterval)
+          setTimer(timerInterval);
        } else {
          audioDomList[i].pause();
        }
@@ -75,9 +74,7 @@ const XMAudio = (props) => {
    }
  }, [playing]);
-  const audioImg = `https://xiaomai-image.oss-cn-hangzhou.aliyuncs.com/${
+  const audioImg = `https://xiaomai-image.oss-cn-hangzhou.aliyuncs.com/${playing ? 1584514990496 : 1584514999661}.png`;
-    playing ? 1584514990496 : 1584514999661
-    }.png`;
  function _togglePlay() {
    playing ? pausePlay() : startPlay();
@@ -112,78 +109,74 @@ const XMAudio = (props) => {
    }
  }
  function _startTime() {
    let time = Math.floor(playedTime / 1000);
-    let second = 0
+    let second = 0;
    let minute = 0;
-    let result = 0
+    let result = 0;
    if (time > 0) {
-      minute = Math.floor(time % 3600 / 60);
+      minute = Math.floor((time % 3600) / 60);
      second = Math.floor((time - 60 * minute) % 60);
      if (minute < 10) {
-        minute = "0" + minute;
+        minute = '0' + minute;
      }
      if (second < 10) {
-        second = "0" + second;
+        second = '0' + second;
      }
-      result = minute + ':' + second
+      result = minute + ':' + second;
-    }else{
+    } else {
-      result = "00:00"
+      result = '00:00';
    }
    return result;
  }
  function _endTime() {
    let time = Math.floor(totalTime / 1000);
-    let second = 0
+    let second = 0;
    let minute = 0;
-    let result = 0
+    let result = 0;
    if (time > 0) {
-      minute = Math.floor(time % 3600 / 60);
+      minute = Math.floor((time % 3600) / 60);
      second = Math.floor((time - 60 * minute) % 60);
      if (minute < 10) {
-        minute = "0" + minute;
+        minute = '0' + minute;
      }
      if (second < 10) {
-        second = "0" + second;
+        second = '0' + second;
      }
-      result = minute + ':' + second
+      result = minute + ':' + second;
    }
-    if(time === 0){
+    if (time === 0) {
-      result = "00:00"
+      result = '00:00';
    }
    return result;
  }
  function putDownFlag(event) {
    let dragDiv = event.target;
-    dragDiv.style.cursor = "pointer";
+    dragDiv.style.cursor = 'pointer';
    let offsetX = parseInt(dragDiv.style.left); // 获取当前的x轴距离
    let innerX = event.clientX - offsetX; // 获取鼠标在方块内的x轴距
    // 按住鼠标时为div修改样式
-    dragDiv.style.width = "16px";
+    dragDiv.style.width = '16px';
-    dragDiv.style.height = "16px";
+    dragDiv.style.height = '16px';
-    dragDiv.style.top = "-7px";
+    dragDiv.style.top = '-7px';
-    dragDiv.style.backGround = "linear-gradient(180deg, #FFB467 0%, #FF9143 100%)"
+    dragDiv.style.backGround = 'linear-gradient(180deg, #FFB467 0%, #FF9143 100%)';
    // 鼠标移动的时候不停的修改div的left和top值
    document.onmousemove = function (event) {
-      dragDiv.style.left = event.clientX - innerX + "px";
+      dragDiv.style.left = event.clientX - innerX + 'px';
      // 边界判断
      if (parseInt(dragDiv.style.left) <= 0) {
-        dragDiv.style.left = "0px";
+        dragDiv.style.left = '0px';
      }
      if (parseInt(dragDiv.style.left) >= 154) {
-        dragDiv.style.left = "149px";
+        dragDiv.style.left = '149px';
-      }
-      setPlayedTime(parseInt(dragDiv.style.left) / 150 * totalTime)
      }
+      setPlayedTime((parseInt(dragDiv.style.left) / 150) * totalTime);
+    };
    // 鼠标抬起时，清除绑定在文档上的mousemove和mouseup事件
    // 否则鼠标抬起后还可以继续拖拽方块
    document.onmouseup = function () {
@@ -191,50 +184,43 @@ const XMAudio = (props) => {
      document.onmouseup = null;
      // 清除border
-      dragDiv.style.top = "-4px";
+      dragDiv.style.top = '-4px';
-      dragDiv.style.width = "10px";
+      dragDiv.style.width = '10px';
-      dragDiv.style.height = "10px";
+      dragDiv.style.height = '10px';
-    }
+    };
  }
-  function mouseOver(event){
+  function mouseOver(event) {
    let dragDiv = event.target;
-    dragDiv.style.cursor = "pointer";
+    dragDiv.style.cursor = 'pointer';
-    dragDiv.style.width = "16px";
+    dragDiv.style.width = '16px';
-    dragDiv.style.height = "16px";
+    dragDiv.style.height = '16px';
-    dragDiv.style.top = "-7px";
+    dragDiv.style.top = '-7px';
-    dragDiv.style.backGround = "linear-gradient(180deg, #FFB467 0%, #FF9143 100%)"
+    dragDiv.style.backGround = 'linear-gradient(180deg, #FFB467 0%, #FF9143 100%)';
  }
-  function mouseLeave (event){
+  function mouseLeave(event) {
    let dragDiv = event.target;
-    dragDiv.style.top = "-4px";
+    dragDiv.style.top = '-4px';
-      dragDiv.style.width = "10px";
+    dragDiv.style.width = '10px';
-      dragDiv.style.height = "10px";
+    dragDiv.style.height = '10px';
+    ref.current.currentTime = playedTime / 1000;
  }
  return (
-    <div className="xm-audio" style={style}>
+    <div className='xm-audio' style={style}>
-      <img src={audioImg} onClick={_togglePlay} className="audio-image" />
+      <img src={audioImg} onClick={_togglePlay} className='audio-image' />
-      <div className="process-area">
+      <div className='process-area'>
+        <div className='complete-area' style={{ width: `${(playedTime / totalTime) * 150}px ` }} />
        <div
-          className="complete-area"
+          className='flag'
-          style={{ width: `${(playedTime / totalTime) * 150}px ` }}
-        />
-        <div
-          className="flag"
          style={{ left: `${(playedTime / totalTime) * 150}px ` }}
          onMouseDown={(e) => putDownFlag(e)}
-          onMouseOver={(e)=> mouseOver(e)}
+          onMouseOver={(e) => mouseOver(e)}
-          onMouseLeave={(e)=>mouseLeave(e)}
+          onMouseLeave={(e) => mouseLeave(e)}
        />
      </div>
-      <span className="sec-time">
+      <span className='sec-time'>
        {`${_startTime()}`}/{`${_endTime()}`}
      </span>
-      <audio
+      <audio src={url} ref={ref} autoPlay={false} onCanPlayThrough={_getDuration} />
-        src={url}
-        ref={ref}
-        autoPlay={false}
-        onCanPlayThrough={_getDuration}
-      />
    </div>
  );
 };