c# - 在 Blazor 的客户端上播放声音？

Question

我有一个服务器托管的 Blazor 应用程序，我试图弄清楚如何在单击按钮时在客户端播放声音(不接触 JavaScript，呃)。

我试过的:

@page "/"

<h1>Hello, world!</h1>

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

@code {

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

Answer 1

Blazor 中没有 JSInterop 的音频非常容易。

因为 Blazor 控制 DOM 中的元素，我们可以告诉它在两个不同的音频元素之间切换，一组播放，一组不播放。

使用你自己的声音文件😀

以防万一您担心这可能每次都下载音频文件，不要 - 它不会。

此外，虽然这涉及到服务器的往返行程，但一次往返的总流量仅为 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>