Meerdere MP3 bestanden afspelen op je site
Een populair artikel op Homepage-Maken is het artikel over het afspelen van muziek op je site. Ik heb hier veel reacties over ontvangen en één vraag kwam vaak naar voren: is het ook mogelijk om meerdere MP3's achter elkaar af te spelen? Daarom op verzoek dit vervolgartikel.
Ik heb bekeken of dit kan en inderdaad is er een mooie muziekspeler ontwikkeld die dit mogelijk maakt en waar ik van onder de indruk ben. Met deze speler kun je een playlist aanmaken van muziekbestanden die vervolgens op je site afgespeeld worden. In dit artikel bekijken we hoe je deze muziekspeler - de XSPF Web Music Player op je site zet.
De XSPF Web Music Player
De XSPF player maakt gebruik van Flash. Deze techniek wordt door praktisch alle moderne browsers ondersteund en dus zullen vrijwel alle mensen je muziek kunnen beluisteren. De XSPF player is trouwens een open-source project en dus gratis te gebruiken!
Ga eerst naar de site van de XSPF player. Daar zie je voorbeelden van deze muziekspeler staan. Er zijn op het moment van schrijven drie verschillende varianten van de speler beschikbaar:
- Music Player Extended
- Music Player Slim
- Music Player Button
Je kunt zelf wel zien wat de verschillen zijn als je de pagina bekijkt. De Slim en Button versies zijn in feite spelers die minder ruimte op het scherm innemen dan de Extended versie, maar ze werken wel op dezelfde manier.
In dit artikel ga ik ervan uit dat je de Extended versie op je site wilt zetten. Kies je voor de Slim of Button versie dan gaat het plaatsen van de speler op dezelfde wijze, alleen zul je in de codes hieronder xspf_player.swf moeten vervangen door de naam van de Slim versie (xspf_player_slim.swf) of de Button versie (musicplayer.swf).
Goed, kies dus de speler die je wilt hebben en download de bestanden via de XSPF player site. Vervolgens pak je de zip-file uit en upload je het bestand xspf_player.swf naar je webserver met behulp van een ftp programma.
De playlist maken
De XSPF player wordt aangestuurd door een playlist. Deze playlist moet je zelf maken. Het is gewoon een tekstbestand met een .xspf extensie. Je maakt gebruik van XML om dit bestand te maken. Er is een standaard ontwikkeld waarmee playlists aangemaakt kunnen worden. De specificaties zijn te vinden op XSPF.org. Geen paniek, het klinkt allemaal lastiger dan het is. :-)
Maak in je HTML editor of teksteditor een nieuw tekstbestand aan.
Plak de volgende code in het nieuwe tekstbestand:
<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<title>Titel van je muziekspeler</title>
<trackList>
<track>
<location>http://www.jedomeinnaam.nl/directorynaam/
muzieknummer.mp3</location>
<image>http://www.jedomeinnaam.nl/directorynaam/album.jpg</image>
<annotation>Naam van het eerste nummer</annotation>
</track>
<track>
<location>http://www.jedomeinnaam.nl/directorynaam/
muzieknummer2.mp3</location>
<image>http://www.jedomeinnaam.nl/directorynaam/album2.jpg</image>
<annotation>Naam van het tweede nummer</annotation>
</track>
</trackList>
</playlist>
Natuurlijk vervang je in de bovenstaande code http://www.jedomeinnaam.nl/ met het adres van je eigen site. Staan de muzieknummers in een aparte directory op je server, verwijs dan naar deze directory in de code. Staan de nummers gewoon in de hoofddirectory (root) dan kan je /directorynaam/ in de bovenstaande code dus weglaten. Daarnaast moet je de de namen van je MP3 bestanden precies overnemen in de code in plaats van muzieknummer.mp3.
Tussen <title> en </title> type je een korte titel voor je muziekspeler. Deze wordt getoond na het laden van de speler. Je kunt deze regel ook weglaten. In dat geval verschijnt een standaard titel van de maker van de XSPF speler.
Met <image> in de code kun je een klein plaatje in de muziekspeler plaatsen. Let ook hier op het verwijzen naar de juiste locatie van de plaatjes en vergeet ze niet te uploaden, mochten de plaatjes nog op je pc staan. Je hoeft overigens geen plaatjes te plaatsen bij de muziekspeler. Je kunt dus ook deze regel code (van <image> tot </image> ) eventueel weglaten.
In deze playlist staan slechts twee nummers. Je kunt de playlist oneindig lang maken door nieuwe tracks door te voegen. Herhaal gewoon iedere keer het gedeelte tussen <track> en </track> om nieuwe nummers toe te voegen.
Als je de playlist klaar hebt dan moet je hem tot slot nog opslaan als een .xspf bestand anders zal het niet als playlist herkend worden door de muziekspeler! Noem het bijvoorbeeld playlist.xspf. Deze bestandsnaam houden we in de code in de rest van dit artikel aan.
De code voor de muziekspeler
Nu de playlist klaar is, is het tijd om de muziekspeler op te nemen in de webpagina. Hiervoor gebruik je de volgende code. Plaats de code op de plaats in de pagina waar je de XSPF speler wilt hebben.
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="400" height="170">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="http://www.jedomeinnaam.nl/directorynaam/xspf_player.swf?playlist_url=http://www.jedomeinnaam.nl/directorynaam/playlist.xspf&autoload=true" />
<param name="quality" value="high" />
<param name="bgcolor" value="#E6E6E6" />
<embed src="http://www.jedomeinnaam.nl/directorynaam/xspf_player.swf?playlist_url=http://www.jedomeinnaam.nl/directorynaam/playlist.xspf&autoload=true" quality="high" bgcolor="#E6E6E6" name="xspf_player" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="center" width="400" height="170">
</embed>
</object>
Let er goed op dat de codes in de <param name="movie"> en de <embed> tags doorlopen en dat er geen returns/line breaks in die regels staan! Als het goed is kan je de bovenstaande code nu gewoon in je pagina kopiëren en plakken. Dat zou geen problemen meer moeten geven in Internet Explorer, wat met de vorige code op deze pagina vroeger wel gebeurde als gevolg van line breaks in de code bij het kopiëren. Mijn excuses aan de bezoekers die hier tegenaan zijn gelopen.
Net als in de code voor de playlist moet je het adres van je site invullen in plaats van http://www.jedomeinnaam.nl/ en verwijzen naar de juiste directory als je de speler in een aparte directory hebt gezet.
In de code zie je bij de <param> en <embed> tags een vraagteken (?) staan. Na dit vraagteken kun je een aantal parameters opgeven voor de XSPF player. In de code hierboven hebben we bijvoorbeeld playlist_url en autoload gebruikt. Deze parameters geven respectievelijk de locatie van de playlist aan en de opdracht dat de playlist automatisch geladen moet worden.
playlist_url moet je sowieso gebruiken anders weet de muziekspeler niet waar het de playlist vandaan moet halen, maar andere parameters kun je zelf toevoegen. Een extra parameter voeg je toe door het & teken te typen, gevolgd door de naam van de parameter, het = teken en een waarde.
Hier volgen wat parameters die je mogelijk wilt gebruiken:
- autoload= de playlist wordt automatisch geladen zonder dat de bezoeker op de muziekspeler hoeft te klikken. Mogelijke waardes true of false (standaard).
- autoplay= de muziek wordt automatisch afgespeeld zonder dat de bezoeker op de play-knop drukt. Mogelijke waardes true of false (standaard).
- repeat_playlist= geeft aan of de playlist na het afspelen van het laatste nummer herhaald moet worden. Mogelijke waardes true of false (standaard).
Nadat je de code in de pagina geplakt hebt, moet je de pagina natuurlijk nog even uploaden naar de webserver. Upload ook het playlist bestand (playlist.xspf of een andere naam die je gekozen hebt) als je dat nog niet gedaan hebt!
Einde
Dat was het! Als het goed is dan staat er nu een fraaie Flash muziekspeler op je pagina bij het volgende bezoek aan je site.
Denk eraan dat je bij het testen van de speler altijd de pagina herlaadt ("vernieuwen", of druk op F5). Anders word je geconfronteerd met de oude cache pagina uit je browser. Als je bijvoorbeeld net een foutje in je code hebt verbeterd dan lijkt het of de fout er nog steeds in zit, terwijl in werkelijkheid de code nu wel goed is. Herstart desnoods even je browser (bij mij was dit nodig om een wijziging van de titel van de speler te kunnen zien in Internet Explorer).
Veel plezier met deze mooie speler!
Lees ook:
Wat vond je van dit artikel?
Homepage-Maken Tip
De makkelijkste manier om je eigen website te maken?
Dat is via een website bouwer als Weebly. Hiermee kun je eenvoudig via je browser door middel van drag-en-drop een website bouwen. Je kunt volledig gratis beginnen met 500MB webruimte voor je site. Zo nodig kun je een betaald pakket nemen met eigen domeinnaam, "onbeperkte" opslag (fair use policy) en e-commerce mogelijkheden.
Weebly is daarom een prima optie als je snel een website in elkaar wilt zetten. Kennis van HTML of het installeren van een eigen content management systeem is niet nodig bij Weebly.
