C# 在Blazor的客户端上播放声音？_C#_Blazor_Blazor Server Side

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

c# blazor

C# 在Blazor的客户端上播放声音？,c#,blazor,blazor-server-side,C#,Blazor,Blazor Server Side,我有一个服务器托管的Blazor应用程序，我正试图弄清楚当点击按钮而不触碰JavaScript时，如何在客户端播放声音我所尝试的： @页面/ 你好，世界！惊恐 @代码{ 无效btnAlarm\u把手舔 { // ??? } } 在这个场景中，告诉元素开始播放的唯一方法是。。。通过Javascript 有两种方法；很简单，也不是很简单 1使用内联JS的简单方法： <audio id="sound" src="/media/alert.wav" /> <button oncl

我有一个服务器托管的Blazor应用程序，我正试图弄清楚当点击按钮而不触碰JavaScript时，如何在客户端播放声音

我所尝试的：

@页面/ 你好，世界！惊恐 @代码{ 无效btnAlarm\u把手舔 { // ??? } }

在这个场景中，告诉元素开始播放的唯一方法是。。。通过Javascript

有两种方法；很简单，也不是很简单

1使用内联JS的简单方法：

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

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

同时编辑此文件：/Pages/\u Host.cshtml

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

底线：

接受这样一个事实，您将需要Javascript来完成这样的事情。不要麻烦使用Blazor调用JS，除非您绝对需要服务器端的东西来确定是否要调用Javascript代码和/或如何调用。

在Blazor中没有JSInterop，音频非常容易

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

使用您自己的声音文件我做了类似的事情，但使用了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);
    }
}

你是说，在浏览器上播放声音？这意味着在服务器端执行JavascriptC，在客户端执行Javascript。您要做的是在数据中心内播放声音：pDid not know:@PanagiotisKanavos Yes，在浏览器中。我希望保持应用程序纯c，而不在应用程序中引入javascriptmix@Tomy你要问的是如何调用音频元素。解释如何调用Javascript方法。不过，说真的，没有理由去服务器上只返回浏览器并调用该方法。在Safari中没有测试-因为我不做苹果。如果你想点击与音频对象相关的方法和事件，你必须使用JSInterop。例如，当它使用字节范围时，最好知道它何时完成播放，或者是否有足够的缓冲区来播放。

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

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