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 'Afpelen' klikt, begint het nummer overnieuw.

« || > » Track: --
    De playlist bevat onderstaande nummers:

Gebruik:

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 .....).

<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: Download deze code  File: voorb637.zip, 1631 bytes.

Opmerking:
 
Met de code op deze pagina heb je volledige controle over de speler. Het is ook mogelijk om alles op de achtergrond te laten gebeuren. Alle nummers worden dan willekeurig gekozen. Te zijner tijd wordt daar een artikel aan gewijd.

 
terug

html-637; Laatste wijziging: 20 juni 2021