You are not logged in.

#1 2018-05-24 18:40:54

Rasi
Member
From: Germany
Registered: 2007-08-14
Posts: 1,914
Website

[SOLVED] [JS] HTML5 audio control element skips songs

EDIT: commenting the line

<li class="current-song">

from index.html fixed this one...

I have created a little page, that can play a bunch of sound files.
In one part of the page there is a list with all the files and clicking them plays them from there,
automatically advancing to the next one. While doing so it should hightlight the currently playing song.

Or at least thats the theory, because for some reasin there is a song "0" inserted at the beginning, which messes
things up.

I haven't been able to find the cause of this issue.

My code for the html5 controls looks like this:

function audioPlayer(){
    var currentSong = 0;
    $("#audioPlayer")[0].src = $("#playlist li a")[0];
    $("#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();
    });
}

And this is what happens:

Demo Page

Any idea how to fix this?

Last edited by Rasi (2018-05-24 18:53:33)


He hoped and prayed that there wasn't an afterlife. Then he realized there was a contradiction involved here and merely hoped that there wasn't an afterlife.

Douglas Adams

Offline

Board footer

Powered by FluxBB