Simple Music player for a single (7 track) album (JavaScript Error)

Question

So this is my first post requesting for some help. I have dove in the deep end while building my first website by adding a music player to it. I've taken code found online and done my best to tie it into my own. So far most of it is working. The play pause works, previous and back also works.

I think my problem lies within songIndex? When I 'next' after track2 it only goes back to track1. When I try and 'previous' the code shows 'src"undefined"'and no song will play. Not sure if they are related.

Here is the code I belive to be relivant. Any and all help is appreciated. I am only starting off learning Javascript.

songIndex = 0;
songs = ['/music/track1.mp3',   '/music/track2.mp3',     '/music/track3.mp3',   '/music/track4.mp3',   '/music/track5.mp3',   '/music/track6.mp3',   '/music/track7.mp3'];
thumbnails = ['/images/J&G Logo.png', '/images/J&G Logo.png', '/images/J&G Logo.png', '/images/J&G Logo.png', '/images/J&G Logo.png', '/images/J&G Logo.png', '/images/J&G Logo.png', ];
songArtists = ['Jelly & The GOAT', 'Jelly & The GOAT', 'Jelly & The GOAT', 'Jelly & The GOAT', 'Jelly & The GOAT', 'Jelly & The GOAT', 'Jelly & The GOAT',];
songTitles = ["Track1", "Track2", "Track3", "Track4", "Track5", "Track6", "Track7"];

I will skip some lines of code as I don't think they are bugged.

song.addEventListener('ended', function(){
    nextSong();
});

function nextSong() {
    songIndex++;
    if (songIndex > 1)  {
        songIndex = 0;
    };
    song.src = songs[songIndex];
    thumbnail.src = thumbnails[songIndex];
    background.src = thumbnails[songIndex];

    songArtist.innerHTML = songArtists[songIndex];
    songTitle.innerHTML = songTitles[songIndex];

    playing = true;
    playPause();
}

function previousSong() {
    songIndex--;
    if (songIndex < 0)  {
        songIndex = 1;
    };
    song.src = song[songIndex];
    thumbnail.src = thumbnails[songIndex];
    background.src = thumbnails[songIndex];

    songArtist.innerHTML = songArtists[songIndex];
    songTitle.innerHTML = songTitles[songIndex];

    playing = true;
    playPause();
}

Once again, thanks for any help. One thing I noticed (with the two tracks that are working) if I skip to the next song whilst its playing, the song doesn't auto play and the pause button is still showing (requiring a double click)

Hello. You have a pretty good detailed post here, however, could you show us the specific javascript error? thanks — Nibb

duncan duncan · Accepted Answer · 2020-05-04T14:49:38

Welcome. I think the problem lies with these 2 bits of code:

if (songIndex > 1)  {
    songIndex = 0;
};

and

if (songIndex < 0)  {
    songIndex = 1;
};

So, if you've got say 7 songs, and clicking 'Next' you want to go from song 0 to song 1 to song 2 etc. What's actually happening just now is, it'll take you from song 0 to song 1... but then back to song 0 the next time. So you'll never progress past the first 2 songs (i.e. just the problem you described).

What you want to do on that first one, is just to go back to zero when you reach the last song. So try:

if (songIndex === songs.length)  {
    songIndex = 0;
}

Similarly when clicking on the Previous button, when you get back to the first song, then the next time you click Previous you want to jump to the last one again. Try this:

if (songIndex < 0)  {
    songIndex = songs.length - 1;
}

In this case, songs.length will be 7, but the last element is actually songs[6], so you subtract one from the length.

PS: you've got an error here:

song.src = song[songIndex];

This should be:

song.src = songs[songIndex];

Simple Music player for a single (7 track) album (JavaScript Error)

1 Answers