<style>
	.track {
		cursor: pointer; /* "pointer" gir en musepeker som sier at brukeren kan trykke, litt som en link */
	}
</style>

<!-- Spilleliste -->
<span class="track" data-track-id="track-1">Fet låt</span><br>
<span class="track" data-track-id="track-2">Heftig låt</span><br>

<!-- Play/pause-knapp -->
<button id="playButton">Spill av</button>

<!-- Lydobjekter -->
<audio data-track-id="track-1">
	<source src="fet_låt.mp3" type="audio/mp3">
</audio>
<audio data-track-id="track-2">
	<source src="heftig_låt.mp3" type="audio/mp3">
</audio>

<script>
	var currentTrack = undefined; // Placeholder for sangen som spilles av i øyeblikket
	
	var button = document.getElementById("playButton"); // Play/Pause-knapp
	var tracks = document.querySelectorAll(".track[data-track-id]"); // Alle objekter med klassen "track" og attributten "data-track-id"
	
	for(var i = 0; i < tracks.length; i++) { // For hver låt i spillelisten (hver <span> i praksis)
		tracks[i].addEventListener("click", function() { // Eventlistener for museklikk
			// Hent <audio>-elementet med samme data-track-id som elementet i spillelisten
			var audio = document.querySelector("audio[data-track-id='" + this.getAttribute("data-track-id") + "']");
			
			if(audio !== undefined) { // Sjekk at vi fant et samsvarende <audio>-element
				if(currentTrack !== undefined) { // Spiller vi av en låt fra før?
					currentTrack.pause(); // Stopp låten som spilles av nå
				}
				
				currentTrack = audio; // Endre valgt låt
				currentTrack.currentTime = 0; // Reset trackbar til 0 (start låten forfra)
				currentTrack.play(); // Spill av
				
				button.innerHTML = "Pause"; // Oppdater play/pause-knapp
			}
		});
	}
	
	// Funksjon for å starte og stoppe låter med play/pause-knapp
	button.addEventListener("click", function() { // Lytt til museklikk
		if(currentTrack === undefined) {
			return; // Ingen låt er valgt, ikke gjør noe
		}
		
		if(currentTrack.paused) { // Sang er på pause
			this.innerHTML = "Pause"; // Endre tekst på knapp
			currentTrack.play(); // Gjenoppta avspilling
		} else {
			this.innerHTML = "Spill av"; // Endre tekst på knapp
			currentTrack.pause(); // Pause låt
		}
	});
</script>