Blazor Server中audio.currentTime正常，MAUI Blazor中设置失效求助

问题现象 #

• Blazor Server项目：可正常设置audio.currentTime和audio.playbackRate
• MAUI Blazor项目：audio.playbackRate生效正常，但设置audio.currentTime时进度会被重置为0，无法实现跳转

解决方案 #

1. 确保媒体资源加载完成后再修改进度 #

MAUI Blazor的WebView环境中，音频资源未加载完成时修改currentTime会被浏览器忽略或重置。修改JavaScript的addseconds函数，添加加载状态检查：

function addseconds(secs) {
    const ap = document.getElementById('audioplayer');
    // 检查媒体元数据是否已加载（readyState >= 2 表示已获取元数据）
    if (ap.readyState < 2) {
        // 监听加载完成事件，仅触发一次
        ap.addEventListener('loadedmetadata', () => {
            ap.currentTime += secs;
        }, { once: true });
    } else {
        ap.currentTime += secs;
    }
}

2. 通过ElementReference直接操作音频元素（避免DOM查询误差） #

放弃document.getElementById查询，改用Blazor的ElementReference传递元素，减少DOM操作的不确定性：

修改TpsAudioPlayer.razor组件

@inject IJSRuntime js;

<audio @key="@audioId" controls id="audioplayer" @ref="audioElement">
    <source src="@Url">
</audio>

@code {
    private string Url { get; set; }
    private Guid audioId = Guid.NewGuid();
    private ElementReference audioElement;
    private bool isAudioReady;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (!isAudioReady && !string.IsNullOrEmpty(Url))
        {
            // 等待音频资源加载完成
            isAudioReady = await js.InvokeAsync<bool>("waitForAudioReady", audioElement);
            StateHasChanged();
        }
    }

    public void Reload(string url)
    {
        audioId = Guid.NewGuid();
        Url = url;
        isAudioReady = false;
        InvokeAsync(StateHasChanged);
    }

    public async Task PlayBackRate(double pbr)
    {
        if (isAudioReady)
            await js.InvokeVoidAsync("playbackrate", audioElement, pbr);
    }

    public async Task AddSeconds(double secs)
    {
        if (isAudioReady)
            await js.InvokeVoidAsync("addseconds", audioElement, secs);
    }
}

新增JavaScript函数到audio.js

function waitForAudioReady(audioElement) {
    return new Promise(resolve => {
        if (audioElement.readyState >= 2) {
            resolve(true);
        } else {
            audioElement.addEventListener('loadedmetadata', () => resolve(true), { once: true });
        }
    });
}

function addseconds(audioElement, secs) {
    if (audioElement.readyState < 2) {
        audioElement.addEventListener('loadedmetadata', () => {
            audioElement.currentTime += secs;
        }, { once: true });
    } else {
        audioElement.currentTime += secs;
    }
}

function playbackrate(audioElement, pbr) {
    audioElement.playbackRate = pbr;
}

3. 配置MAUI WebView2允许本地资源访问（Windows平台） #

Windows平台的WebView2默认对本地文件有访问限制，修改MauiProgram.cs添加配置：

builder.Services.AddMauiBlazorWebView();
#if WINDOWS
builder.Services.AddBlazorWebViewDeveloperTools();
builder.Services.Configure<BlazorWebViewWindowsOptions>(options =>
{
    options.WebViewOptions.AdditionalBrowserArguments = "--allow-file-access-from-files";
});
#endif

4. 验证资源复制设置 #

确保wwwroot/audio下的MP3文件在项目属性中设置为「复制到输出目录：始终复制」，避免资源缺失导致加载异常。

测试验证 #

修改完成后重新编译MAUI Blazor项目，点击「Load Audio」加载音频，待音频开始播放后点击「Add 10 Seconds」，检查播放进度是否正常跳转。

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