Home Seekbar doesn't work after passing song
Reply: 0

Seekbar doesn't work after passing song

David Gomez
1#
David Gomez Published in 2018-02-10 23:53:00Z

I'm making an MP3 player for a website. It has autoplay, play next song after the current ends, shuffle songs, and the standard player functions. Well when it autostarts, when the page loads, the seeking bar works properly. When a song ends and plays the next it works too.

The problem comes when I pass the song manually. I want to solve 2 problems: in autostart, I have shuffle as default, but the way the code is done, it always plays the first song put in the list, so I want to skip the first (or make it go to the first element after the list is shuffled).

The other problem is the forward and rewind buttons. When I press them, the seeking bar maintains the previous progress and freezes.

What it should do: reset the bar progress, and follow the new song progress.

Observation: when I pause the song, only the song pauses (okay...) but when I play it again, the seekbar fixes its position, and works properly.

The forward button has as orders to pause the current song, and pass to the next (if the player is on, play the next song. If its off, don't play it).

So what I tried is put in the orders: stop, next song, play the song, pause the song, and play again (trying to emulate using the play/pause button). I tried making the order synchronous, to play one after other, but I can't make it work.

jQuery(document).ready(function() {

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

    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(player/data/' + cover+')');;

        song = new Audio('player/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');

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

            song.addEventListener('loadedmetadata', function() {
                playAudio();

            });
        },false);

    }
    function stopAudio() {
        song.pause();

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


    //Next song after finish


    //shuffle songs
    var list = document.getElementById("something"),
button = document.getElementById("shuffle");
function shuffle(items)
{
    var cached = items.slice(0), temp, i = cached.length, rand;
    while(--i)
    {
        rand = Math.floor(i * Math.random());
        temp = cached[rand];
        cached[rand] = cached[i];
        cached[i] = temp;
    }
    return cached;
}
function shuffleNodes()
{
    var nodes = list.children, i = 0;
    nodes = Array.prototype.slice.call(nodes);
    nodes = shuffle(nodes);
    while(i < nodes.length)
    {
        list.appendChild(nodes[i]);
        ++i;
    }


        $('.order').addClass('hidden');
        $('.shuffle').addClass('visible');

}

    //ORDER LIST

   var orderbutton = document.getElementById("order");

    function sortList() {
  var list, i, switching, b, shouldSwitch;
  list = document.getElementById("something");
  switching = true;
  /*Make a loop that will continue until
  no switching has been done:*/
  while (switching) {
    //start by saying: no switching is done:
    switching = false;
    b = list.getElementsByTagName("LI");
    //Loop through all list-items:
    for (i = 0; i < (b.length - 1); i++) {
      //start by saying there should be no switching:
      shouldSwitch = false;
      /*check if the next item should
      switch place with the current item:*/
      if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
        /*if next item is alphabetically
        lower than current item, mark as a switch
        and break the loop:*/
        shouldSwitch= true;
        break;
      }
    }
    if (shouldSwitch) {
      /*If a switch has been marked, make the switch
      and mark the switch as done:*/
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
    }
  }
        $('.order').removeClass('hidden');
        $('.shuffle').removeClass('visible');
}




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

        playAudio();

        playing=1;
    });




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

        stopAudio();

        playing=0;
    });

    // forward click
    $('.fwd').click(function (e) {
        e.preventDefault();
        var next = $('.playlist li.active').next();
        if (next.length == 0) {
            next = $('.playlist li:first-child');
        }



        if (playing == 0){
            stopAudio();
            initAudio(next);
            playAudio();
            stopAudio();
            }

        else{
            stopAudio();
            initAudio(next);
            stopAudio();
            playAudio();
            stopAudio();
            playAudio();
            }





    });

    // rewind click
    $('.rew').click(function (e) {
        e.preventDefault();
        var prev = $('.playlist li.active').prev();
        if (prev.length == 0) {
            prev = $('.playlist li:last-child');
        }

        if (playing == 0){
        stopAudio();
        initAudio(prev);
            }

        else{
        stopAudio();
        initAudio(prev);
        stopAudio();
        playAudio();
            }
    });

    // show playlist
    $('.pl').click(function (e) {
        e.preventDefault();
        $('.pl').toggleClass("nocolor");
        $('.playlist').toggleClass("hidden");

    });

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

        shuffleNodes();
    });




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

        sortList();
    });

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

        stopAudio();

        if (playing == 0){
        initAudio($(this));
            }

        else{
        initAudio($(this));
        playAudio();
            }
    });

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

    // set volume
    song.volume = 0.6;

    // initialize the volume slider
    volume.slider({
        range: 'min',
        min: 1,
        max: 100,
        value: 60,
        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) {}
    });


    //autoplay
    window.onload = function(e) {
        playAudio();

        playing=1;
        /*
        //autoshuffle
        shuffleNodes();
        //prevent playing always the same song at start

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

        if (playing == 0){
        stopAudio();
        initAudio(next);
            }

        if (playing == 1){
        stopAudio();
        initAudio(next);
        playAudio();
            }
          */
    };

});
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.326279 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO