0

$("#playlist").load("https://cdn.rawgit.com/lucaskfp/-south-toon-player/master/teste.txt");


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


// loads the audio player
audioPlayer();
#playlist {
  list-style: none;
}

#playlist li a {
  color: black;
  text-decoration: none;
}

#playlist .current-song a {
  color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<audio src="" controls id="audioPlayer">
        Sorry, your browser doesn't support html5!
    </audio>

<ul id="playlist">

</ul>

Obs.: preciso por mais de uma playlist sem atualizar a pagina, abaixo é o codigo que funciona normal.

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

        // loads the audio player
        audioPlayer();
#playlist{
            list-style: none;
        }
        #playlist li a{
            color:black;
            text-decoration: none;
        }
        #playlist .current-song a{
            color:blue;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<audio src="" controls id="audioPlayer">
        Sorry, your browser doesn't support html5!
    </audio>
    <ul id="playlist">
         <li class="current-song"><a href="https://ia802705.us.archive.org/22/items/wbt2009-07-24.early_set.flac16/wbt2009-07-24_earlyset_d1t01.mp3">Exit the Premises</a></li>
        <li><a href="https://ia600202.us.archive.org/18/items/ml2005-12-30.sbd.flac16/ml2005-12-30d1t01.mp3">Severe Tire Damage</a></li>
        <li><a href="https://ia801409.us.archive.org/16/items/thc2008-08-15.flac16/thc20080815d1t01.mp3">Broken Reality</a></li>
    </ul>

1
  • o que eu queria era alimentar a #playlist com arquivos txt 30/01/2018 às 20:38

1 Resposta 1

0

A função .load irá servir apenas para baixar o conteúdo e substituir o conteúdo antigo.

Outro ponto no seu código é que você está dando play antes do conteúdo da lista ser baixado. Como a função .load é assíncrona, ela vai executar em segundo plano e todo o resto do código vai ser executado logo depois. Para corrigir isso você deve criar um callback na função para dar o play. Ex:

$("element").load("url", function() {
    /* Play no player */
});

Como você deseja adicionar mais músicas, o ideal é utilizar funções/api como por exemplo Ajax, XMLHttpRequest ou fetch. Todos eles são iguais, então vai depender da qual você tem mais afinidade. Abaixo segue um exemplo com fetch

/* Áudio atual */
let currentSong = 0;

/** 
 * Armazena o player em uma variável. 
 * Isso o ajudará com a manutenção, legibilidade etc.
 */
const player = $("#audioPlayer")[0];

/**
 * Função responsável por carregar as playlist
 */
function loadPlaylist(url) {
  if (url) {
    /* Inicia a requisição e captura o resultado no formato Response. */
    fetch(url).then(response => {

      /* Captura a resposta no formato de texto */
      response.text().then(text => {

        /* Acrescenta o conteúdo na div "#playlist" */
        $(text).appendTo("#playlist");

        /* Verifica se o conteúdo já foi carregado, caso tenha sido ignora o play */
        if ($("#playlist li").length <= 0) {
          player.play();
        } else {
          player.src = $("#playlist li:eq(0) a").attr("href");
          player.play();
        }
      });
    });
  }
}

/**
 * Isso vai ajudar a não ficar adicionando esse código na função "loadPlaylist"
 * Quando ocorrer algum evento de click dentro da div "#playlist", o código
 * vai buscar e verificar se algum deles possui uma função para ser executada.
 */
$("#playlist").on("click", "li a", function(e) {
  e.preventDefault();
  player.src = this;
  player.play();
  $("#playlist li").removeClass("current-song");
  currentSong = $(this).parent().index();
  $(this).parent().addClass("current-song");
});

/**
 * Altera para a próxima música
 * Ps.: Não alterei o código
 */
player.addEventListener("ended", function() {
  currentSong++;
  if (currentSong == $("#playlist li a").length)
    currentSong = 0;

  $("#playlist li").removeClass("current-song");
  $("#playlist li:eq(" + currentSong + ")").addClass("current-song");
  player.src = $("#playlist li a")[currentSong].href;
  player.play();
});

/* Chama a função com a URL */
loadPlaylist("https://cdn.rawgit.com/lucaskfp/-south-toon-player/master/teste.txt");
#playlist {
  list-style: none;
}

#playlist li a {
  color: black;
  text-decoration: none;
}

#playlist .current-song a {
  color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<audio src="" controls id="audioPlayer">
            Sorry, your browser doesn't support html5!
        </audio>

<ul id="playlist"></ul>

<button type="button" onClick="loadPlaylist(prompt('Informe a url'))">Carregar playlist</button>

4
  • Muito obrigado pela explicação, na verdade o objetivo era substituir mesmo o conteúdo da playlist mas sem alterar o audio que esta tocando atualmente. Tipo seria um menu com PLaylist 1, PLaylist 2, PLaylist 3 que o usuário poderia alternar sem influenciar no player, até essa parte de alternar as playlist tava dando certo porem o script de reproduzir no player que parava de funcionar. 31/01/2018 às 0:45
  • @LucasKennedy você quer ter várias playlists, porém, funcionando no mesmo player? 31/01/2018 às 0:52
  • Sim, digamos que eu tenha outra <ul id="listas"> e nas <li><a> eu terias minhas lista1.txt , lista2.txt , lista3.txt de inicio ela iniciaria na lista 1 e então o usuário poderia alternar a visualização entre as listas sem reiniciar ou dar stop na musica que estaria tocando atualmente 31/01/2018 às 1:01
  • Opa irmão consegui o que eu queria, fiz as alterações, muito obrigado mesmo pela ajuda. 31/01/2018 às 1:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .