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