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-反之亦然。

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

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

您的代码没有错，但不能永远正常工作，谢天谢地，否则我们会像以前的一些浏览器版本一样被自动播放广告所淹没。

Blazor客户端无法呈现JavaScript音频

1 个答案: