1
Hi, I have a script that plays the songs automatically using the tag <audio> of html5, the problem is that I want to pull all the songs from inside the folder I put the songs into without having to add manually, someone would have a simple example of how to do this?
Follow the print of what you have already done:
My file .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();
});
}
My html file:
<!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>`