I ran into an issue with a project that I’m currently working on, I made a function to skip forward and backward 10 seconds like on YouTube for an html audio player, on browsers like Firefox, Safari and some other browsers this function works perfectly fine (if you click forward you skip 10 seconds and if you click backward you replay/rewind the last 10 seconds) but I wasn’t that successful with chrome and opera it always resets the time to 0:00 no matter which button I click (forward button or backward button), that’s my code hope you can help me TYSM ????.

My HTML Code:

<div class="audioVersionPost">
  
<audio id="audioPlayer" autoplay preload="metadata">
  <source id="audioSource" type="audio/mpeg">
</audio>

<button id="playPauseBtn">
  <span id="playSpanIcon" class="material-symbols-rounded playerSymbols">play_circle</span>
  <span id="pauseSpanIcon" class="material-symbols-rounded playerSymbols">pause_circle</span>
  <span id="playText">Playing</span>
  <span id="pauseText">Paused</span>
</button>
  
<button id="replayBtn">
  <span class="material-symbols-rounded playerSymbols">replay</span>
  <span>Replay</span>
</button>

<button id="skipBackwardBtn">
  <span class="material-symbols-rounded playerSymbols">replay_10</span>
</button>
  
<button id="skipForwardBtn">
  <span class="material-symbols-rounded playerSymbols">forward_10</span>
</button>
  
<span id="currentTime">0:00</span>

<input type="range" id="seekSlider" min="0" max="100" value="0" disabled>
  
<span id="totalTime">0:00</span>
  
<select id="speedSelect">
  <option value="0.5">0.5x</option>
  <option value="1" selected>1x</option>
  <option value="1.5">1.5x</option>
  <option value="2">2x</option>
</select>
  
</div>

My JavaScript Script:

const audioPlayer = document.getElementById('audioPlayer');
  const playPauseBtn = document.getElementById('playPauseBtn');
  const skipBackwardBtn = document.getElementById('skipBackwardBtn');
  const skipForwardBtn = document.getElementById('skipForwardBtn');
  const speedSelect = document.getElementById('speedSelect');
  const currentTime = document.getElementById('currentTime');
  const totalTime = document.getElementById('totalTime');
  const seekSlider = document.getElementById('seekSlider');

  // Play/pause button functionality
  playPauseBtn.addEventListener('click', function() {
    if (audioPlayer.paused) {
      audioPlayer.play();
    } else {
      audioPlayer.pause();
    }
  });

  // Skip backward button functionality
  skipBackwardBtn.addEventListener('click', function() {
    audioPlayer.currentTime -= 10;
  });

  // Skip forward button functionality
  skipForwardBtn.addEventListener('click', function() {
    audioPlayer.currentTime += 10;
  });

  // Speed control functionality
  speedSelect.addEventListener('change', function() {
    audioPlayer.playbackRate = parseFloat(speedSelect.value);
  });

  // Update current time and total time
  audioPlayer.addEventListener('timeupdate', function() {
    currentTime.textContent = formatTime(audioPlayer.currentTime);
    totalTime.textContent = formatTime(audioPlayer.duration);
    const value = (audioPlayer.currentTime / audioPlayer.duration) * 100;
    seekSlider.value = value;
    seekSlider.style.background = `linear-gradient(to right, #3557FF ${value}%, #EDF0FF ${value}%)`;
  });

  // Format time function
  function formatTime(seconds) {
    const minutes = Math.floor(seconds / 60);
    const remainingSeconds = Math.floor(seconds % 60);
    const formattedMinutes = minutes === 0 ? '0' : minutes.toString();
    const formattedSeconds = remainingSeconds < 10 ? '0' + remainingSeconds : remainingSeconds.toString();
    return `${formattedMinutes}:${formattedSeconds}`;
  }

  // Seek functionality
  seekSlider.addEventListener('input', function() {
    const value = (seekSlider.value / 100) * audioPlayer.duration;
    audioPlayer.currentTime = value;
    seekSlider.style.background = `linear-gradient(to right, #3557FF ${seekSlider.value}%, #EDF0FF ${seekSlider.value}%)`;
  });

  document.getElementById("playPauseBtn").addEventListener("click", function() {
    var playIcon = document.getElementById("playSpanIcon");
    var pauseIcon = document.getElementById("pauseSpanIcon");
    var playText = document.getElementById("pauseText");
    var pauseText = document.getElementById("playText");

    if (playIcon.style.display === "none") {
        playIcon.style.display = "block";
        pauseIcon.style.display = "none";
        playText.style.display = "block";
        pauseText.style.display = "none";
    } else {
        playIcon.style.display = "none";
        pauseIcon.style.display = "block";
        playText.style.display = "none";
        pauseText.style.display = "block";
    }
  });

  const replayBtn = document.getElementById('replayBtn');

  audioPlayer.addEventListener('ended', function() {
    // Show replay button and hide play/pause button
    replayBtn.style.display = 'flex';
    playPauseBtn.style.display = 'none';
  });

  replayBtn.addEventListener('click', function() {
    // Reset audio playback
    audioPlayer.currentTime = 0;
    audioPlayer.play();

    // Toggle display of play/pause buttons
    playPauseBtn.style.display = 'block';
    replayBtn.style.display = 'none';
  });

I want to fix the issue without effecting my existing code, I want the forward button to skip 10 seconds and the backward button to replay the last 10 seconds