能否创建自定义seek to功能？若可行，如何实现歌曲播放进度滚动？

Hey there! Great questions—let’s break this down clearly, since custom seek functionality is a common (and totally achievable) feature for media players.

Absolutely! Whether you’re working with vanilla JavaScript, a framework like React/Vue, or even native mobile code, you can build a fully custom seek-to feature. The core of this relies on the currentTime property of HTML5 audio/video elements (or equivalent properties in other media APIs), which lets you directly set the playback position of your media.

The implementation has two key parts: letting users click a progress bar to jump to a specific time, and syncing the progress bar’s "scroll" (visual indicator) with the current playback position. Here’s how to do it with vanilla JS first, then a quick framework example.

Vanilla JavaScript Implementation #

Step 1: Basic HTML Structure #

Start with your audio element and a progress container/bar:

<audio id="songPlayer" src="your-favorite-song.mp3"></audio>
<div class="progress-wrapper">
  <div id="progressBar" class="progress-bar"></div>
</div>
<button id="playBtn">Play</button>

Add some basic CSS to make the progress bar interactive:

.progress-wrapper {
  width: 100%;
  height: 10px;
  background: #e0e0e0;
  border-radius: 5px;
  cursor: pointer;
  margin: 10px 0;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: #1db954;
  border-radius: 5px;
  transition: width 0.1s ease;
}

Step 2: JavaScript Logic #

const audio = document.getElementById('songPlayer');
const progressWrapper = document.querySelector('.progress-wrapper');
const progressBar = document.getElementById('progressBar');
const playBtn = document.getElementById('playBtn');

// Toggle play/pause
playBtn.addEventListener('click', () => {
  if (audio.paused) audio.play();
  else audio.pause();
});

// Handle seek-to when clicking the progress bar
progressWrapper.addEventListener('click', (e) => {
  // Calculate the percentage of the wrapper that was clicked
  const clickPositionRatio = e.offsetX / progressWrapper.offsetWidth;
  // Convert that ratio to the corresponding time in the song
  const seekTime = clickPositionRatio * audio.duration;
  
  // Only proceed if duration is loaded (avoids NaN errors)
  if (!isNaN(seekTime)) {
    audio.currentTime = seekTime;
  }
});

// Sync progress bar with current playback position
audio.addEventListener('timeupdate', () => {
  if (isNaN(audio.duration)) return;
  
  const progressPercentage = (audio.currentTime / audio.duration) * 100;
  progressBar.style.width = `${progressPercentage}%`;
});

// Optional: Wait for metadata to load to avoid duration issues
audio.addEventListener('loadedmetadata', () => {
  console.log(`Song duration: ${audio.duration} seconds`);
});

React Example (For Framework Users) #

The logic is the same—we just use state to track progress:

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

function CustomAudioPlayer() {
  const audioRef = useRef(null);
  const [progress, setProgress] = useState(0);
  const [isPlaying, setIsPlaying] = useState(false);

  const handleSeek = (e) => {
    const wrapperWidth = e.currentTarget.offsetWidth;
    const seekTime = (e.nativeEvent.offsetX / wrapperWidth) * audioRef.current?.duration;
    if (!isNaN(seekTime)) audioRef.current.currentTime = seekTime;
  };

  useEffect(() => {
    const updateProgress = () => {
      if (audioRef.current?.duration) {
        setProgress((audioRef.current.currentTime / audioRef.current.duration) * 100);
      }
    };

    const audio = audioRef.current;
    if (audio) {
      audio.addEventListener('timeupdate', updateProgress);
      return () => audio.removeEventListener('timeupdate', updateProgress);
    }
  }, []);

  const togglePlay = () => {
    if (audioRef.current.paused) {
      audioRef.current.play();
      setIsPlaying(true);
    } else {
      audioRef.current.pause();
      setIsPlaying(false);
    }
  };

  return (
    <div style={{ maxWidth: '500px', margin: '20px' }}>
      <audio ref={audioRef} src="your-song.mp3" />
      <button onClick={togglePlay} style={{ padding: '8px 16px' }}>
        {isPlaying ? 'Pause' : 'Play'}
      </button>
      <div 
        onClick={handleSeek}
        style={{ 
          width: '100%', height: '10px', background: '#eee', borderRadius: '5px', 
          cursor: 'pointer', marginTop: '10px' 
        }}
      >
        <div 
          style={{ 
            width: `${progress}%`, height: '100%', background: '#1db954', 
            borderRadius: '5px' 
          }} 
        />
      </div>
    </div>
  );
}

export default CustomAudioPlayer;

Key Notes #

• Always check if audio.duration is a valid number (not NaN) before calculating seek times—this avoids errors if the media hasn’t finished loading yet.
• The timeupdate event fires periodically as the media plays, which is perfect for syncing your progress bar’s position.
• For mobile apps, the logic translates directly—you’ll just use the native media API for your platform (e.g., Android’s MediaPlayer, iOS’s AVPlayer) which all have equivalent properties to currentTime.

内容的提问来源于stack exchange，提问作者JohnPix