amass/newsmy_recorder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1.解决音频过长canvas无法绘制的问题。

Browse Source
This commit is contained in:
amass 2023-06-19 18:03:07 +08:00
parent 7c9c13f2a3
commit bee94310d4
1 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/ProgressBar.js
View File

@ -3,7 +3,6 @@ import { useRef, useCallback, useState, useEffect } from "react";
const pointWidth = 2; const pointWidth = 2;
const pointMargin = 3; const pointMargin = 3;
const interval = 100; // ms
const intervalsPerTag = 10; const intervalsPerTag = 10;
function timeTag(timepoint) { function timeTag(timepoint) {
@ -27,7 +26,7 @@ const pointCoordinates = ({
pointHeight, // height pointHeight, // height
] ]
} }
function drawText(context, duration) { function drawText(context, duration, interval) {
context.save(); context.save();
context.fillStyle = "red"; context.fillStyle = "red";
context.textBaseline = "top"; context.textBaseline = "top";
@ -54,7 +53,7 @@ function drawText(context, duration) {
} }
const paintCanvas = ({ const paintCanvas = ({
canvas, waveformData, duration, scrollLeft, leftPadding, canvasHeight, pointWidth, pointMargin, canvas, waveformData, duration, scrollLeft, leftPadding, canvasHeight, pointWidth, pointMargin, interval
}) => { }) => {
// console.log("paintCanvas", duration, canvasHeight, canvas.width, scrollLeft); // console.log("paintCanvas", duration, canvasHeight, canvas.width, scrollLeft);
const context = canvas.getContext('2d'); const context = canvas.getContext('2d');
@ -62,7 +61,7 @@ const paintCanvas = ({
context.clearRect(0, 0, canvas.width, canvas.height); context.clearRect(0, 0, canvas.width, canvas.height);
context.translate(leftPadding, 0);; context.translate(leftPadding, 0);;
drawText(context, duration); // 画刻度尺 drawText(context, duration, interval); // 画刻度尺
waveformData.forEach((p, i) => { waveformData.forEach((p, i) => {
context.beginPath() context.beginPath()
@ -83,6 +82,7 @@ const paintCanvas = ({
// duration ms // duration ms
export default function ({ width, duration, currentTime, playing, seek, waveData }) { export default function ({ width, duration, currentTime, playing, seek, waveData }) {
const interval = (duration > 20 * 60 * 1000) ? 200 : 100; // ms
const container = useRef(null); const container = useRef(null);
const canvas = useRef(null); const canvas = useRef(null);
const [scrollLeft, setScrollLeft] = useState(0); const [scrollLeft, setScrollLeft] = useState(0);
@ -130,6 +130,7 @@ export default function ({ width, duration, currentTime, playing, seek, waveData
canvasHeight: canvas.current.height, canvasHeight: canvas.current.height,
pointWidth, pointWidth,
pointMargin, pointMargin,
interval,
}) })
}, [duration, width, scrollLeft, waveData]) }, [duration, width, scrollLeft, waveData])