<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Music Player</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>My Music Player</h1>
<audio controls id="audioPlayer">
Your browser does not support the audio element.
</audio>
<ul id="playlist">
<!-- Add your own file paths below -->
<li><button onclick="playTrack('path/to/song1.mp3')">Song 1 (MP3)</button></li>
<li><button onclick="playTrack('path/to/song2.m4a')">Song 2 (M4A)</button></li>
<!-- Add more songs as needed -->
</ul>
</div>
<script src="function playTrack(trackPath) {
var audioPlayer = document.getElementById('audioPlayer');
audioPlayer.src = trackPath;
audioPlayer.play();
}"
></script>
</body>
</html>