0

Seguinte galera tenho um script que funciona de boa, só que com algumas limitações, os botões play, pause, next e o slider da posição da música funcionam normalmente, mas não automaticamente, ao acabar de tocar uma música ele não pula pra próxima, como resolver isto? e a música também não inicia automaticamente

Aqui o DEMO onde baixei o script:

https://www.script-tutorials.com/demos/363/

Abaixo o script

jQuery(document).ready(function() {

// inner variables
var song;
var tracker = $('.tracker');
var volume = $('.volume');

function initAudio(elem) {
    var url = elem.attr('audiourl');
    var title = elem.text();
    var cover = elem.attr('cover');
    var artist = elem.attr('artist');

    $('.player .title').text(title);
    $('.player .artist').text(artist);
    $('.player .cover').css('background-image','url(data/' + cover+')');;

    song = new Audio('data/' + url);

    // timeupdate event listener
    song.addEventListener('timeupdate',function (){
        var curtime = parseInt(song.currentTime, 10);
        tracker.slider('value', curtime);
    });

    $('.playlist li').removeClass('active');
    elem.addClass('active');
}
function playAudio() {
    song.play();

    tracker.slider("option", "max", song.duration);

    $('.play').addClass('hidden');
    $('.pause').addClass('visible');
}
function stopAudio() {
    song.pause();

    $('.play').removeClass('hidden');
    $('.pause').removeClass('visible');
}

// play click
$('.play').click(function (e) {
    e.preventDefault();

    playAudio();
});

// pause click
$('.pause').click(function (e) {
    e.preventDefault();

    stopAudio();
});

// forward click
$('.fwd').click(function (e) {
    e.preventDefault();

    stopAudio();

    var next = $('.playlist li.active').next();
    if (next.length == 0) {
        next = $('.playlist li:first-child');
    }
    initAudio(next);
});

// rewind click
$('.rew').click(function (e) {
    e.preventDefault();

    stopAudio();

    var prev = $('.playlist li.active').prev();
    if (prev.length == 0) {
        prev = $('.playlist li:last-child');
    }
    initAudio(prev);
});

// show playlist
$('.pl').click(function (e) {
    e.preventDefault();

    $('.playlist').fadeIn(300);
});

// playlist elements - click
$('.playlist li').click(function () {
    stopAudio();
    initAudio($(this));
});

// initialization - first element in playlist
initAudio($('.playlist li:first-child'));

// set volume
song.volume = 0.8;

// initialize the volume slider
volume.slider({
    range: 'min',
    min: 1,
    max: 100,
    value: 80,
    start: function(event,ui) {},
    slide: function(event, ui) {
        song.volume = ui.value / 100;
    },
    stop: function(event,ui) {},
});

// empty tracker slider
tracker.slider({
    range: 'min',
    min: 0, max: 10,
    start: function(event,ui) {},
    slide: function(event, ui) {
        song.currentTime = ui.value;
    },
    stop: function(event,ui) {}
});
});

1 Resposta 1

1

As partes responsáveis para a música iniciar automaticamente e ao acabar de tocar uma música pular para próxima estão comentadas no código.

Outras partes foram adicionadas ao código para que o player funcione corretamente e podem ser observadas logo abaixo do comentário // adicionado

