я хочу использовать вместо недавно зарегистрированных пользователей в index.ejs недавно загруженные .mp3 файлы из profile.ejs пользователей. index.ejs я уже поменял, добавив 	<section class="musicians">
  <div class="container">
    <h2>Recent Uploads</h2>
    <div class="row">
      <% tracks.forEach(function(track) { %> 
осталось изменить app.get("/", (req, res) => чтобы треки рендерились в index.ejs.
Вот код:

index.ejs:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	<meta content="ie=edge" http-equiv="X-UA-Compatible">
	<script src="/jquery/dist/jquery.min.js"></script>
    <script src="/jquery-ui/dist/jquery-ui.min.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
	<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link href="/css/main.css" rel="stylesheet">
	<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
	<link href="/jquery-ui/themes/base/all.css" rel="stylesheet">
	
	<title>Home</title>
</head>
<body>
	<header class="header">
		<nav class="navbar navbar-expand-lg navbar-light bg-light">
			<div class="container">
				<a class="navbar-brand" href="/">
					<img src="/img/logo.png" alt="My Musician Site">
				</a>
				<button aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarNav" data-toggle="collapse" type="button">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarNav">
					<ul class="navbar-nav ml-auto">
  <li class="nav-item">
    <a class="nav-link" href="#find-musicians">Find Musicians</a>
  </li>
  <% if (!userLoggedIn) { %>
    <li class="nav-item">
      <a class="nav-link" href="/register"><i class="fa fa-user-plus" aria-hidden="true"></i> Register</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/login"><i class="fa fa-sign-in" aria-hidden="true"></i> Login</a>
    </li>
  <% } else { %>
    <li class="nav-item">
      <a class="nav-link"><i class="fa fa-user" aria-hidden="true"></i> Hello, <%= username %></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/logout"><i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>
    </li>
  <% } %>
</ul>
				</div>
			</div>
		</nav>
		<div class="hero">
			<div class="container">
				<h1 class="hero-title">Find the Perfect Musician for Your Band or Project</h1>
				<p class="hero-subtitle">Join our community today and connect with talented musicians from around the world.</p>
				<a class="btn btn-primary btn-lg" href="/register">Register Now</a>
			</div>
		</div>
	</header>
	<main class="main">
		<section class="section section-search" id="find-musicians">
			<div class="container">
				<h2 class="section-title"><i class="fa fa-search" aria-hidden="true"></i> Find Musicians</h2>
				<form class="form-search" action="/search" method="get">
					<div class="form-group">
						<label for="role"><i class="fa fa-users" aria-hidden="true"></i> Role:</label> 
						<select class="form-control" id="role" name="role">
							<option value="">All</option>
							<option value="Band">Band</option>
							<option value="Artist">Artist</option>
						</select>
					</div>
					
					<div class="form-group">
  <label for="genre">Search by genre:</label>
  <select class="form-control" id="genre" name="genre">
    <option value="">All</option>
  </select>
</div>
<div class="form-group">
						<label for="city"><i class="fa fa-map-marker" aria-hidden="true"></i> Location:</label> 
						<input id="city" name="city" type="text" class="form-control" autocomplete="on" value="<%= city %>" data-value="">
					</div>
					<button class="btn btn-primary" type="submit"><i class="fa fa-search" aria-hidden="true"></i> Search</button>
				</form>
			</div>
		</section>
		<!-- последние зарегистрированные пользователи -->
		<section class="musicians">
  <div class="container">
    <h2>Recent Uploads</h2>
    <div class="row">
      <% tracks.forEach(function(track) { %>
        <div class="col-lg-4 col-md-6 col-sm-12">
          <div class="track-card">
            <div class="track-info">
              <h3><%= track.title %></h3>
              <p><strong>Album:</strong> <%= track.album_title || "No Album" %></p>
            </div>
            <div class="track-link">
              <audio src="/tracks/<%= track.filename %>"></audio>
              <button>Play</button>
            </div>
          </div>
        </div>
      <% }); %>
    </div>
  </div>
</section>
		<!-- end -->
	</main>
	<footer class="footer">
		<div class="container">
			<p class="text-center mb-0">My Musician Site &copy; 2023</p>
		</div>
	</footer>
	
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
	
	
    
    
	<script>
	$("#city").autocomplete({
    source: '/autocomplete/cities',
    minLength: 1,
  });

  const queryInput = document.querySelector("#query");
  const roleInput = document.querySelector("#role");
  const cityInput = document.querySelector("#city");

  queryInput.value = "<%= query %>";
  roleInput.value = "<%= role %>";
  cityInput.value = cityInput.getAttribute('data-value');

  const query = queryInput.value;
  const role = roleInput.value;
  const city = cityInput.value;
	</script>
	<script>
const genres = ["Rock", "Pop", "Jazz", "Blues", "Country"];
const genreSelect = document.querySelector("#genre");
genres.forEach((genre) => {
  const option = document.createElement("option");
  option.value = genre;
  option.text = genre;
  genreSelect.appendChild(option);
});
</script>
  </body>
</html>

profile.ejs:
<!DOCTYPE html>
<html>
  <head>
    <title><%= musician.name %> - Musician Profile</title>
	<link rel="stylesheet" href="/jquery-ui/themes/base/all.css" />
	
	<script src="/jquery/dist/jquery.min.js"></script>
<script src="/jquery-ui/dist/jquery-ui.min.js"></script>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 
  <!-- Popper.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <!-- Bootstrap JS -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  
  <!-- Custom CSS -->
  <link rel="stylesheet" href="/css/main.css" />
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">


  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-3">
          <img src="/img/<%= musician.thumbnail || 'avatar.jpg' %>" alt="<%= musician.name %>" width="200" height="200">
        </div>
        <div class="col-md-8">
          <h1><%= musician.name %></h1>
          <p><strong>Role:</strong> <%= musician.role %></p>
          <p><strong>Genre:</strong> <%= musician.genre %></p>
          <% if (musician.role === 'Artist' && musician.instrument) { %>
            <p><strong>Instrument:</strong> <%= musician.instrument %></p>
          <% } %>
          <p><strong>Location:</strong> <%= musician.city %></p>
          <p><strong>Bio:</strong> <%= musician.bio %></p>
		  <!-- audio player -->
		  <p><strong>Tracks:</strong>
		  <div class="audio-player">
    <div class="row">
      <% tracks.forEach((track, index) => { %>
	  
      <div class="col-md-4 mb-3">
        <div class="track">
          <img src="/img/<%= track.image_filename || 'default-track-image.png' %>" alt="<%= track.title %>" width="200" height="200">
          <div class="info">
            <h4><%= track.title %></h4>
            <p><%= track.album_title || "No Album" %></p>
            <div class="progress-bar">
              <div class="progress-bar-fill" style="width: 0;"></div>
            </div>
            <audio id="audio-<%= index %>" src="/tracks/<%= track.filename %>"></audio>
            <button class="play-button" data-audio-id="audio-<%= index %>">
              <i class="fa fa-play"></i>
            </button>
          </div>
        </div>
      </div>
      <% }); %>
    </div>
  </div>
		  <!-- end -->
          <% if (musician.soundcloud) { %>
            <div class="embed-responsive embed-responsive-16by9">
              <iframe class="embed-responsive-item" src="https://w.soundcloud.com/player/?url=<%= musician.soundcloud %>&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
            </div>
          <% } %>
          <% if (musician.soundcloud1) { %>
            <div class="embed-responsive embed-responsive-16by9">
              <iframe class="embed-responsive-item" src="https://w.soundcloud.com/player/?url=<%= musician.soundcloud1 %>&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
            </div>
          <% } %>
          <% if (userLoggedIn && username === musician.name) { %>
            <button type="button" class="btn btn-primary mt-3 mb-3" data-toggle="modal" data-target="#edit-profile-modal">Edit Profile</button>
            <div id="edit-profile-modal" class="modal fade">
              <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                  <div class="modal-header">
                    <h4 class="modal-title">Edit Profile</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                  </div>
                  <div class="modal-body">
                    <form action="/profile/<%= musician.id %>/edit" method="POST" enctype="multipart/form-data">
                      <div class="form-group">
                        <label for="name">Name:</label>
                        <input type="text" id="name" name="name" value="<%= musician.name %>" class="form-control">
                      </div>
                      <div class="form-group">
                        <label for="role">Role:</label>
                        <select id="role" name="role" class="form-control">
                          <option value="">Select a role</option>
                          <option value="Band" <%= musician.role === 'Band' ? 'selected' : '' %>>Band</option>
                          <option value="Artist" <%= musician.role === 'Artist' ? 'selected' : '' %>>Artist</option>
                        </select>
                      </div>
                      <div class="form-group">
                        <label for="genre">Genre:</label>
                        <select id="genre" name="genre" class="form-control">
                          <option value="">Select a genre</option>
                          <option value="Rock" <%= musician.genre === 'Rock' ? 'selected' : '' %>>Rock</option>
                         <option value="Pop" <%= musician.genre === 'Pop' ? 'selected' : '' %>>Pop</option>
                          <option value="Hip-hop" <%= musician.genre === 'Hip-hop' ? 'selected' : '' %>>Hip-hop</option>
                          <option value="Jazz" <%= musician.genre === 'Jazz' ? 'selected' : '' %>>Jazz</option>
                          <option value="Electronic" <%= musician.genre === 'Electronic' ? 'selected' : '' %>>Electronic</option>
                          <option value="Classical" <%= musician.genre === 'Classical' ? 'selected' : '' %>>Classical</option>
                        </select>
                      </div>
                      <% if (musician.role === 'Artist') { %>
                        <div class="form-group">
                          <label for="instrument">Instrument:</label>
                          <input type="text" id="instrument" name="instrument" value="<%= musician.instrument || '' %>" class="form-control">
                        </div>
                      <% } %>
                      <div class="form-group">
                        <label for="city">Location:</label>
                        <input id="city" name="city" type="text" autocomplete="on" value="<%= city %>" data-value="" class="form-control">
                      </div>
                      <div class="form-group">
                        <label for="bio">Bio:</label>
                        <textarea id="bio" name="bio" class="form-control"><%= musician.bio %></textarea>
                      </div>
                      <div class="form-group">
                        <label for="thumbnail">Thumbnail:</label>
                        <input type="file" id="thumbnail" name="thumbnail" accept="image/*" class="form-control-file">
                      </div>
                      <div class="form-group">
                        <label for="soundcloud">Soundcloud Track:</label>
                        <input type="text" id="soundcloud" name="soundcloud" value="<%= musician.soundcloud || '' %>" class="form-control">
                      </div>
                      <div class="form-group">
                        <label for="soundcloud1">Soundcloud Track 2:</label>
                        <input type="text" id="soundcloud1" name="soundcloud1" value="<%= musician.soundcloud1 || '' %>" class="form-control">
                      </div>
					  
                      <button type="submit" class="btn btn-primary">Save Changes</button>
                    </form>
					<h2>Upload a new track:</h2>
    <form id="upload-form" action="/profile/<%= musician.id %>/upload" method="POST" enctype="multipart/form-data">
        <div class="form-group">
            <label for="track">Track file:</label>
            <input type="file" id="track" name="track" accept="audio/*" class="form-control-file" required>
			<h4>only .mp3 allowed</h4>
        </div>
        <div class="form-group">
            <label for="title">Track title:</label>
            <input type="text" id="title" name="title" class="form-control" required>
        </div>
        <div class="form-group">
            <label for="albumTitle">Album title:</label>
            <input type="text" id="albumTitle" name="albumTitle" class="form-control">
        </div>
        <div class="form-group">
            <label for="image">Track image:</label>
            <input type="file" id="image" name="image" accept="image/*" class="form-control-file">
        </div>
        <button type="submit" class="btn btn-primary">Upload Track</button>
    </form>
                  </div>
                </div>
              </div>
            </div>
          <% } %>
        </div>
      </div>
    </div>
	<script>
    $(function() {
      $('.play-button').on('click', function() {
        var audioId = $(this).data('audio-id');
        var audio = document.getElementById(audioId);
        var isPaused = audio.paused;

        $('.play-button').removeClass('active');
        if (isPaused) {
          audio.play();
          $(this).addClass('active');
        } else {
          audio.pause();
        }
      });

      $('audio').on('timeupdate', function() {
        var audio = $(this)[0];
        var progress = audio.currentTime / audio.duration * 100;
        $(this).siblings('.progress-bar').find('.progress-bar-fill').css('width', progress + '%');
      });
    });
  </script>
  <script>
function submitForm(event) {
  event.preventDefault();
  const form = document.getElementById("upload-form");
  const formData = new FormData(form);
  
  fetch("/profile/:id/upload", {
    method: "POST",
    body: formData,
  })
    .then((response) => {
      if (response.ok) {
        // если запрос прошел успешно - обновляем страницу
        location.reload();
      } else {
        // если что-то пошло не так - выводим сообщение об ошибке
        alert("Error uploading track");
      }
    })
    .catch((error) => {
      console.error("Error:", error);
      alert("Error uploading track");
    });
}

// Заменяем элемент формы с кнопкой "submit" на обработчик события "submit"
document.getElementById("upload-form").addEventListener("submit", submitForm);
</script>
	
	 <script>
      
 const modal = document.getElementById("edit-profile-modal");
      const btn = document.getElementsByTagName("a")[0];
      const span = document.getElementsByClassName("close")[0];

      btn.onclick = function() {
        modal.style.display = "block";
      }

      span.onclick = function() {
        modal.style.display = "none";
      }

      window.onclick = function(event) {
        if (event.target == modal) {
          modal.style.display = "none";
        }
      }
	  
	  //скрыть плеер, если ссылка не внесена
	const song1Input = document.getElementById("soundcloud");
const song2Input = document.getElementById("soundcloud1");
const player1 = document.getElementsByTagName('iframe')[0];
const player2 = document.getElementsByTagName('iframe')[1];
let songs = {
  song: "",
  song1: ""
}

function hidePlayer(player) {
    player.src = "";
    player.style.display = "none";
}

function updateSongs() {
  songs.song = song1Input.value.trim();
  songs.song1 = song2Input.value.trim();
}

function updatePlayers() {
  if (songs.song !== "") {
    player1.src = `https://w.soundcloud.com/player/?url=${songs.song}&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true`;
    player1.style.display = "block";
  } else {
    hidePlayer(player1);
  }

  if (songs.song1 !== "") {
    player2.src = `https://w.soundcloud.com/player/?url=${songs.song1}&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true`;
    player2.style.display = "block";
  } else {
    hidePlayer(player2);
  }
}

song1Input.addEventListener("input", function() {
  updateSongs();
  updatePlayers();
});

song2Input.addEventListener("input", function() {
  updateSongs();
  updatePlayers();
});

updateSongs();
updatePlayers();
//Валидация ссылок с soundcloud
function updatePlayers() {
  if (isValidSoundcloudUrl(songs.song)) {
    player1.src = `https://w.soundcloud.com/player/?url=${songs.song}&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true`;
    player1.style.display = "block";
  } else {
    hidePlayer(player1);
  }

  if (isValidSoundcloudUrl(songs.song1)) {
    player2.src = `https://w.soundcloud.com/player/?url=${songs.song1}&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true`;
    player2.style.display = "block";
  } else {
    hidePlayer(player2);
  }
}

function isValidSoundcloudUrl(url) {
  const regex = /^https?:\/\/(soundcloud\.com|snd\.sc)\/(.*)$/;
  return regex.test(url);
}
    </script>
	<script>
	
	$("input[name='city']").autocomplete({
    source: '/autocomplete/cities',
    minLength: 1,
  });

  const queryInput = document.querySelector("#query");
  const roleInput = document.querySelector("#role");
  const cityInput = document.querySelector("#edit-profile-modal input[name='city']");

  queryInput.value = "<%= query %>";
  roleInput.value = "<%= role %>";
  cityInput.value = cityInput.getAttribute('data-value');

  const query = queryInput.value;
  const role = roleInput.value;
  const city = cityInput.value;
	</script>
	<style>
	.ui-autocomplete {
  z-index: 9999;
}
</style>
	
  </body>
</html>

css:
.audio-player {
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
  align-items: center;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  gap: 30px;
  
}

.audio-player .track {
  position: relative;
  margin: 10px 5px;
  max-width: 250px;
  text-align: center;
}

.audio-player .info {
  margin-top: 10px;
}

.audio-player .image-container {
  position: relative;
  overflow: hidden;
  width: 350px;
  height: 350px;
}

.audio-player img {
  display: block;
  margin: 0 auto;
  width: 200px;
  height: 200px;
  object-fit: cover; /* Добавлено свойство object-fit */
  transition: transform 0.3s ease-in-out;
}

.audio-player .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.audio-player .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  transition: transform 0.3s ease-in-out;
}

.audio-player .play-button i {
  color: #fff;
  font-size: 24px;
}

.audio-player .progress-bar {
  position: relative;
  width: 100%;
  height: 2px;
  background-color: #ccc;
}

.audio-player .progress-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #f50;
  transition: width 0.1s ease-in-out;
}

.audio-player li:hover img {
  transform: scale(1.1);
}

.audio-player .track:hover .overlay {
  opacity: 1;
}

.audio-player .track:hover .play-button {
  transform: translate(-50%, -50%) scale(1.2);
}

.audio-player .track:hover .progress-bar-fill {
  transition: width 0.5s ease-in-out;
}

@media (max-width: 768px) {
  .audio-player .track {
    margin: 10px 0;
    width: 100%;
  }
  
  .audio-player .image-container {
    width: 100%;
    height: auto;
  }
  
  .audio-player img {
    max-width: 100%;
    height: auto;
    transition: none;
  }
  
  .audio-player .overlay {
    background-color: rgba(0, 0, 0, 0.7);
  }
  
  .audio-player .play-button {
    transform: translate(-50%, -50%) scale(1.5);
  }
}