• Blazor
  • ASP.NET Core
  • .NET
  • C#

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. 😁


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 {
    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(

Called by JSRuntime call from Blazor button click

window.playAudioFile = (src) => {
    new Audio(src).play();
Cody's logo image, it is an abstract of a black hole with a white Event Horizon.

Cody Merritt Anhorn

A Engineer with a passion for Platform Architecture and Tool Development.