Blazor - Playing Sound with JSRuntime
With this article is just show off how to play an audio sound from Blazor, it's not much different that using JavaScript, well it is just using JavaScript. But since Blazor does not have a built-in abstraction over the Audio JavaScript API we have to use IJSRuntime to call into it. Their are other libraries that can do this for you, abstracting away the JavaScript, but in some cases you just need an simple example of calling a block of code. Also this article is just to show off more of my Blazor Component Library. 😁
Example
Checkout a live Demo here EventHorizon.Blazor.UX.
You can also checkout the source of the whole site in the canhorn/EventHorizon.Blazor.UX Github repository.
A Blazor Button Component, with sound triggered from JavaScript
<button @onclick="HandleOnClick">@ChildContent</button>
@code {
[Inject]
public IJSRuntime JSRuntime { get; set; }
private string SoundSrc = "/_content/EventHorizon.Blazor.UX.Controls/sounds/click.mp3";
private async Task HandleOnClick(MouseEventArgs args)
{
await JSRuntime.InvokeVoidAsync(
"playAudioFile",
SoundSrc
);
}
}
JavaScript
Called by JSRuntime call from Blazor button click
window.playAudioFile = (src) => {
new Audio(src).play();
};
