Laravel多页面网站音频跨页播放中断问题的解决方法咨询

下面几个方案不需要你重构现有UI，只需要做局部修改就能解决页面切换音频停止的问题：

方案一：全局固定播放器 + AJAX加载页面内容（推荐） #

核心思路是把音频播放器放到全局布局里，页面切换时不刷新整个页面，只用AJAX加载并替换正文内容，让播放器始终存在于DOM中。

具体实现步骤： #

1. 修改主布局文件：把音频播放器放在全局固定位置（比如页面底部），确保所有页面都能复用这个播放器，同时给主内容区域加一个唯一ID用于替换内容。

<!-- resources/views/layouts/app.blade.php -->
<body>
    <!-- 全局固定音频播放器 -->
    <div class="fixed bottom-0 left-0 right-0 bg-dark p-3 z-50">
        <audio id="global-player" controls>
            <source src="{{ isset($currentAudio) ? $currentAudio->url : '' }}" type="audio/mpeg">
        </audio>
    </div>

    <!-- 可替换的主内容区域 -->
    <main id="page-content" class="pb-20">
        @yield('content')
    </main>
</body>

2. 给页面跳转链接加统一标识：给所有需要AJAX跳转的链接添加ajax-nav类，比如：

<!-- 页面内的跳转链接示例 -->
<a href="{{ route('album.show', $album) }}" class="ajax-nav">查看专辑</a>

3. 添加AJAX导航的JS逻辑：监听链接点击，用Fetch API加载目标页面，替换主内容，同时更新页面标题和浏览器历史记录。

document.addEventListener('DOMContentLoaded', () => {
    const player = document.getElementById('global-player');
    const contentArea = document.getElementById('page-content');

    // 处理AJAX链接点击
    document.body.addEventListener('click', (e) => {
        const link = e.target.closest('.ajax-nav');
        if (!link || link.target === '_blank') return;
        
        e.preventDefault();
        const targetUrl = link.href;

        fetch(targetUrl)
            .then(res => res.text())
            .then(html => {
                const tempContainer = document.createElement('div');
                tempContainer.innerHTML = html;

                // 更新主内容
                contentArea.innerHTML = tempContainer.querySelector('#page-content').innerHTML;
                // 更新页面标题
                document.title = tempContainer.querySelector('title').textContent;
                // 更新浏览器历史
                history.pushState({}, document.title, targetUrl);

                // 如果新页面有指定音频，更新播放器源
                const newAudioSrc = tempContainer.querySelector('#global-player source')?.src;
                if (newAudioSrc && newAudioSrc !== player.querySelector('source').src) {
                    player.querySelector('source').src = newAudioSrc;
                    player.load();
                    player.play();
                }
            });
    });

    // 处理浏览器前进/后退
    window.addEventListener('popstate', () => {
        fetch(window.location.href)
            .then(res => res.text())
            .then(html => {
                const tempContainer = document.createElement('div');
                tempContainer.innerHTML = html;
                contentArea.innerHTML = tempContainer.querySelector('#page-content').innerHTML;
                document.title = tempContainer.querySelector('title').textContent;

                const newAudioSrc = tempContainer.querySelector('#global-player source')?.src;
                if (newAudioSrc && newAudioSrc !== player.querySelector('source').src) {
                    player.querySelector('source').src = newAudioSrc;
                    player.load();
                    player.play();
                }
            });
    });
});

这个方案体验最接近SPA，用户几乎感觉不到页面刷新，音频也不会中断。

方案二：用SharedWorker后台托管音频播放 #

把音频播放逻辑放到浏览器的SharedWorker中，即使页面切换，Worker仍在后台运行，音频不会停止。页面只负责发送控制指令给Worker。

具体实现： #

1. 创建SharedWorker脚本：在public目录下新建audio-worker.js：

let audioInstance = null;
let currentAudioUrl = '';

self.onconnect = (e) => {
    const port = e.ports[0];
    port.start();

    port.onmessage = (msg) => {
        const { action, url } = msg.data;
        switch(action) {
            case 'play':
                if (!audioInstance || currentAudioUrl !== url) {
                    audioInstance = new Audio(url);
                    currentAudioUrl = url;
                    audioInstance.play();
                } else if (audioInstance.paused) {
                    audioInstance.play();
                }
                port.postMessage({ status: 'playing', url: currentAudioUrl });
                break;
            case 'pause':
                if (audioInstance && !audioInstance.paused) {
                    audioInstance.pause();
                    port.postMessage({ status: 'paused' });
                }
                break;
            case 'getCurrentState':
                port.postMessage({
                    status: audioInstance && !audioInstance.paused ? 'playing' : 'paused',
                    currentUrl: currentAudioUrl,
                    currentTime: audioInstance ? audioInstance.currentTime : 0
                });
                break;
        }
    };
};

2. 页面中连接Worker并控制播放：在每个页面的JS中加入以下代码：

// 连接SharedWorker
const audioWorker = new SharedWorker('/audio-worker.js');
audioWorker.port.start();

// 页面加载时同步Worker中的播放状态
audioWorker.port.postMessage({ action: 'getCurrentState' });
audioWorker.port.onmessage = (msg) => {
    if (msg.data.currentUrl) {
        // 更新页面播放器的显示
        document.getElementById('player-source').src = msg.data.currentUrl;
        document.getElementById('page-player').load();
        document.getElementById('page-player').currentTime = msg.data.currentTime;
        if (msg.data.status === 'playing') {
            document.getElementById('page-player').play().catch(err => {
                // 处理自动播放限制，提示用户手动点击
                document.getElementById('play-reminder').classList.remove('hidden');
            });
        }
    }
};

// 绑定页面播放按钮事件
document.getElementById('play-btn').addEventListener('click', () => {
    const audioUrl = document.getElementById('player-source').src;
    audioWorker.port.postMessage({ action: 'play', url: audioUrl });
});

document.getElementById('pause-btn').addEventListener('click', () => {
    audioWorker.port.postMessage({ action: 'pause' });
});

这个方案适合需要完全后台播放的场景，但要注意浏览器对SharedWorker的支持情况，以及跨域限制。

方案三：用SessionStorage保存播放状态，页面加载时恢复 #

这个方案最简单，页面切换时通过SessionStorage保存音频的URL、播放进度和状态，新页面加载后读取并恢复播放。缺点是切换页面时会有短暂的中断，但实现成本极低。

代码实现： #

const player = document.getElementById('page-player');

// 保存播放状态到SessionStorage
player.addEventListener('play', () => {
    sessionStorage.setItem('audio_url', player.querySelector('source').src);
    sessionStorage.setItem('audio_current_time', player.currentTime);
    sessionStorage.setItem('audio_is_playing', 'true');
});

player.addEventListener('pause', () => {
    sessionStorage.setItem('audio_is_playing', 'false');
});

player.addEventListener('timeupdate', () => {
    sessionStorage.setItem('audio_current_time', player.currentTime);
});

// 页面加载时恢复状态
document.addEventListener('DOMContentLoaded', () => {
    const audioUrl = sessionStorage.getItem('audio_url');
    const currentTime = sessionStorage.getItem('audio_current_time');
    const isPlaying = sessionStorage.getItem('audio_is_playing') === 'true';

    if (audioUrl) {
        player.querySelector('source').src = audioUrl;
        player.load();
        if (currentTime) player.currentTime = parseFloat(currentTime);
        if (isPlaying) {
            // 处理自动播放限制
            player.play().catch(() => {
                document.getElementById('manual-play-prompt').classList.remove('hidden');
            });
        }
    }
});

这个方案适合快速临时解决问题，但用户体验不如前两个方案。

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