Playlist

anabon · Janeiro 9, 2019

Bom dia Caros,

Primeiro quero pedir desculpas caso este poste esteja no lugar errado, primeira vez postando linguagem web aqui.

Então ... preciso desenvolver um playlist onde o usuário escolha o gênero que deseja e este play percorra a pasta tocando as músicas em sequencia até o ultimo áudio da pasta ou até que o usuário interrompa esta execução. O que consegui até agora foi um play onde ele executa uma sequencia automática, porém as músicas executadas são todas setadas no HTML, queria uma maneira de fazer um "WHILE" ou algo parecido para que ele leia e execute até que termine.

Desde já agradeço imensamente que puder me ajudar!!!! Segue abaixo o que consegui até agora!!!

Estou usando HTML, JS e CSS ... Obs: este loop pode ser em js ou php

<!DOCTYPE html>
<html>
<head>
    <title></title>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/estilo.css">


</head>
<body>
    
<div class="example">
    <audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg">
        <source type="audio/mp3" src="Music/01.mp3">
        Sorry, your browser does not support HTML5 audio.
    </audio>
    <ul id="playlist">
        <li class="active"><a href="Music/02.mp3">Ravel Bolero</a></li>
        <li><a href="Music/03.mp3">Moonlight Sonata - Beethoven</a></li>
        <li><a href="Music/04.mp3">Canon in D Pachabel</a></li>
        <li><a href="Music/05.zip">patrikbkarl chamber symph</a></li>

    </ul>
 
    <script type="text/javascript">
        var audio;
var playlist;
var tracks;
var current;

init();
function init(){
    current = 0;
    audio = $('audio');
    playlist = $('#playlist');
    tracks = playlist.find('li a');
    len = tracks.length - 1;
    audio[0].volume = .10;
    audio[0].play();
    playlist.find('a').click(function(e){
        e.preventDefault();
        link = $(this);
        current = link.parent().index();
        run(link, audio[0]);
    });
    audio[0].addEventListener('ended',function(e){
        current++;
        if(current == len){
            current = 0;
            link = playlist.find('a')[0];
        }else{
            link = playlist.find('a')[current];    
        }
        run($(link),audio[0]);
    });
}
function run(link, player){
        player.src = link.attr('href');
        par = link.parent();
        par.addClass('active').siblings().removeClass('active');
        audio[0].load();
        audio[0].play();
}
    </script>
</body>
</body>

</body>
</html>

Editado Janeiro 9, 2019 por anabon
não havia terminado o post

Entrar

Playlist

Pergunta

anabon

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades