javascript - 如何在JavaScript中的刷新之间保持歌曲播放

Question

因此，我现在拥有此功能可以在页面上播放音频:

function startAudio(base) {
  var audio = new Audio()
  audio.volume = 0.7
  audio.autoplay = true
  audio.load()
  audio.addEventListener('load', function(){
    audio.play()
  }, true)
  audio.addEventListener('ended', function(){
    this.currentTime = 0
    this.play()
  }, false)
  audio.src = base + '/audio.wav'

  var player = document.querySelector('.player')
  if (player) {
    player.addEventListener('click', togglePlay)
  }

  var isPlaying = false

  audio.onplaying = function(){
    isPlaying = true;
  }

  audio.onpause = function(){
    isPlaying = false;
  }

  function togglePlay() {
    if (isPlaying) {
      audio.pause()
    } else {
      audio.play()
    }
  }
}

问题是，如果他们开始播放音频，然后单击链接，则会转到新页面。此页面重新加载相同的index.js脚本。我有什么办法可以继续播放音频，而不必再次按播放键？我知道您可以将偏移量存储在 localStorage或其他内容中，但是我不知道是否有一种方法可以在页面刷新或页面更改时自动播放。您有什么推荐的吗？我不能真正使它成为能够解决问题的单页应用程序(SPA)，但不幸的是，它超出了该应用程序的范围。

Answer 1

就像您说的那样，使用localStorage:

function startAudio(base, offset = 0) {
  var audio = new Audio()
  audio.volume = 0.7
  audio.currentTime = offset;
  audio.autoplay = true
  audio.load()

  audio.addEventListener('load', function(){
    audio.play()
  }, true);

  audio.addEventListener('ended', function(){
    this.currentTime = 0;
    this.play();
  }, false);

  // Reflect data to localStorage
  localStorage.setItem("audio", base);

  setInterval(() => {
    localStorage.setItem("audio_time", audio.currentTime);
  }, 100);

  audio.src = base + '/audio.wav'

 //...
}

if("audio" in localStorage) {
  startAudio(
    localStorage.getItem("audio"),
    +localStorage.getItem("audio_time");
  );
}