Blazor 客户端无法呈现 javascript 音频

Question

我正在使用 VS 社区 2019、dotnet 核心 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 音频

Blazor Client unable to render javascript audio

c#

blazor

blazor-client-side