Rad*_*asa 3 c# blazor blazor-server-side
我有一个服务器托管的 Blazor 应用程序，我试图弄清楚单击按钮时如何在客户端播放声音（不接触 JavaScript，呃）。
我试过的：
@page "/"
<h1>Hello, world!</h1>
<audio src="alert.wav"></audio>
<button @onclick="@btnAlarm_handleClick">ALARM</button>
@code {
void btnAlarm_handleClick()
{
// ???
}
}
Mis*_*goo 13
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>
在这种情况下，告诉<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>
底线：
| 归档时间： |
|
| 查看次数： |
5199 次 |
| 最近记录： |