Playing Audio in Blazor Server with js interop, cuts first part of audio on first play

I've followed this tutorial to play audio in Blazor Server using js interop:
https://www.appvnext.com/blog/2020/4/20/playing-audio-files-in-a-blazor-application

I want to press a button and have it play an .mp3 file.

On first page load or if I left the browser tab alone for more than say 10 seconds, it cuts off the first part of the audio file. If I repeatedly press it it doesn't cut off any more.

It happens in Firefox, Brave, Chrome and Edge.

It happens on my dev machine and my Windows Server.

I've tried putting the src tag directly in the audio tag, or separating as below.

This example does a .load before the .play in javascript. I tried a simpler previous way to play it (sese js below 'PlayAudio') and that does it too. I thought .load might fix it but it seems to make no difference.

The code
js (currently using PlayAudioFile, but also happens with PlayAudio):

window.PlayAudio = (elementName) => {
    document.getElementById(elementName).play();
}

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

window.PlayAudioFile = (src) => {
    var audio = document.getElementById('player');
    if (audio != null) {
        var audioSource = document.getElementById('playerSource');
        if (audioSource != null) {
            audioSource.src = src;
            audio.load();
            audio.play();
        }
    }
}

.razor file

<button style="margin-right:10px" class="btn btn-outline-primary" @onclick="@(() => SpeakName())">Play</button>

<audio id="player">
    <source id="playerSource" src="">
</audio>

@code{
    ...

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


...    

}

private async Task SpeakName(string Id)
{
_file = Id + ".mp3?x=" + DateTime.Now.Microsecond;

await _jsRuntime.InvokeAsync<string>("PlayAudioFile", $"../sounds/{_file}");

}

I've extensively searched and can't find anything.

How can I stop it cutting off the first bit of audio when playing the audio file for the first time?

Thanks

Potentially issue with the fact that browser might need time to load the audio file when it's first played? How large is the file? Maybe try preloading:

window.audioPreloaded = false;

window.preloadAudio = (src) => {
    if (!window.audioPreloaded) {
        var audio = document.getElementById('player');
        if (audio != null) {
            var audioSource = document.getElementById('playerSource');
            if (audioSource != null) {
                audioSource.src = src;
                audio.load();
                window.audioPreloaded = true;
            }
        }
    }
};

window.PlayAudio = (elementName) => {
    document.getElementById(elementName).play();
};

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

window.PlayAudioFile = (src) => {
    var audio = document.getElementById('player');
    if (audio != null) {
        var audioSource = document.getElementById('playerSource');
        if (audioSource != null) {
            if (audioSource.src !== src) {
                audioSource.src = src;
                audio.load();
            }
            audio.play();
        }
    }
};

EDIT: You could also wait for whole file to preload, by listening for the canplaythrough event:

window.PlayAudioFile = (src) => {
    var audio = document.getElementById('player');
    if (audio != null) {
        var audioSource = document.getElementById('playerSource');
        if (audioSource != null) {
            if (audioSource.src !== src) {
                audioSource.src = src;
                audio.load();
            }

            if (audio.readyState >= 4) {
                audio.play();
            } else {
                audio.addEventListener('canplaythrough', function playWhenReady() {
                    audio.removeEventListener('canplaythrough', playWhenReady);
                    audio.play();
                });
            }
        }
    }
};

Razor:

@inject IJSRuntime _jsRuntime

<button style="margin-right:10px" class="btn btn-outline-primary" @onclick="@(() => SpeakName())">Play</button>

<audio id="player">
    <source id="playerSource" src="">
</audio>

@code{
    ...
    private string _file = "";

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _file = $"../sounds/1.mp3?x={DateTime.Now.Millisecond}";
            await _jsRuntime.InvokeVoidAsync("preloadAudio", _file);
        }
    }

    private async Task SpeakName()
    {
        await _jsRuntime.InvokeAsync<string>("PlayAudioFile", _file);
    }

    ...
}

not tested it, lot of things I don't know about your ENV, so you might need to play around with it.