Воспроизвести звук на клиенте в Blazor? - PullRequest
Новая
       8

Воспроизвести звук на клиенте в Blazor?

0 голосов
/ 31 января 2020

У меня есть приложение Blazor, размещенное на сервере, и я пытаюсь выяснить, как воспроизводить звук на стороне клиента при нажатии кнопки (без нажатия JavaScript, тьфу).

Что Я пробовал: 

@page "/"

<h1>Hello, world!</h1>

<audio src="alert.wav"></audio>
<button @onclick="@btnAlarm_handleClick">ALARM</button>

@code {

   void btnAlarm_handleClick()
   {
      // ???
   }
}

Ответы [ 3 ]

7 голосов
/ 01 февраля 2020

Аудио довольно просто без JSInterop в Blazor.

Поскольку Blazor контролирует элементы в DOM, мы можем просто сказать ему переключаться между двумя различными аудио-элементами, один для воспроизведения и один для того, чтобы не играть.

Используйте свой собственный звуковой файл ?

На всякий случай, если вас беспокоит, что это может загружать аудиофайл каждый раз, не ... это не так.

Также , хотя это включает в себя обратную передачу на сервер, трафик c составляет всего около 770 байт за одну обратную передачу. 

<h1>Play sound!</h1>

@code
{
    bool hidden = true;
}

<div class="card">
    <div class="card-header">
        <button @onclick=@(()=>hidden=!hidden)>@(hidden ? "Play" : "Stop")</button>

    </div>
    <div class="card-body">
        @if (!hidden)
        {
            <audio autoplay controls><source src="/crooner2.mp3" /></audio>
        }
        else
        {
            <audio controls muted><source src="/crooner2.mp3" /></audio>
        }
    </div>
</div>
1 голос
/ 01 февраля 2020

Я сделал нечто подобное, но использовал sr c:

Пример из. Net Демо группы пользователей, выпадающий список mp3-файлов для выбора. 

@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment env
@inject AppState State

<h3>Media</h3>

<select @onchange="PlayFile" value="@State.LastSong">
    @foreach (var f in new System.IO.DirectoryInfo(env.WebRootPath + "/sounds").GetFiles("*.mp3"))
    {
        <option value="/sounds/@f.Name">@f.Name</option>
    }
</select>

<audio src="@_currentFile" autoplay></audio>

@code {

    private string _currentFile = "";

    private void PlayFile(ChangeEventArgs e)
    {
        var song = e.Value.ToString();

        _currentFile = song;
        State.SetSong(song);
    }
}
1 голос
/ 31 января 2020

В этом сценарии единственный способ сообщить элементу <audio> о начале игры - в конечном счете ... через Javascript.

Есть два способа; простой и не совсем простой.

(1) Простой способ с использованием встроенного JS: 

<audio id="sound" src="/media/alert.wav" />

<button onclick="document.getElementById('sound').play()">Play through Javascript</button>

(2 ) Не совсем простой способ, вызывая событие через SignalR на серверном приложении, которое затем через SignalR отправляет обратно команду для вызова функции JS, которую необходимо предварительно создать в определенным образом: 

<audio id="sound" src="/media/alert.wav" />

<button @onclick="@ClickHandler">Play through C#</button>

@code {
    async void ClickHandler()
    {
        await JSRuntime.InvokeAsync<string>("PlaySound"); // this calls "window.PlaySound()"
    }
}

Также создайте этот файл: /js/PlaySound.js

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

Также отредактируйте этот файл: /Pages/_Host.cshtml

<head>
    <!-- Various other tags -->
    <script src="/js/PlaySound.js"></script>
</head>

Итог:

  • Примите, что вам понадобится Javascript, чтобы делать подобные вещи.
  • Не пытайтесь использовать Blazor для вызова JS, если только вам абсолютно не нужны вещи на стороне сервера, чтобы определить, будет ли вызываться код Javascript и / или как.
...