Skip to content

X
xiaomai-cloud-class-web
Commit e66cf0a8 by guomingpang
Options

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

parent e048c990
Showing with 63 additions and 77 deletions
src/modules/teach-tool/components/XMAudio.jsx
...@@ -5,15 +5,15 @@ ...@@ -5,15 +5,15 @@
* @Last Modified time: 2020-04-18 10:54:32 * @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; let timerInterval;
const XMAudio = (props) => { const XMAudio = (props) => {
const ref = useRef(); const ref = useRef();
const { style, size, getDuration } = props; const { style, size, getDuration } = props;
const [url, setUrl] = useState(props.url); const [url, setUrl] = useState(props.url);
const [playing, setPlaying] = useState(false); const [playing, setPlaying] = useState(false);
const [timer, setTimer] = useState(null); const [timer, setTimer] = useState(null);
...@@ -22,7 +22,7 @@ const XMAudio = (props) => { ...@@ -22,7 +22,7 @@ const XMAudio = (props) => {
const [totalTime, setTotalTime] = useState(Math.round(Number(size))); const [totalTime, setTotalTime] = useState(Math.round(Number(size)));
const prevTimeRef = useRef(); const prevTimeRef = useRef();
useEffect(() => { useEffect(() => {
if(!props.forbidParse){ if (!props.forbidParse) {
VideoUpload.getVideoParseRoute(props.url).then((newUrl) => { VideoUpload.getVideoParseRoute(props.url).then((newUrl) => {
setUrl(newUrl); setUrl(newUrl);
}); });
...@@ -30,7 +30,7 @@ const XMAudio = (props) => { ...@@ -30,7 +30,7 @@ const XMAudio = (props) => {
setLeftTime(Math.round(Number(size))); setLeftTime(Math.round(Number(size)));
setTotalTime(Math.round(Number(size))); setTotalTime(Math.round(Number(size)));
ref.current.addEventListener("pause", () => { ref.current.addEventListener('pause', () => {
clearInterval(timer); clearInterval(timer);
setPlaying(false); setPlaying(false);
setTimer(null); setTimer(null);
...@@ -42,7 +42,6 @@ const XMAudio = (props) => { ...@@ -42,7 +42,6 @@ const XMAudio = (props) => {
}, [props.url]); }, [props.url]);
useEffect(() => { useEffect(() => {
if (playing) { if (playing) {
timerInterval = setInterval(() => { timerInterval = setInterval(() => {
setPlayedTime((preTime) => { setPlayedTime((preTime) => {
...@@ -53,18 +52,18 @@ const XMAudio = (props) => { ...@@ -53,18 +52,18 @@ const XMAudio = (props) => {
if ((prevTimeRef.current + 20) % 1000 === 0) { if ((prevTimeRef.current + 20) % 1000 === 0) {
setLeftTime(totalTime - (prevTimeRef.current + 20)); setLeftTime(totalTime - (prevTimeRef.current + 20));
} }
if ((prevTimeRef.current + 30) >= totalTime) { if (prevTimeRef.current + 30 >= totalTime) {
clearInterval(timerInterval); clearInterval(timerInterval);
setPlayedTime(0); setPlayedTime(0);
setLeftTime(totalTime); setLeftTime(totalTime);
setPlaying(false); setPlaying(false);
} }
}, 20); }, 20);
const audioDomList = document.querySelectorAll("audio"); const audioDomList = document.querySelectorAll('audio');
for (let i = 0; i < Array.from(audioDomList).length; i++) { for (let i = 0; i < Array.from(audioDomList).length; i++) {
if (audioDomList[i] === ref.current) { if (audioDomList[i] === ref.current) {
ref.current.play(); ref.current.play();
setTimer(timerInterval) setTimer(timerInterval);
} else { } else {
audioDomList[i].pause(); audioDomList[i].pause();
} }
...@@ -75,9 +74,7 @@ const XMAudio = (props) => { ...@@ -75,9 +74,7 @@ const XMAudio = (props) => {
} }
}, [playing]); }, [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() { function _togglePlay() {
playing ? pausePlay() : startPlay(); playing ? pausePlay() : startPlay();
...@@ -112,78 +109,74 @@ const XMAudio = (props) => { ...@@ -112,78 +109,74 @@ const XMAudio = (props) => {
} }
} }
function _startTime() { function _startTime() {
let time = Math.floor(playedTime / 1000); let time = Math.floor(playedTime / 1000);
let second = 0 let second = 0;
let minute = 0; let minute = 0;
let result = 0 let result = 0;
if (time > 0) { if (time > 0) {
minute = Math.floor(time % 3600 / 60); minute = Math.floor((time % 3600) / 60);
second = Math.floor((time - 60 * minute) % 60); second = Math.floor((time - 60 * minute) % 60);
if (minute < 10) { if (minute < 10) {
minute = "0" + minute; minute = '0' + minute;
} }
if (second < 10) { 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; return result;
} }
function _endTime() { function _endTime() {
let time = Math.floor(totalTime / 1000); let time = Math.floor(totalTime / 1000);
let second = 0 let second = 0;
let minute = 0; let minute = 0;
let result = 0 let result = 0;
if (time > 0) { if (time > 0) {
minute = Math.floor(time % 3600 / 60); minute = Math.floor((time % 3600) / 60);
second = Math.floor((time - 60 * minute) % 60); second = Math.floor((time - 60 * minute) % 60);
if (minute < 10) { if (minute < 10) {
minute = "0" + minute; minute = '0' + minute;
} }
if (second < 10) { 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; return result;
} }
function putDownFlag(event) { function putDownFlag(event) {
let dragDiv = event.target; let dragDiv = event.target;
dragDiv.style.cursor = "pointer"; dragDiv.style.cursor = 'pointer';
let offsetX = parseInt(dragDiv.style.left); // 获取当前的x轴距离 let offsetX = parseInt(dragDiv.style.left); // 获取当前的x轴距离
let innerX = event.clientX - offsetX; // 获取鼠标在方块内的x轴距 let innerX = event.clientX - offsetX; // 获取鼠标在方块内的x轴距
// 按住鼠标时为div修改样式 // 按住鼠标时为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值 // 鼠标移动的时候不停的修改div的left和top值
document.onmousemove = function (event) { document.onmousemove = function (event) {
dragDiv.style.left = event.clientX - innerX + "px"; dragDiv.style.left = event.clientX - innerX + 'px';
// 边界判断 // 边界判断
if (parseInt(dragDiv.style.left) <= 0) { if (parseInt(dragDiv.style.left) <= 0) {
dragDiv.style.left = "0px"; dragDiv.style.left = '0px';
} }
if (parseInt(dragDiv.style.left) >= 154) { 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事件 // 鼠标抬起时，清除绑定在文档上的mousemove和mouseup事件
// 否则鼠标抬起后还可以继续拖拽方块 // 否则鼠标抬起后还可以继续拖拽方块
document.onmouseup = function () { document.onmouseup = function () {
...@@ -191,50 +184,43 @@ const XMAudio = (props) => { ...@@ -191,50 +184,43 @@ const XMAudio = (props) => {
document.onmouseup = null; document.onmouseup = null;
// 清除border // 清除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; 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; 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 ( 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 <div className='complete-area' style={{ width: `${(playedTime / totalTime) * 150}px ` }} />
className="complete-area"
style={{ width: `${(playedTime / totalTime) * 150}px ` }}
/>
<div <div
className="flag" className='flag'
style={{ left: `${(playedTime / totalTime) * 150}px ` }} style={{ left: `${(playedTime / totalTime) * 150}px ` }}
onMouseDown={(e) => putDownFlag(e)} onMouseDown={(e) => putDownFlag(e)}
onMouseOver={(e)=> mouseOver(e)} onMouseOver={(e) => mouseOver(e)}
onMouseLeave={(e)=>mouseLeave(e)} onMouseLeave={(e) => mouseLeave(e)}
/> />
</div> </div>
<span className="sec-time"> <span className='sec-time'>
{`${_startTime()}`}/{`${_endTime()}`} {`${_startTime()}`}/{`${_endTime()}`}
</span> </span>
<audio <audio src={url} ref={ref} autoPlay={false} onCanPlayThrough={_getDuration} />
src={url}
ref={ref}
autoPlay={false}
onCanPlayThrough={_getDuration}
/>
</div> </div>
); );
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment