How to Play a Sound with Blazor and JavaScript

How to Play a Sound with Blazor and JavaScript

Learn how to play a sound with Blazor and JavaScript. There are five steps we need the ability to play a sound in Blazor: An HTML <audio> element, A JavaScript method to play the audio, An instance of IJSRuntime injected to our Blazor component, A C# method that uses IJSRuntime to invoke the JavaScript method, An HTML element that invokes the C# method when clicked.

I came across a problem the other day where I needed to play a sound file in a Blazor WebAssembly application, but there were very limited resources as to how to do this. So, once I figured it out, I also figured that someone else was going to have this problem.

(Even if that person is just me in the future).

Let's see how to play a sound in Blazor!

The Sample Project

As always, there's a sample project on GitHub that has the code we're going to write in this post. Check it out!

The Steps

There are five steps we need the ability to play a sound in Blazor:

  1. An HTML <audio> element.
  2. A JavaScript method to play the audio.
  3. An instance of IJSRuntime injected to our Blazor component.
  4. A C## method that uses IJSRuntime to invoke the JavaScript method.
  5. An HTML element that invokes the C## method when clicked.

blazor javascript webassembly programming

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Wrapping JavaScript libraries in Blazor WebAssembly/WASM

In this article, we will show how you can wrap a JavaScript library in Blazor and thereby getting that one feature into Blazor WebAssembly. Wrapping JavaScript libraries in Blazor WebAssembly/WASM

Call POST API ASP NET Core Blazor | Blazor CRUD using API Part-1

LIKE | COMMENT | SHARE | SUBSCRIBE In this tutorial, I will show you how to save data into database using Web API form Asp.Net Core Blazor #Webassembly appli...

Blazor : Calling REST API ASP NET Core Blazor | WEB API

LIKE | COMMENT | SHARE | SUBSCRIBE How to call and consume a REST API from ASP.NET Core Blazor application. Blog : https://aspdotnetexplorer.blogspot.com/sea...

Blast Off with Blazor: Prerender a Blazor WebAssembly Application

In this post, we speed up initial load time by prerendering our Blazor Web Assembly application. We need to discuss how to mitigate the biggest drawback of using Blazor WebAssembly: the initial load time. While the WebAssembly solution allows us to enjoy a serverless deployment scenario and fast interactions, the initial download can take awhile. Users need to sit around while the browser downloads the .NET runtime and all your project’s DLLs.

CRUD App Using Blazor And Entity Framework Core in ASP.NET Core

LIKE | COMMENT | SHARE | SUBSCRIBE In this tutorial, we will see how to create a simple CRUD (create, read, update, and delete) application for ASP.NET Core ...