Afspeellijst voor audio random afspelen

Hier onder zie je een muziekspeler met twee knoppen. Als je op de knop '> (Afspelen)' klikt wordt een willekeurig nummer gekozen en afgespeeld. De knop verandert in '▦ (Stop)'. Als het nummer is afgelopen wordt, weer willekeurig, een ander nummer gekozen en afgespeeld. Een nummer wordt nooit twee keer achter elkaar afgespeeld, ook niet als je na een klik op de stop-knop weer op afspelen klikt.
Als je op de '| | (Pauzeren / Hervatten)' drukt wordt het afspelen onderbroken. Als je er weer op drukt wordt het afspelen hervat waar de speler was gebleven.

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.
   
• CSS
• De CSS is alleen voor de opmaak van de muziekspeler. Er zijn geen animaties.
• De speler beslaat 60% 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 twee 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.
  In de variabele seqno wordt bijgehouden welk muziekbestand als laatste is afgespeeld. Bij het kiezen van een ander nummer wordt dit gebruikt om te voorkomen dat het laatste nummer wordt herhaald, er komt altijd een ander nummer.
  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. Het gekozen getal wordt bewaard in playing en seqno. 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 de speler werkt, verandert de knoptekst van > in ▦. Dit staat voor "Stop". Als er op geklikt wordt stopt de muziek en de tekst wordt gelijk aan "--" gemaakt.
  Als er daarna weer op 'Afspelen' wordt geklikt Wordt er een nieuw nummer gekozen.
• 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 daarna weer op 'Pauze' wordt geklikt gaat de speler verder waar die was gebleven.
   
• 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: 60%;
  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;
}
</style>
<script>
var playlist = [
  {"title":"Almost Home","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="script066.js"></script>

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

<div data-player="music">
  <span id="pause" title="Pauzeren / Hervatten">||</span>
  <span id="play" title="Afspelen / Stop">&gt;</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>',playlist[i].title,'</li>');
</script></ol>

Downloaden:
 
Druk op de knop:  File: voorb066.zip, 1483 bytes.

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