diff --git a/src/components/ProgressBar.js b/src/components/ProgressBar.js
index e448b90..e9f5234 100644
--- a/src/components/ProgressBar.js
+++ b/src/components/ProgressBar.js
@@ -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])