SvelteKit实现页面切换时后台音频连续播放的技术问询

核心思路 #

SvelteKit的页面导航会替换<slot>内的内容，但根布局(__layout.svelte)会始终保留。我们可以把音频实例放在根布局中，避免页面切换时被销毁；同时通过用户交互触发播放，满足浏览器自动播放限制。

实现步骤 #

1. 根布局中添加音频控制逻辑

创建/修改src/routes/__layout.svelte，这里是音频实例的持久化容器：

<script>
  import { onMount } from 'svelte';
  
  let audioInstance = null;
  let showAudioPrompt = true;

  // 启用音频
  const enableAudio = () => {
    audioInstance = new Audio('/background-audio.mp3'); // 替换为你的音频路径
    audioInstance.loop = true;
    
    audioInstance.play().catch(err => {
      console.error('音频播放失败:', err);
      showAudioPrompt = true;
    });
    
    showAudioPrompt = false;
    localStorage.setItem('audioEnabled', 'true'); // 记住用户选择
  };

  // 禁用音频
  const disableAudio = () => {
    audioInstance?.pause();
    audioInstance = null;
    showAudioPrompt = false;
    localStorage.setItem('audioEnabled', 'false');
  };

  // 页面加载时恢复用户之前的选择
  onMount(() => {
    const savedChoice = localStorage.getItem('audioEnabled');
    if (savedChoice === 'true') {
      enableAudio();
    } else if (savedChoice === 'false') {
      showAudioPrompt = false;
    }
  });
</script>

{#if showAudioPrompt}
<div class="audio-prompt">
  <p>是否启用网站背景音频？</p>
  <button on:click={enableAudio}>同意</button>
  <button on:click={disableAudio}>拒绝</button>
</div>
{/if}

<slot /> <!-- 页面内容会插入到这里 -->

<style>
  .audio-prompt {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    z-index: 9999;
  }
</style>

2. 全局控制音频（可选）

如果需要在其他页面组件中控制音频（比如暂停、切换曲目），可以用Svelte Store管理音频实例：
创建src/lib/stores/audioStore.js：

import { writable } from 'svelte/store';

export const audioInstance = writable(null);

export const enableAudio = (audioUrl) => {
  audioInstance.update(current => {
    current?.pause();
    const newAudio = new Audio(audioUrl);
    newAudio.loop = true;
    newAudio.play();
    return newAudio;
  });
  localStorage.setItem('audioEnabled', 'true');
};

export const disableAudio = () => {
  audioInstance.update(current => {
    current?.pause();
    return null;
  });
  localStorage.setItem('audioEnabled', 'false');
};

然后在根布局中引入使用：

<script>
  import { onMount } from 'svelte';
  import { audioInstance, enableAudio, disableAudio } from '$lib/stores/audioStore';
  
  let showAudioPrompt = true;

  onMount(() => {
    const savedChoice = localStorage.getItem('audioEnabled');
    if (savedChoice === 'true') {
      enableAudio('/background-audio.mp3');
      showAudioPrompt = false;
    } else if (savedChoice === 'false') {
      showAudioPrompt = false;
    }
  });
</script>

<!-- 提示框和样式同上 -->

注意事项 #

• 必须通过用户点击等交互触发play()，否则浏览器会阻止自动播放，这是浏览器的安全政策要求。
• 如果用户强制刷新页面，音频会终止，但下次加载时会根据localStorage的设置自动尝试恢复播放（前提是用户之前已授权）。
• 确保音频文件路径正确，SvelteKit中静态资源放在static目录下即可直接引用。

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