Howlerjs: Pause function is not saving the seek

Question

I'm making a spotify clone using php laravel as backend and html in blade as frontend. I'm using howlerjs to play audio i made a button to play/pause but the issue when I press to play the audio is starts when i pause it and re play the song it doesnt start from the time i paused the audio it restarts from the beginning.

Here is my code

const sound = new Howl({
    src: ['./12.mpeg'],
    html5: true,
    loop: false,
    volume: 1.0,
    onplay: function() {
      progressLoop();
    },
    onend: function() {
      timeD.textContent = '0:00';
    },
    onpause: function() {
      pausePosition = sound.seek();
    }
  });
  
  const progressBar = document.getElementById('progress-bar');
  const timeD = document.getElementsByClassName('initial')[0];
  function updateTimeElapsed() {
    const timeElapsed = sound.seek();
    const minutes = Math.floor(timeElapsed / 60);
    const seconds = Math.round(timeElapsed % 60);
    const timeElapsedString = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
    timeD.textContent = timeElapsedString;
  }
  function progressLoop() {
    const progress = sound.seek() / sound.duration();
    progressBar.value = progress * 100;
    if (sound.playing()) {
      updateTimeElapsed();
      requestAnimationFrame(progressLoop);
    }
  }



const playPauseButton = document.getElementById('play-pause');
let isPaused = true;
let pausePosition = 0;

let ids;
playPauseButton.addEventListener('click', function() {
    if (isPaused) {
      this.classList.remove('fa-play');
      this.classList.add('fa-pause');
      isPaused = false;
      
      sound.seek(pausePosition);
      sound.play();
      console.log(pausePosition);
      progressLoop();
      updateTimeElapsed();
    } else {
      this.classList.remove('fa-pause');
      this.classList.add('fa-play');
      isPaused = true;
      pausePosition = sound.seek();
      ids = sound.play();
      sound.pause();
    }
  });


  const shuffleButton = document.getElementById('shuffle');
  let shuffleMode = 'off';
 
  shuffleButton.addEventListener('click', function() {
    if(shuffleMode === 'off'){
        this.classList.add('on');
        shuffleMode = 'on';
    }else{
        this.classList.remove('on');
        shuffleMode = 'off';
    }
  });


  const HeartButton = document.getElementById('Heart');
  let HeartMode = 'off';
 
  HeartButton.addEventListener('click', function() {
    if(HeartMode === 'off'){
        this.classList.add('onh');
        HeartMode = 'on';
    }else{
        this.classList.remove('onh');
        HeartMode = 'off';
    }
  });





  /*
  const loopBtn = document.getElementById('loopBtn');
  loopBtn.addEventListener('click', () => {
    const isLooping = !sound.loop();
    sound.loop(isLooping);
    loopBtn.textContent = isLooping ? 'Stop Loop' : 'Start Loop';
  });*/
  const slider = document.getElementById('sound-slider');
  slider.addEventListener('input', (e) => {
    const volume = parseFloat(e.target.value / 100);
    sound.volume(volume);
    volumeIcon();
  });


  /*
  progressBar.addEventListener('input', (e) => {
    // pause the sound
    sound.pause();
 
    // calculate the seek time
    const seekTime = sound.duration() * (parseFloat(e.target.value) / 100);
 
    // seek to the calculated time
    sound.seek(seekTime);
 
    // play the sound
    progressLoop()
    sound.play();
  });*/


  const repeatButton = document.getElementById('repeat');
  let repeatMode = 'off';
  const isLooping = sound.loop();
 
  repeatButton.addEventListener('click', function() {
    if(repeatMode === 'off'){
        this.classList.add('on');
        repeatMode = 'on';
        sound.loop(!isLooping);
    }else{
        this.classList.remove('on');
        repeatMode = 'off';
        sound.loop(!isLooping);
    }
  });


 
  const volumespeak = document.getElementById('speaker');
 
  function volumeIcon(){
    const SoundVolume = sound.volume();
    if(SoundVolume > 0 && volumespeak.classList.contains("fa-volume-mute")){
      volumespeak.classList.remove("fa-volume-mute");
    }


    if (SoundVolume == 1 || SoundVolume >= 0.5) {
      volumespeak.classList.toggle("fa-volume-up", true);
      volumespeak.classList.toggle("fa-volume-down", false);
    } else if (SoundVolume < 0.5 && SoundVolume != 0) {
      volumespeak.classList.toggle("fa-volume-down", true);
      volumespeak.classList.toggle("fa-volume-up", false);
      console.log("in the else if of down sound");
    } else if (SoundVolume == 0) {
      volumespeak.classList.toggle("fa-volume-mute", true);
      volumespeak.classList.toggle("fa-volume-up", false);
      volumespeak.classList.toggle("fa-volume-down", false);
    }
  }


let previousVolume = sound.volume();
  volumespeak.addEventListener("click", () => {
    if (volumespeak.classList.contains("fa-volume-mute")) {
      volumespeak.classList.remove("fa-volume-mute");
      sound.volume(previousVolume);
      slider.value = previousVolume * 100;
      volumeIcon();
    } else {
      if(volumespeak.classList.contains("fa-volume-up")){
        volumespeak.classList.remove("fa-volume-up");
      }else if(volumespeak.classList.contains("fa-volume-down")){
        volumespeak.classList.remove("fa-volume-down");
      }
      volumespeak.classList.add("fa-volume-mute");
      previousVolume = sound.volume();
      sound.volume(0);
      slider.value = 0
    }
  });

I provided the whole file in case there is conflicting I'm not aware of in my code.

I tried reading the howler.js documentation to find a solution but i couldn't solve it.