Blazor 客户端无法呈现 javascript 音频

Question

我正在使用 VS community 2019、dotnet core 3.1 和 signalR。 上传项目到 gitHUb https://github.com/shane-droid/BlazorSignalRApp 注意：我是一个完整的菜鸟。 我一直在关注教程并阅读了相关的 SO 相关解决方案。

我觉得这与我写得很糟糕的异步方法有关（因为我没有掌握这里的实现）

非常感谢您的回复和进一步阅读。

问题： 这段代码似乎不会在每次收到消息时触发 javascript 音频。 它每次都会触发计时器，但仅在第一条消息上播放音频。 我在屏幕上放置了一个按钮，在第一条消息后手动播放音频， 然后音频将在后续消息中播放。

Index.razor 有这个方法：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await JSRuntime.InvokeVoidAsync("PlaySound");
        timer.Start();
    }

    if (!firstRender)
    {
        await JSRuntime.InvokeVoidAsync("PlaySound");
        timer.Start();

    }
}

我确定 (!firstRender) 不是正确的方法，但我不知道是什么。

index.html 有一个 javascript

<script type="text/javascript" >
window.PlaySound = function ()
{
    document.getElementById('sound').play();
}

window.PlaySound2 = function ()
{
    document.getElementById('sound').play();
}

用法 https://localhost:44376/receive?_lane=lane1&name=oneil&ph=0987

完整的 Index.razor 代码：[为便于阅读]

    @using Microsoft.JSInterop
@inject IJSRuntime JSRuntime;
@page "/"

@using Microsoft.AspNetCore.SignalR.Client
@using System.Timers;


@inject NavigationManager NavigationManager



<hr>

<div> <h1>Lane1</h1></div>
<div style="background-color: @laneColor">    <h1>@lane1Message </h1>  </div>

<hr>

<div> <h1>Lane2</h1></div>
<h1>@lane2Message  </h1>
<hr>
<audio autoplay controls><source src="Sounds/you-have-new-message.wav" /></audio>

@code {
    private HubConnection _hubConnection;
private string lane1Message;
private string lane2Message;
private string laneColor = "red";
private int flashCounter = 0;
private int soundCounter = 0;
Timer timer;



private void elapsedEventHandler(object sender, ElapsedEventArgs e)
{
    if (flashCounter < 11)
    {
        flashCounter++;
        elapsedTimer();
    }
    if (flashCounter == 10)
    {
        timer.Stop();
    }
}

private void elapsedTimer()
{
    if (laneColor == "white")
    {
        laneColor = "yellow";
    }
    else
    {
        laneColor = "white";
    }

    StateHasChanged();
}

protected override void OnInitialized()
{
    timer = new Timer();
    timer.Interval = 500;
    timer.Elapsed += elapsedEventHandler;
}

protected override async Task OnInitializedAsync()
{


    _hubConnection = new HubConnectionBuilder()
        //.WithUrl(NavigationManager.ToAbsoluteUri("/chatHub"))
        .WithUrl(NavigationManager.ToAbsoluteUri("https://localhost:44376/chatHub"))
        .Build();



    _hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
    {
        if (user == "lane1")
        {
            lane1Message = $"{message}" + " Please enter  room";


        }
        if (user == "lane2")
        {
            lane2Message = $"{message}" + " Please enter  room";
        }

        flashCounter = 0;
        soundCounter = 0;

        StateHasChanged();

    });

    await _hubConnection.StartAsync();

}


protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await JSRuntime.InvokeVoidAsync("PlaySound");
        timer.Start();


    }

    if (!firstRender)
    {
        await JSRuntime.InvokeVoidAsync("PlaySound");
        timer.Start();


    }

}


public bool IsConnected =>
_hubConnection.State == HubConnectionState.Connected;

}

Answer 1

您应该知道浏览器在处理这种事情时表现不同，您可能会发现它适用于例如Chrome 但不是 Firefox - 或相反。

无论如何，有些浏览器需要用户交互才能播放媒体，这可能解释了为什么添加一个按钮并单击它然后允许播放更多声音 - 您与页面交互并且浏览器允许播放音频。

正如您所见，实现各不相同且不一致。

您的代码没有问题，但它并不总是有效，谢天谢地，否则我们都会被自动播放的广告淹没，就像几个浏览器版本之前一样。