如何在React中创建音频进度条？

npm install react react-dom

import React, { useState, useEffect } from 'react';

const AudioProgressBar = () => {
  const [currentTime, setCurrentTime] = useState(0);
  const [duration, setDuration] = useState(0);

  useEffect(() => {
    const audioElement = document.getElementById('audio');
    audioElement.addEventListener('timeupdate', updateTime);
    audioElement.addEventListener('loadedmetadata', updateDuration);

    return () => {
      audioElement.removeEventListener('timeupdate', updateTime);
      audioElement.removeEventListener('loadedmetadata', updateDuration);
    };
  }, []);

  const updateTime = () => {
    const audioElement = document.getElementById('audio');
    setCurrentTime(audioElement.currentTime);
  };

  const updateDuration = () => {
    const audioElement = document.getElementById('audio');
    setDuration(audioElement.duration);
  };

  const formatTime = (time) => {
    const minutes = Math.floor(time / 60);
    const seconds = Math.floor(time % 60);
    return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
  };

  const handleSeek = (e) => {
    const audioElement = document.getElementById('audio');
    const seekTime = (e.nativeEvent.offsetX / e.target.offsetWidth) * audioElement.duration;
    audioElement.currentTime = seekTime;
  };

  return (
    <div>
      <audio id="audio" src="path/to/audio.mp3" controls />
      <div className="progress-bar" onClick={handleSeek}>
        <div className="progress" style={{ width: `${(currentTime / duration) * 100}%` }} />
      </div>
      <div className="time">
        <span>{formatTime(currentTime)}</span> / <span>{formatTime(duration)}</span>
      </div>
    </div>
  );
};

export default AudioProgressBar;

import React from 'react';
import AudioProgressBar from './AudioProgressBar';

const App = () => {
  return (
    <div>
      <h1>My Audio Player</h1>
      <AudioProgressBar />
    </div>
  );
};

export default App;