How To Play Audio In Blazor Application

Introduction

In this article, let’s understand how to play audio files in the Blazor Application, We will cover both Blazor Server and Blazor WASM applications. Before getting into the core concepts, let’s discuss what Blazor is. Blazor is an excellent framework in which we can use C# code to write both the Client and Server sides.

1. Introduction
2. Prerequisite 
3. Audio Playing Using Blazor Server Application
4. Audio Playing Using Blazor WASM Application
5. GitHub Repos
6. Conclusion

Prerequisite 

• HTML
• C#

Audio Playing Using Blazor Server Application

First, let’s create Blazor Server Application and play an audio file by following the steps below.

• Start Visual Studio (2022) and select Create a new project

• Select Blazor Server App as the Project Template

• Configure the project by providing the File Location and Namings

• Choose any one of the default components from Solution Explorer. For this article, Let’s take Index.razor

• Create a source folder where we will keep our audio source, Create a new Folder as AudioSource under wwwroot.
• Add your favorite music under this new folder

• Now in the Index.razor component, let’s import the audio source using HTML control <audio/> as below code

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello,Click Play Button To Listen Music !!!!!</h1>
<audio controls="controls">
    <source src="/audiosource/blazor%20audio%20file%20to%20pay.mp3" />
</audio>

• Now Run the application, and we can see Audio control on the Web page

Audio Playing Using Blazor WASM Application

Secondly, Let’s create a Blazor WASM application and discuss how to play audio files by following the below steps,

• Start Visual Studio (2022) and Click Create a new project

• Select Blazor WebAssembly App as the project template

• Configure the project by providing the Location and File naming

• As we did for the Server, here also let’s choose Index.razor as a component from the solution explorer

• Create a new folder as AudioSource in wwwroot and add the source audio

• In the Index.razor component add the below code

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, Listen to our audio by clicking Play button</h1>

<audio controls="controls">
    <source src="/audiosource/blazor%20audio%20file%20to%20pay.mp3" type="audio/mp3" />
</audio>

• Now run the application and play the audio file

GitHub Repos

The above two example projects are available on GitHub, please follow the below links,

• Audio Playing using Blazor Server Application 
• Audio Playing using Blazor WASM

Conclusion

In this simple Blazor application, we discussed how to play add and play audio files. Hope you all found this article much informative and simple. We will learn more concepts in upcoming articles. Please share your feedback in the comment section.