In this article I will explain with an example, how to use HTML5 Audio Player in ASP.Net Core MVC.
Audio Location
The Audio file is stored inside the Files Folder (Directory) of wwwroot Folder(Directory).
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.
Controller
The Controller consists of the following Action method.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
}
View
The View 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.
@{
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
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads