在 Blazor 的客户端上播放声音？答案

【问题标题】：Play sound on the client in Blazor?在 Blazor 的客户端上播放声音？
【发布时间】：2020-05-04 10:55:38
【问题描述】：

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

我尝试过的：

@page "/"

<h1>Hello, world!</h1>

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

@code {

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

【问题讨论】：

您的意思是，在浏览器上播放声音？这意味着执行 Javascript
C# 在服务器端，Javascript 在客户端。您要做的就是在数据中心内播放声音：p
不知道:)
@PanagiotisKanavos 是的，在浏览器中。我希望保持应用程序纯 c#，而不是在混合中引入 javascript
@Tomy 你问的是如何在音频元素上调用the play() method。 ASP.NET Core Blazor JavaScript interop 解释了一般如何调用 Javascript 方法。不过说真的，没有理由去 服务器 只是回到浏览器并调用该方法。

标签： c# blazor blazor-server-side

【解决方案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>

【讨论】：

未在 Safari 中测试 - 因为我不使用 Apple。
如果你想点击与音频对象相关的方法和事件，你必须使用 JSInterop。例如，很高兴知道它何时播放完毕，或者在使用字节范围时已经缓冲到足以播放。

【解决方案2】：

在这种情况下，告诉<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 代码和/或如何调用。

【讨论】：

【解决方案3】：

我做了类似的事情，但使用了 src:

.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);
    }
}

【讨论】：