In this scenario, the only way to tell the <audio> element to start playing is ultimately ... through Javascript.
There are two ways; simple, and not-quite-so-simple.
(1) The simple way, using inline JS:
<audio id="sound" src="/media/alert.wav" />
<button onclick="document.getElementById('sound').play()">Play through Javascript</button>
(2) The not-quite-so-simple way, by triggering an event through SignalR on the server application, which then through SignalR sends back a command to invoke a JS function, which you need to have created beforehand in a particular way:
<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()"
}
}
Also create this file: /js/PlaySound.js
window.PlaySound = function() {
document.getElementById('sound').play();
}
Also edit this file: /Pages/_Host.cshtml
<head>
<!-- Various other tags -->
<script src="/js/PlaySound.js"></script>
</head>
Bottom line:
- Accept that you will need Javascript to do things like this.
- Don't bother using Blazor to call JS, unless you absolutely need Server Side stuff to determine if the Javascript code is going to be called and/or how.