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事件。 然后你甚至可以用它來啟用你的回饋按鈕。 我不知道他們是否有時間參加音頻活動。