Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17670
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Adicionar músicas da pasta automaticamente no player

28-12-2016 17:22

Nesse post vou mostrar um script em jQuery e PHP que pega as músicas mp3 de uma determinada pasta e toca as música automaticamente em um player.

Para rodar esse script você vai precisar da biblioteca jQuery, um servidor que suporte arquivos .php além do arquivo musica.js que segue abaixo:


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(); }); }


Supondo que suas músicas estão no formato mp3 em uma pasta chamada musicas/, crie um arquivo chamado player.php e coloque o seguinte:


<audio src="" controls id="audioPlayer"> O seu navegador não suporte o HTML 5 </audio> <ul id="playlist"> <?php $arquivos = glob('musicas/{*.mp3}', GLOB_BRACE); foreach($arquivos AS $arquivo) { echo '<li class="current-song"> <a href="'.$arquivo.'">'.$arquivo.'</a> </li>'; } ?> </ul> <script src="jquery.js"></script> <script src="musica.js"></script>

2
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado