Removed unnecessary semicolons, improved changeSong function

audioPlayer.js

@@ -6,9 +6,9 @@ function appendMusicList(el, title, time)
 	const div = document.createElement("div")
 
 	tr.setAttribute("id", "queue-item")
-	tdtitle.setAttribute("class", "title")
 	tdtime.setAttribute("width", "50")
 	tdtime.innerHTML = time
+	div.setAttribute("class", "ellipsis")
 	div.setAttribute("colspan", "2")
 	div.innerHTML = title
 
@@ -20,15 +20,22 @@ function appendMusicList(el, title, time)
 	return tr
 }
 
+// https://github.com/semibran/wrap-around/blob/master/index.js
+function wrap(idx, len)
+{
+	return idx >= 0 ? idx % len : (idx % len + len) % len
+}
+
 function audioPlayer()
 {
-	const aPlay = document.getElementById("audioPlayer");
+	const aPlay = document.getElementById("audioPlayer")
-	const aList = document.getElementById("audioPlaylist");
+	const aList = document.getElementById("audioPlaylist")
-	const aTrack = document.getElementById("audioTrack");
+	const aTrack = document.getElementById("audioTrack")
-	const aArtist = document.getElementById("audioArtist");
+	const aArtist = document.getElementById("audioArtist")
 	const aCoverArt = document.getElementById("audioCoverArt")
 
-	var currentSong = null;
+	var currentSong = null
+	var aListLinks = []
 
 	function changeSong(idx, doplay=true)
 	{
@@ -37,12 +44,11 @@ function audioPlayer()
 			aPlay.play()
 			return
 		}
-		const aListLinks = aList.getElementsByTagName("tr");
 		if (currentSong !== null)
 		{
 			aListLinks[currentSong].classList.remove("current-song");
 		}
-		currentSong = idx % aListLinks.length
+		currentSong = wrap(idx, aListLinks.length)
 		aListLinks[currentSong].classList.add("current-song");
 
 		const aSelected = aListLinks[currentSong].getElementsByTagName("div")[0]
@@ -58,10 +64,11 @@ function audioPlayer()
 
 	musicList.forEach((value, index, array) => {
 		const el = appendMusicList(aList, value[1], value[3])
+		aListLinks.push(el)
 		el.addEventListener("click", () => {
 			// el.preventDefault();
 			changeSong(index)
-		});
+		})
 	})
 
 	aPlay.addEventListener("ended", function(){

styles.css

@@ -52,6 +52,7 @@ article{
 table {
 	border-collapse: collapse;
 	width: 100%;
+	table-layout: fixed;
 }
 
 td {
@@ -60,6 +61,12 @@ td {
 	border: 0px;
 }
 
+.ellipsis {
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
 .current-song * {
 	background-color: white;
 	color: black;