Mp3 声音在手机 (iphone 7) 上延迟 - Blazor WASM + javascript

Question

我有 blazor WASM 应用程序，带有“正确”.mp3 文件，通过 javascript 代码播放。 在桌面上，可以说它在按下按钮后非常即时，但在电话上它会跳过几毫秒，然后似乎有延迟并且用户体验不好。 我试图查找一些解决方案，但找不到任何东西。 有什么办法可以解决它或仅仅因为手机（Iphone 7）？

声音.js：

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

*.razor：

<audio id="sound" src="@navManager.BaseUri/sound/correct.mp3" />
<button id="soundButton" @onclick="PlaySound">Click me to play "correct" sound</button>
...
    public async Task PlaySound()
    {
        await JSRuntime.InvokeAsync<string>("PlayAudio", "sound");
    }

请查看 repo 和 webapp：

https://github.com/Laftek/BlazorWASMPWAStaticPublish

https://laftek.github.io/BlazorWASMPWAStaticPublish/Lottie/7

谢谢您的帮助，我们将不胜感激。

Answer 1

这不是 Blazor 问题——这是客户端浏览器行为。 它曾经是所有设备的标准，但我认为较新的设备已经取消了一些限制，因为音频文件不再被视为“大文件”。

在所有平台上获得一致的媒体播放一直非常困难——尤其是苹果产品，尤其是旧的苹果产品。 我怀疑在用户操作（如单击按钮）之前，声音根本不会开始加载。 然后，除非你有快速的数据传输，否则将需要一些时间来缓冲。 这是移动设备的一项常见安全功能，可防止网站将用户数据浪费在用户不想要的媒体上。

解决方案是在站点进程的早期捕捉点击——通常带有加载屏幕和“点击此处进入”。 然后在那个点击处理程序（重要）中，您通过播放并立即再次暂停来预先启动所有音频文件。 现在，它们将（可能）加载，当您真正想要播放文件时，它会被加载并准备就绪。

请注意，模拟点击将不起作用，因此您不能在页面呈现后只执行element.onclick() 。 它必须是实际的用户交互。

Javascript 音频元素有各种事件，比如canplay可以让您知道何时加载了足够的音频源，您可以开始播放它。

https://www.w3schools.com/tags/ref_av_dom.asp

运气好的话，Blazor已经曝光了oncanplay事件。 然后你甚至可以用它来启用你的回馈按钮。 我不知道他们是否有时间参加音频活动。