Olá, tenho um script
que toca as músicas automaticamente usando a tag <audio>
do html5
, o problema é que quero puxar todas as músicas de dentro da pasta que coloquei as músicas sem ter que adicionar manualmente, alguém teria um simples exemplo de como fazer isso?
Segue o print do que já tem feito:
Meu arquivo .js
:
audioPlayer();
function audioPlayer() {
var currentSong = 0;
$("#audioPlayer")[0].src = $("#playlist li a")[0];
$("#audioPlayer")[0].play();
$("#playlist li a").click(function(e) {
e.preventDefault();
$("#audioPlayer")[0].src = this;
$("#audioPlayer")[0].play();
$("#playlist li").removeClass("current-song");
currentSong = $(this).parent().index();
$(this).parent().addClass("current-song");
});
$("#audioPlayer")[0].addEventListener("ended", function () {
currentSong++;
if (currentSong == $("playlist li a").length) {
currentSong = 0;
}
$("#playlist li").removeClass("current-song");
$("#playlist li:eq("+currentSong+")").addClass("current-song");
$("#audioPlayer")[0].src = $("#playlist li a")[currentSong].href;
$("#audioPlayer")[0].play();
});
}
Meu arquivo html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Audio Player</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<audio src="" controls id="audioPlayer">
Sorry, your browser doesn't support HTML5!
</audio>
<ul id="playlist">
<li class="current-song">
<a href="assets/songs/Bruninho & Davi - E Essa Boca Aí- ft. Luan Santana.mp3">Bruninho & Davi - E Essa Boca Aí- ft. Luan Santana</a>
</li>
<li>
<a href="assets/songs/COLO - Jads Jadson part Victor Leo.mp3">COLO - Jads Jadson part Victor Leo</a>
</li>
<li>
<a href="assets/songs/Felipe e Ferrari part Bruno e Marrone Tira a mao de mim.mp3">Felipe e Ferrari part Bruno e Marrone Tira a mao de mim</a>
</li>
<li>
<a href="assets/songs/Fernando e Sorocaba - Paga pau.mp3">Fernando e Sorocaba - Paga pau</a>
</li>
<li>
<a href="assets/songs/Junior e Thyago - Os cachorros de goias.mp3">Junior e Thyago - Os cachorros de goias</a>
</li>
</ul>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>`