Blazor客户端无法呈现javascript音频

Question

我使用的是VS社区2019、dotnet核心3.1和signalR。已将项目上传到gitHUbhttps://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中无效，或者相反。

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

正如您所看到的，实现方式各不相同且不一致。

你的代码没有错，但它不会一直工作，谢天谢地，否则我们都会像几个浏览器版本前一样被自动播放广告淹没。