Blazor Server中JS互操作播放音频首次播放截断问题求助

这个问题的核心原因是：

1. 浏览器在标签页闲置或首次加载时，会为节省资源暂停媒体资源的预加载/初始化，首次触发播放时需要重新完成资源加载和音频上下文初始化，导致开头部分被跳过；
2. 直接调用audio.load()后立即执行play()，此时音频并未完全就绪，浏览器还在缓冲数据，导致播放不完整。

以下是针对性的解决方案：

1. 优化音频预加载与播放时机 #

修改音频标签启用预加载，并确保在音频完全就绪后再播放：

修改Razor组件代码 #

<button class="btn btn-outline-primary me-10" @onclick="SpeakName">Play</button>

<!-- 启用预加载，提前加载音频资源 -->
<audio id="player" preload="auto">
    <source id="playerSource" src="../sounds/1.mp3">
</audio>

@code{
    [Inject] private IJSRuntime _jsRuntime { get; set; }

    protected override async Task OnInitializedAsync()
    {
        // 页面初始化时预加载音频，加载完成后暂停（避免触发浏览器自动播放限制）
        await _jsRuntime.InvokeAsync<string>("PreloadAudio", "../sounds/1.mp3");
    }

    private async Task SpeakName()
    {
        await _jsRuntime.InvokeAsync<string>("PlayAudioFile", "../sounds/1.mp3");
    }
}

更新JS代码 #

// 预加载音频并暂停
window.PreloadAudio = async (src) => {
    const audio = document.getElementById('player');
    const audioSource = document.getElementById('playerSource');
    
    if (!audio || !audioSource) return;
    
    audioSource.src = src;
    await new Promise((resolve) => {
        audio.oncanplaythrough = () => {
            audio.pause();
            audio.currentTime = 0;
            resolve();
        };
        audio.load();
    });
};

window.PlayAudioFile = async (src) => {
    const audio = document.getElementById('player');
    const audioSource = document.getElementById('playerSource');
    
    if (!audio || !audioSource) return;
    
    // 如果音频源未变化，直接重置到开头播放
    if (audioSource.src === src) {
        audio.currentTime = 0;
        await audio.play();
        return;
    }
    
    // 切换音频源时，等待加载完成再播放
    audio.pause();
    audio.currentTime = 0;
    audioSource.src = src;
    
    await new Promise((resolve, reject) => {
        audio.oncanplaythrough = resolve;
        audio.onerror = reject;
        audio.load();
    });
    
    await audio.play();
};

window.PauseAudio = (elementName) => {
    document.getElementById(elementName)?.pause();
};

2. 保持Blazor Server连接活跃 #

Blazor Server依赖SignalR连接，闲置过久会导致连接重建，可能影响JS互操作的响应速度。在Program.cs中配置SignalR的保持活跃策略：

builder.Services.AddServerSideBlazor()
    .AddHubOptions(options =>
    {
        // 缩短心跳间隔，避免连接被标记为闲置
        options.KeepAliveInterval = TimeSpan.FromSeconds(8);
        options.ClientTimeoutInterval = TimeSpan.FromSeconds(30);
    });

3. 替代方案：使用全局Audio实例 #

如果DOM音频标签的方式仍有问题，可以改用JS全局Audio实例，避免DOM操作的延迟：

JS代码 #

let globalAudio = null;

window.InitGlobalAudio = (src) => {
    globalAudio = new Audio(src);
    globalAudio.preload = 'auto';
};

window.PlayGlobalAudio = async (src) => {
    if (!globalAudio || globalAudio.src !== src) {
        globalAudio = new Audio(src);
        await globalAudio.load();
    }
    globalAudio.currentTime = 0;
    await globalAudio.play();
};

Razor组件代码 #

protected override async Task OnInitializedAsync()
{
    await _jsRuntime.InvokeAsync<string>("InitGlobalAudio", "../sounds/1.mp3");
}

private async Task SpeakName()
{
    await _jsRuntime.InvokeAsync<string>("PlayGlobalAudio", "../sounds/1.mp3");
}

这些方案的核心是确保音频资源在用户触发播放前已完全加载就绪，同时避免连接闲置导致的JS执行延迟，从而解决首次播放开头截断的问题。

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