jQuery(document).ready(function() {

// inner variables
var song;
var tracker = $('.tracker');
var volume = $('.volume');

function initAudio(elem) {
    var url = elem.attr('audiourl');
    var title = elem.text();
    var cover = elem.attr('cover');
    var artist = elem.attr('artist');

    $('.player .title').text(title);
    $('.player .artist').text(artist);
    $('.player .cover').css('background-image','url(data/' + 
    cover+')');;

    song = new Audio('data/' + url);
    // inicio código reproduzir próximas musicas automaticamente
    song.addEventListener("ended", function(){
      stopAudio();

      var next = $(".playlist li.active").next();
      if (next.length == 0) {
          next = $(".playlist li:first-child");
      }
      initAudio(next);

      playAudio();

      song.addEventListener("loadedmetadata", function() {
        tracker.slider("option", "max", song.duration);
      });
    });
    // fim código reproduzir próximas musicas automaticamente

    // timeupdate event listener
    song.addEventListener('timeupdate',function (){
        var curtime = parseInt(song.currentTime, 10);
        tracker.slider('value', curtime);
    });

    $('.playlist li').removeClass('active');
    elem.addClass('active');
}
function playAudio() {
    song.play();

    $('.play').addClass('hidden');
    $('.pause').addClass('visible');
}
function stopAudio() {
    song.pause();

    $('.play').removeClass('hidden');
    $('.pause').removeClass('visible');
}

// play click
$('.play').click(function (e) {
    e.preventDefault();

    playAudio();
});

// pause click
$('.pause').click(function (e) {
    e.preventDefault();

    stopAudio();
});

// forward click
$('.fwd').click(function (e) {
    e.preventDefault();

    stopAudio();

    var next = $('.playlist li.active').next();
    if (next.length == 0) {
        next = $('.playlist li:first-child');
    }
    // adicionado
    $('.play').addClass('hidden');
    $('.pause').addClass('visible');

    initAudio(next);
    song.play(next);

    //Adicionei isso (Miguel)
    song.addEventListener("loadedmetadata", function() {
        tracker.slider("option", "max", song.duration);
      });

});

// rewind click
$('.rew').click(function (e) {
    e.preventDefault();

    stopAudio();

    var prev = $('.playlist li.active').prev();
    if (prev.length == 0) {
        prev = $('.playlist li:last-child');
    }
    // adicionado
    $('.play').addClass('hidden');
    $('.pause').addClass('visible');

    initAudio(prev);
    song.play(prev);

    //Adicionei isso (Miguel)
    song.addEventListener("loadedmetadata", function() {
        tracker.slider("option", "max", song.duration);
      });
});

// show playlist
$('.pl').click(function (e) {
    e.preventDefault();

    $('.playlist').fadeIn(300);   

});

// playlist elements - click
$('.playlist li').click(function () {

    stopAudio();
    initAudio($(this));
    song.play();
    // adicionado
    $('.play').addClass('hidden');
    $('.pause').addClass('visible');
});

// initialization - first element in playlist
initAudio($('.playlist li:first-child'));

// set volume
song.volume = 0.8;

// initialize the volume slider
volume.slider({
    range: 'min',
    min: 1,
    max: 100,
    value: 80,
    start: function(event,ui) {},
    slide: function(event, ui) {
        song.volume = ui.value / 100;
    },
    stop: function(event,ui) {},
});

// empty tracker slider
tracker.slider({
    range: 'min',
    min: 0, max: 10,
    start: function(event,ui) {},
    slide: function(event, ui) {
        song.currentTime = ui.value;
    },
    stop: function(event,ui) {}
});
// inicia o player automaticamente
playAudio();

//Adicionei isso(Miguel)
song.addEventListener("loadedmetadata", function() {
        tracker.slider("option", "max", song.duration);
      });
});
9
  • o Slider da posição do track não está sincronizado com o tempo da música, o slider chega ao fim antes da música terminar Commented 17/10/2017 às 11:11
  • notei que isso acontece quando clico em Avançar ou Voltar, ou na primeira música, mas se deixar o player passar para próxima música sozinho o slider fica sincronizado. Commented 17/10/2017 às 11:22
  • @MiguelSilva eu reparei isso, vou estudar mais :)
    – user60252
    Commented 17/10/2017 às 12:09
  • @MiguelSilva vc já corrigiu esse problema!! Beleza!!
    – user60252
    Commented 17/10/2017 às 12:21
  • já resolvi, modifiquei o código, aguardando aprovação de alguém aí do site Commented 17/10/2017 às 12:21

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 .