FediMusicPlayer/audioPlayer.js

function appendMusicList(el, title, time)
{
	const tr = document.createElement("tr")
	const tdtitle = document.createElement("td")
	const tdtime = document.createElement("td")
	const div = document.createElement("div")

	tr.setAttribute("id", "queue-item")
	tdtitle.setAttribute("class", "title")
	tdtime.setAttribute("width", "50")
	tdtime.innerHTML = time
	div.setAttribute("colspan", "2")
	div.innerHTML = title

	tdtitle.appendChild(div)
	tr.appendChild(tdtitle)
	tr.appendChild(tdtime)
	el.appendChild(tr)

	return tr
}

function audioPlayer()
{
	const aPlay = document.getElementById("audioPlayer");
	const aList = document.getElementById("audioPlaylist");
	const aTrack = document.getElementById("audioTrack");
	const aArtist = document.getElementById("audioArtist");
	const aCoverArt = document.getElementById("audioCoverArt")

	var currentSong = null;

	function changeSong(idx, doplay=true)
	{
		if (idx === currentSong)
		{
			aPlay.play()
			return
		}
		const aListLinks = aList.getElementsByTagName("tr");
		if (currentSong !== null)
		{
			aListLinks[currentSong].classList.remove("current-song");
		}
		currentSong = idx % aListLinks.length
		aListLinks[currentSong].classList.add("current-song");

		const aSelected = aListLinks[currentSong].getElementsByTagName("div")[0]
		aPlay.src = musicList[idx][0]
		aTrack.innerHTML = musicList[idx][1]
		aArtist.innerHTML = musicList[idx][2]
		aCoverArt.src = musicList[idx][4]
		if (doplay === true)
		{
			aPlay.play()
		}
	}

	musicList.forEach((value, index, array) => {
		const el = appendMusicList(aList, value[1], value[3])
		el.addEventListener("click", () => {
			// el.preventDefault();
			changeSong(index)
		});
	})

	aPlay.addEventListener("ended", function(){
		changeSong(currentSong + 1)
	})
	changeSong(0, false);
}