I have some questions about this HTML5 audio playlist code

http://codepen.io/watermelondriveway/pen/KzjzmJ

I've been looking for a really simple html5 audio playlist, and this is the closest one to what I'm looking for that I've found, but there are a two problems.

1.) How can I get the next song in the playlist to play automatically when the current one finishes? I don't know any JS

2.) How can I change that red color that shows up when you click the songs?

Thanks!

 

Hey https://codepen.io/markhillard/pen/Hjcwu I think its helpful to you. and which red color you talking about ? you talking about song list hover color which is currently grey color?

 

I attached a screenshot showing the red color.

I am trying to make the one you linked me work, but I can't figure out how to link my audio files with it. It looks like "mediaPath = '//archive.org/download/mythium/'," it's whats doing it, but I'm just using audio files in a directory, how you would normally write as "audio/file.wav". I can't seem to make that work. Thanks for your response

 

yes i got your color change you need to just overwrite your css from this jsfiddle https://jsfiddle.net/hku579vn/1/
please check it and for audio files you need to create this jquery function with all tracks and their lengths
here you can check it:
jQuery(function ($) {
var supportsAudio = !!document.createElement('audio').canPlayType;
if (supportsAudio) {
var index = 0,
playing = false,
mediaPath = '//archive.org/download/mythium/',
extension = '',
tracks = [{
"track": 1,
"name": "All This Is - Joe L.'s Studio",
"length": "02:46",
"file": "JLS_ATI"
}, {
"track": 2,
"name": "The Forsaken - Broadwing Studio (Final Mix)",
"length": "08:30",
"file": "BS_TF"
}, {
"track": 3,
"name": "All The King's Men - Broadwing Studio (Final Mix)",
"length": "05:01",
"file": "BS_ATKM"
}, {
"track": 4,
"name": "The Forsaken - Broadwing Studio (First Mix)",
"length": "08:32",
"file": "BSFM_TF"
}, {
"track": 5,
"name": "All The King's Men - Broadwing Studio (First Mix)",
"length": "05:05",
"file": "BSFM_ATKM"
}, {
"track": 6,
"name": "All This Is - Alternate Cuts",
"length": "02:49",
"file": "AC_ATI"
}, {
"track": 7,
"name": "All The King's Men (Take 1) - Alternate Cuts",
"length": "05:44",
"file": "AC_ATKMTake_1"
}],
trackCount = tracks.length,
npAction = $('#npAction'),
npTitle = $('#npTitle'),
audio = $('#audio1').bind('play', function () {
playing = true;
npAction.text('Now Playing...');
}).bind('pause', function () {
playing = false;
npAction.text('Paused...');
}).bind('ended', function () {
npAction.text('Paused...');
if ((index + 1) < trackCount) {
index++;
loadTrack(index);
audio.play();
} else {
audio.pause();
index = 0;
loadTrack(index);
}
}).get(0),
btnPrev = $('#btnPrev').click(function () {
if ((index - 1) > -1) {
index--;
loadTrack(index);
if (playing) {
audio.play();
}
} else {
audio.pause();
index = 0;
loadTrack(index);
}
}),
btnNext = $('#btnNext').click(function () {
if ((index + 1) < trackCount) {
index++;
loadTrack(index);
if (playing) {
audio.play();
}
} else {
audio.pause();
index = 0;
loadTrack(index);
}
}),
li = $('#plList li').click(function () {
var id = parseInt($(this).index());
if (id !== index) {
playTrack(id);
}
}),
loadTrack = function (id) {
$('.plSel').removeClass('plSel');
$('#plList li:eq(' + id + ')').addClass('plSel');
npTitle.text(tracks[id].name);
index = id;
audio.src = mediaPath + tracks[id].file + extension;
},
playTrack = function (id) {
loadTrack(id);
audio.play();
};
extension = audio.canPlayType('audio/mpeg') ? '.mp3' : audio.canPlayType('audio/ogg') ? '.ogg' : '';
loadTrack(index);
}
});