Afspeellijst voor audio automatisch afspelen

In het item Muziekspeler met speellijst wordt een audiospeler gepresenteerd met daarbij een (niet aanklikbare) playlist. Elk nummer wordt steeds herhaald tot je een ander nummer kiest.
Op deze pagina wordt een versie gepresenteerd die meer mogelijkheden heeft. Zo is het mogelijk om, nadat je een nummer hebt gekozen, de rest van de playlist achter elkaar ('sequentieel') af te laten spelen. Hoe je dat aanpakt lees je op deze pagina.

Hieronder zie je de speler en de playlist. Als je op de knop '> (Afspelen)' klikt, kiest de speler een willekeurig nummer uit de lijst en speelt dat af. Als je een zelf een nummer uit de lijst kiest, wordt dat afgespeeld.
Als het nummer is afgelopen, wordt het volgende nummer van de playlist automatisch afgespeeld. Als het laatste nummer van de lijst is afgespeeld, gaat de speler verder met het eerste nummer van de lijst.
Dit gaat door totdat de speler wordt gestopt door op de '▦ (Stop)'-knop te drukken of als de pagina wordt verlaten.

Als je op de '| | (Pauze)' drukt wordt het afspelen onderbroken. Als je er weer op drukt wordt het afspelen hervat waar de speler was gebleven. Als je na een klik op 'Pauze' op 'Afspelen' klikt, begint het nummer overnieuw.

De playlist bevat onderstaande nummers:

• Er worden twee items besproken:
  1. De werking van het script.
  2. Toepassen in je eigen site.
   
• De code bestaat uit HTML en CSS (in het document) en JavaScript (in de file script.js).
   
• HTML
• De HTML van het voorbeeld bestaat uit een enkele <div>-tag. Deze heeft het attribuut data-player="music". Dit attribuut wordt door de CSS en het JavaScript gebruikt om aan de speler te refereren. De waarde "music" is hier niet nodig, maar omdat het attribuut nu eenmaal een waarde moet hebben, is "music" gekozen.
  Informatie over het data-attribuut vind je in het item Over het data-attribuut in HTML5-tags.
• De <div> bevat voor elke knop een <span>-tag met een uniek id. Met behulp van JavaScript zijn deze aanklikbaar gemaakt.
• De tekst rechts naast de knoppen is ook opgenomen in <span>-tags. De ene heeft de klasse info, de tweede heeft id = "title". Zowel info als title worden gebruikt om de tekst op te maken. title is een id omdat de inhoud ervan moet kunnen veranderen. Bij info hoeft dat niet.
   
• Na de <div>-tag volgt in het voorbeeld nog een geordende lijst <ol> met daarin een lijst van de nummers. Behalve door op de knop 'afspelen' te klikken, kun je ook op een nummer uit de lijst klikken. De muziekspeler begint dan met dit nummer. De lijst met nummers mag ook worden weggelaten.
   
• CSS
• De CSS is alleen voor de opmaak van de muziekspeler. Er zijn geen animaties.
• De speler beslaat 80% van de breedte van het document. Met behulp van margin:0 auto is de speler gecentreerd.
• Alles wat binnen het element met attribuut data-player is geplaatst (dat zijn de vijf knoppen en de teksten) hebben een rand en worden vet gedrukt weergegeven. Dat wordt later nog overschreven. De cursor is een aanwijzer (om aan te geven dat er iets aanklikbaar is).
  Meer informatie over hoe de selector [data-player] > * werkt vind je in de items Over * en [] in Style Sheets en Over >, + en ~ in Style Sheets.
• De CSS van het laatste item binnen data-player wordt veranderd met behulp van de selector [data-player] > *:last-child. De border wordt niet meer genoemd, dus die verdwijnt. De cursor wordt teruggezet naar de default pijl.
• De CSS van het op één na laatste item (de tekst "Track titel: ") wordt aangepast door de klasse info. De font-weight wordt normal en de cursor wordt de default pijl.
   
• De array playlist is een lijst van objecten in JSON-formaat. Er zijn twee velden, te weten title en url.
  •  Het veld url bevat de naam van het muziekbestand. Dit kan zich op een andere server bevinden dan de host van je eigen website.
  •  Het veld title bevat de tekst die getoond wordt in de muziekspeler.
   
• JavaScript
• Het JavaScript in de file script.js begint met de declaratie van een Audio-object. Dat wordt opgeslagen in de variabele audio. Je moet daarbij als parameter opgeven welk muziekbestand je gaat gebruiken. In de code is het eerste element van de lijstplaylist gebruikt: playlist[0].url. Dit wordt overschreven met een andere bestandsnaam zodra de speler wordt gestart.
• In de variabele playing wordt bijgehouden welk muziekbestand wordt afgespeeld. Bij de start van het programma is dat nul, maar ook deze waarde wordt overschreven bij het starten van de speler.
  Verder wordt ingesteld dat de muziekjes niet steeds opnieuw worden gestart. Dat gebeurt met de opdracht audio.loop = false;.
   
