In this article I will explain with an example, how to use HTML5 Audio Player in ASP.Net Core Razor Pages.
Note: For beginners in ASP.Net Core 7 Razor Pages, please refer my article ASP.Net Core 7 Razor Pages: Hello World Tutorial with Sample Program example.
 
 
Audio Location
The Audio file is stored inside the Files Folder (Directory) of wwwroot Folder(Directory).
ASP.Net Core Razor Pages: HTML5 Audio Player
 
 
Allowing access to Static Files in ASP.Net Core
Inside the Program.cs class, you will need to allow Static files by calling the function UseStaticFiles. Unless this function is called, the Static files will not be accessible.
Note: For more details on how to use Static files, please refer my article Static Files (Images, CSS and JS files) in ASP.Net Core.
 
 
Razor PageModel (Code-Behind)
The PageModel consists of the following Handler method.
Handler method for handling GET operation
This Handler method is left empty as it is not required.
public class IndexModel : PageModel
{
    public void OnGet()
    {
    }
}
 
 
Razor Page (HTML)
The HTML of Razor Page consists of an HTML5 Audio Player element.
The HTML5 Audio Player element has the following properties:
controls – It displays the control buttons such as Play Pause, Volume, etc. in the HTML5 Audio Player.
type – It specifies the media type i.e. MIME type of the media.
src – It defines the URL or path of the audio file.
@page
@model Audio_Player_Core_Razor.Pages.IndexModel
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <audio controls="controls">
        <source src="Files/Kalimba.mp3" type="audio/mpeg" />
    </audio>
</body>
</html>
 
 
Screenshot
ASP.Net Core Razor Pages: HTML5 Audio Player
 
 
Browser Compatibility
The above code has been tested in the following browsers only in versions that support HTML5.
Microsoft Edge  FireFox  Chrome  Safari  Opera
* All browser logos displayed above are property of their respective owners.
 
 
Demo
View Demo
 
 
Downloads
Download Code