音频元素在视口中只能播放一次

Question

我正在构建一个页面，其中在滚动时多个音频进入和离开视口。 它们仅在视口内播放。到目前为止，这仍然有效，但是当音频停止并且您再次滚动时，它将再次开始播放。我想防止这种情况，只在它第一次离开视口并再次进入时才再次播放音频。

这部分检查音频是否结束

document.querySelectorAll('.audioplayer').forEach((track) => {
  track.addEventListener("ended", function(){
    this.classList.add('ended');
  })
});

这部分是我的自动播放

$(window).scroll(function() {
   $('.audioplayer').each(function(){
       if ($(this).isInViewport() && !$(this).hasClass('ended')) {
           $(this)[0].play();
       } else {
           $(this)[0].pause();
           $(this)[0].className = 'audioplayer';
           $(this)[0].currentTime = 0;
       }
   })
});

我不知道为什么它不起作用