Ben's Hobbyhoekje -- Muziekspeler met afspeellijst

Muziekspeler met afspeellijst

Hieronder zie je de knoppen van een eenvoudige muziekspeler. Daar is een playlist aan gekoppeld. Als je op de knop 'Afspelen' (>) klikt, hoor je het eerste nummer. Met de knoppen 'Volgende' (») en 'Vorige' («) navigeer je door de lijst. Er is –natuurlijk– ook een 'Pauze/stop'-knop (||).

« || > »

Track titel: --

Almost Home
Anitas Dance
Dixie Jubilee
Mountain Rain
Say Goodbye
Winding Stream

De muziekjes in de lijst zijn van het type 'Elevator music', of, zo je wilt, muzàk. Elk muziekje duurt ongeveer 60 seconden en wordt eindeloos herhaald.
Het gaat in dit voorbeeld echter niet om de muziek, maar om de techniek om een afspeellijst te maken.

De lijst bestaat uit zes nummers. Ik heb ze gevonden op de CD bij het blad Webdesigner Magazine nr. 23 (februari 2010)
Het idee voor dit item is gekomen door een artikel in Webdesigner Magazine nr. 97 (augustus 2017), pagina 14 t.m. 17. Voor deze site is de opmaak van het voorbeeld verbeterd en is het JavaScript uitgebreid. Een foutje in de HTML is gecorrigeerd.
Webdesigner Magazine wordt sinds eind november 2017 niet meer gemaakt.

De code van het voorbeeld kun je downloaden om zelf te gebruiken, echter zonder de muziek. Daar moet je zelf voor zorgen.

Er worden twee items besproken:
1. De werking van het script.
2. Toepassen in je eigen site.
De werking van het script
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. Dat is uitsluitend voor het mooie, het is niet nodig om de speler te laten werken.
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 vier 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.
JavaScript
Het JavaScript in de <head> definieert de array playlist. Dit is een lijst van objecten in JSON-formaat. Er zijn twee velden, te weten title en url. Het veld url 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.
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. Dat is het eerste element van de lijstplaylist: playlist[0].url.
In de variabele playing wordt bijgehouden welk muziekbestand wordt afgespeeld. Bij de start van het programma is dat nul.
Verder wordt ingesteld dat de muziekjes steeds opnieuw worden gestart. Dat gebeurt met de opdracht audio.loop = true;. De speler speelt de nummers dus niet automatisch achter elkaar af.
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. Tevens wordt de tekst van playlist[playing].title in de tekst van de laatste child van de muziekspeler gezet.
Als er op 'Pauze' (#pause) wordt geklikt, stopt de speler. De naam van het muziekstuk wordt vervangen door "(Afspelen is gepauzeerd)". Om te voorkomen dat dit ontspoort werkt deze function 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%;
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":"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 speler in het document moet verschijnen).

<div data-player="music">
<span id="back" title="Vorige">«</span>
<span id="pause" title="Pauze">||</span>
<span id="play" title="Afspelen">></span>
<span id="next" title="Volgende">»</span>
<span class="info">Track titel: </span><span id="title">--</span>
</div>
<ol tÿpe="1">De playlist bevat onderstaande nummers:
<li>Almost Home</li>
<li>Anitas Dance</li>
<li>Dixie Jubilee</li>
<li>Mountain Rain</li>
<li>Say Goodbye</li>
<li>Winding Stream</li>
</ol>

Downloaden:

Druk op de knop: File: voorb578.zip, 1351 bytes.

Opmerking:

Varianten van deze muziekspeler, die meer mogelijkheden hebben, zijn te vinden in de items Afspeellijst voor audio automatisch afspelen en Afspeellijst voor audio random afspelen.