我有blazor WASM应用程序与“正确的”.mp3文件，通过JavaScript代码播放。在桌面上让我们说它按下按钮后相当即时，但在手机上它跳过几毫秒，然后它似乎有延迟，它的用户体验不好。我试图查找一些解决方案，但找不到任何东西。有什么办法来解决它或它只是因为手机（iPhone 7）？
sounds.js:
window.PlayAudio = (elementName) => {
document.getElementById(elementName).play();
}- .剃须刀：
<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");
}请参阅回购和网络应用程序：
https://github.com/Laftek/BlazorWASMPWAStaticPublish
https://laftek.github.io/BlazorWASMPWAStaticPublish/Lottie/7
谢谢您的帮助，我们将不胜感激。
1条答案
按热度按时间u59ebvdq1#
这不是Blazor的问题--这是客户端浏览器的行为。它曾经是所有设备的标准，但我认为较新的设备已经放弃了一些限制，因为音频文件不再被视为“大文件”。
在所有平台上获得一致的媒体播放一直是极其困难的--尤其是苹果产品，尤其是老苹果产品。我怀疑声音直到用户操作时才开始加载（就像一个按钮点击）。然后，除非你有快速的数据传输，这是移动的设备的一个常见安全功能，用于防止网站将用户的数据浪费在他们不想要的媒体上。
解决方案是在网站运行的早期捕捉到一个点击--通常有一个加载屏幕和“点击这里进入”。然后在那个点击处理程序（很重要）中，你通过播放它们并立即再次暂停它们来预先启动所有的音频文件。现在，它们将（可能）加载，当你真的想播放文件时，它将被加载并准备好。
请注意，模拟点击是不起作用的，因此您不能在页面呈现后执行
element.onclick()。它必须是实际的用户交互。Javascript音频元素有各种各样的事件，比如
canplay，它让你知道什么时候加载了足够的音频源，你可以开始播放它。https://www.w3schools.com/tags/ref_av_dom.asp
如果你幸运的话，Blazor已经公开了
oncanplay事件。然后你甚至可以使用它来启用你的plaback按钮。我不知道他们是否已经开始关注音频事件了。