Blazor Client не может воспроизвести javascript аудио - PullRequest
Новая
       3

Blazor Client не может воспроизвести javascript аудио

0 голосов
/ 03 марта 2020

Я использую VS community 2019, делаю tnet core 3.1 и signalR. Загруженный проект в gitHUb https://github.com/shane-droid/BlazorSignalRApp Примечание: я полный нуб. Я следовал учебным пособиям и прочитал соответствующие решения, связанные с SO.

У меня такое ощущение, что это что-то вроде способа, которым я плохо написал asyn c методы (потому что я не gr asp реализация здесь]

Приглушенные ответы и дальнейшее чтение очень приветствуются.

Проблема: Этот фрагмент кода, похоже, не запускает аудио 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) - неправильный подход, но я не знаю, что такое.

Индекс. html имеет javascript

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

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

ИСПОЛЬЗОВАНИЕ https://localhost: 44376 / получение? _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;
* 1 033 *}

1 Ответ

0 голосов
/ 04 марта 2020

Вы должны знать, что браузеры ведут себя по-разному с такими вещами, и вы можете обнаружить, что они работают, например, Chrome, но не Firefox - или наоборот.

В любом случае некоторые браузеры требуют взаимодействия с пользователем для воспроизведения мультимедиа, что может объяснить, почему добавление кнопки и ее нажатие затем позволяют воспроизводить дополнительные звуки - вы взаимодействовали со страницей, а браузер разрешал воспроизведение звука.

Как вы видели, реализации различаются и несовместимы.

Ваш код не виноват, но, к счастью, он не всегда будет работать, или мы все были бы завалены автопоказом таких объявлений, как несколько версий браузера a go.

...