How to Play a Sound with Blazor and JavaScript

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

What is GEEK

Buddha Community

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

https://youtu.be/5xG9J6OqdV8

#blazor #blazor in c# #blazor tutorial #blazor webassembly #blazor crud #blazor with asp.net core

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

https://youtu.be/5xG9J6OqdV8

#blazor #blazor tutorial #blazor in c# #blazor crud #blazor webassembly #blazor with asp.net core

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

https://youtu.be/5xG9J6OqdV8

#blazor #blazor tutorial #blazor crud #blazor api #blazor with asp.net core #blazor in c#

Select List in Blazor || DropDown List in Blazor

#Blazor #Blazor tutorial #Blazor c# #Blazor dropdown #Blazor core api

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

#blazor #blazor tutorial #blazor curd #blazor in c# #blazor webassembly