• Het JavaScript wordt vooral gebruikt om de knoppen te laten werken en om de teksten te veranderen. Om dat mogelijk te maken heeft elke <span>-tag in de muziekspeler een uniek id.
• De knoppen kunnen pas aanklikbaar worden als de pagina is geladen. Daarom zijn de functions die dat doen ingebed in een addEventListener die wordt gestart als het event load wordt afgevuurd.
• De afzonderlijke knoppen worden opgezocht met behulp van document.querySelector('id'). Daaraan gekoppeld is de addEventListener("click", function({ … }).
• Als er op 'Afspelen' (#play) wordt geklikt start het afspelen. Er wordt een willekeurig nummer gekozen om mee te beginnen. Het gekozen getal wordt bewaard in playing. De keuze wordt gemaakt met de regel:
  playing = Math.floor(Math.random() * playlist.length);
  Deze function werkt alleen als de speler niet actief is, d.w.z. als de naam van het muziekstuk gelijk is aan "--".
• Als er op 'Stop' (#stop) wordt geklikt stopt het afspelen. playing wordt op 0 gezet en de naam van het muziekstuk op "--".
  Feitelijk is dat een reset. Als er weer op 'Afspelen' wordt geklikt, begint de speler weer met het kiezen van een nummer.
  Deze function werkt alleen als de audio aan staat en als de naam van het muziekstuk niet gelijk is aan "--".
• Als er op 'Pauze' (#pause) wordt geklikt, stopt de speler. De naam van het muziekstuk wordt vervangen door "(Gepauzeerd)". Deze function werkt alleen als de audio aan staat en als de naam van het muziekstuk niet gelijk is aan "--".
• Als er op 'Vorige' (#back) wordt geklikt, wordt het vorige nummer in de lijst gestart. De bijbehorende tekst wordt aangepast. Als het eerste nummer in de lijst speelt, wordt doorgegaan met het laatste nummer van de lijst.
  Deze function werkt alleen als de speler actief is, d.w.z. als de naam van het muziekstuk niet gelijk is aan "--".
• Als er op 'Volgende' (#next) wordt geklikt, wordt het volgende nummer in de lijst gestart. De bijbehorende tekst wordt aangepast. Als het laatste nummer in de lijst speelt, wordt doorgegaan met het eerste nummer van de lijst.
  Deze function werkt alleen als de speler actief is, d.w.z. als de naam van het muziekstuk niet gelijk is aan "--".
   
• Toepassen in je eigen site
• Regel een aantal muziekbestanden in .mp3-formaat. Dat wordt door alle browsers probleemloos afgespeeld.
• Download de .zip-file en pak hem uit. Bouw de code van je eigen pagina op zoals hier is beschreven.
• Zet de namen en de url's van de muziek bestanden in de lijst playlist. Je hebt nu een werkend voorbeeld.
• Pas de CSS aan naar je eigen voorkeur.

Gebruik:

• De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code van het voorbeeld ziet er als volgt uit:
 
(Zet dit in de <HEAD>).

<style> 
[data-player] { 
  width: 80%; 
  margin: 0 auto; 
  font-size: 1em; 
  padding:20px 10px; 
  border:3px inset cyan; 
  background:#dfd; 
} 
[data-player] > * { 
  padding: .5em; 
  border: 2px outset red; 
  cursor: pointer; 
  font-size: 1.2em; 
  font-weight:bold; 
} 
[data-player] > *:last-child { 
  display: inline; 
  border: 0; 
  width: 100%; 
  font-size:1em; 
  font-weight:bold; 
  cursor: default; 
} 
.info { 
  font-weight: normal; 
  font-size: 1em; 
  padding-left:10px; 
  border:0; 
  cursor: default; 
  top:0; 
  left:0; 
} 
</style> 
 
<script> 
var playlist = [ 
  {"title":"Almost Home","url":"Almost_Home_60.mp3"}, 
  {"title":"Anitas Dance","url":"Anitas_Dance_60.mp3"}, 
  {"title":"Dixie Jubilee","url":"Dixie Jubilee_60.mp3"}, 
  {"title":"Mountain Rain","url":Mountain_Rain_60.mp3"}, 
  {"title":"Say Goodbye","url":"Say_Goodbye_60.mp3"}, 
  {"title":"Winding Stream","url":"Winding_Stream_60.mp3"} 
]; 
</script> 
<script src="script.js"></script>

(Zet dit in de <BODY> op de plaats waar de muziekspeler moet verschijnen).

<div data-player="music"> 
  <span id="back" title="Vorige">&laquo;</span> 
  <span id="stop" title="Stop">&#9638;</span> 
  <span id="pause" title="Pauze / Hervatten">||</span> 
  <span id="play" title="Afspelen">&gt;</span> 
  <span id="next" title="Volgende">&raquo;</span> 
  <span class="info">Track: </span><span id="title">--</span> 
</div> 
<ol type="1">De playlist bevat onderstaande nummers: 
<script> 
  for (var i=0; i<playlist.length; i++) document.write('<li><a
    href="javascript:playThis(',i,')">',playlist[i].title,'</a></li>'); 
</script> 
</ol> 

Downloaden:
 
Druk op de knop:  File: voorb637.zip, 1619 bytes.

Opmerking:
 
Varianten van deze muziekspeler, die andere mogelijkheden hebben, zijn te vinden in de items Muziekspeler met afspeellijst en Afspeellijst voor audio random afspelen.