Muziek afspelen op je eigen website

Een eigen website onderhouden is een leuke bezigheid, waar je als je het goed aanpakt ook nog verdiensten aan kan overhouden. Maar een website wordt pas helemaal leuk als er muziek op staat. In dit artikel kom je te weten hoe je muziek op je website kan afspelen, op verschillende manieren.

Keuze van de muziek

Niet elke bezoeker van je website zal het prettig vinden dat er een muziekje te horen is. Zorg er voor dat het altijd passend is en let er op dat automatisch afspelen van muziek erg irritant kan zijn. De bezoeker vindt het fijn als er een keuze is, om de muziek aan of uit te zetten.

Bij het kiezen van een muziekje, let er daarbij op dat er geen auteursrechten op zitten. Buma, een auteursrechtenorganisaties kan daar namelijk flinke boetes voor uitdelen.

Door middel van een link muziek afspelen

De eenvoudigste manier om muziek op je website af te spelen, is via een link. Je plaatst een hyperlink die verwijst naar het muziekbestand. Meestal zijn dit MIDI of WAVE bestanden. Dus .mid of .wav. Maar het kan ook met een .mp3.

Zet de volgende code in de BODY van de pagina:

Of
Of

Zorg ervoor dat het muziekbestand op de juiste plaatst op de server staat.
Bij deze manier heeft de bezoeker controle over de muziek, maar toch wordt deze manier niet veel gebruikt.

Muziekbestanden embedded laten afspelen

Ook deze manier is eenvoudig en de meestgebruikte. Er zijn meer mogelijkheden in vergelijking met de hyperlink. Zo kan je ervoor kiezen om de muziek automatisch te laten starten of juist niet. Je kunt het beste met een .mid werken.Dit komt omdat deze altijd veel kleiner zijn dan een mp3. De bezoeker hoeft hierdoor niet lang te wachten voordat een bestand is gedownload. Een langere laadtijd kan afschrikken. Bij de embedded manier maken we gebruik van een muziekspeler. Hieronder de verschillende opties die je kunt toepassen. Plaats de code op de plek waar je de muziekspeler wilt plaatsen.

Zonder automatische start

Bij deze muziekspeler moet je op de play-knop klikken voordat de muziek begint. Je kunt de maat van de muziekspeler eenvoudig aanpassen. Door de height te veranderen, pas je de breedte aan. Door de width te veranderen, pas je de lengte aan. Ook kun je een kleine muziekspeler krijgen door te werken met het attribuut controls=”smallconsole”. Dit doe je op de volgende manier:

Met automatische start, één keer afspelen

Hierbij start de muziek automatisch, en wordt het bestand slechts één keer afgespeeld. Dus niet telkels herhaald. Gebruik hiervoor de code:

Met automatische start, doorlopende muziek

Hierbij start de muziek automatisch, en wordt het bestand telkens herhaald.
Gebruik hiervoor de code:

Doorlopende muziek, zonder muziekspeler

De muziek blijft hierbij constant doorspelen en de muziekspeler is verborgen. De bezoekers kunnen de muziek dus niet stoppen. Dit kan een bezoeker als irritant ervaren. Hiervoor gebruik je de code:
Een variant hierop is dat de muziek maar één keer afgespeeld wordt. Hiervoor moet je loop=”true” verwijderen uit de code.

Meerdere nummers op je website afspelen

Met bovenstaande manieren is het enkel mogelijk om één muziekbestand af te spelen. Maar het is ook mogelijk om meerdere bestanden achter elkaar af te spelen. Vooral voor MP3’s is dit een mooie oplossing. Er is een muziekspeler waarbij je een playlist aan kan maken, die op je site wordt afgespeeld. De XSPF Web Music Player maakt gebruik van Flash. Deze muziekspeler is gratis te gebruiken. Hieronder een uitleg hoe je de XSPF Web Music Player op je site krijgt.

Als eerst ga je naar deze site om de Music Player te downloaden. Je kunt kiezen uit drie verschillende spelers:

1. Music Player Extended
2. Music Player Slim
3. Music Player Button

In dit artikel wordt de Extended behandeld, dit is de meest uitgebreide muziekspeler. Wil je gebruik maken van de Slim of Button, dan hoef je enkel de code xspf_player.swf te veranderen in xspf_player_slim.swf of musicplayer.swf.
Download via de website de speler die je op je site wilt zetten. Pak de zip-file uit en upload het bestand xspf_player.swf naar je server.

De playlist

Nu gaan we de playlist voor je muziekspeler maken. Open een nieuw kladblok en plak onderstaande code in het tekstbestand.


Vervang daarna http://www.jedomeinnaam.nl/ in het adres van jouw site en als de muzieknummers in een aparte map staan, verwijs je naar die map. Staan ze gewoon in de hoofddirectory dan kan je “/directorynaam/” weglaten. Neem de namen van je muziekbestanden over en plak deze op de plaats van “muzieknummer.mp3”. Je kunt de muziekspeler een naam geven door “Titel van je muziekspeler” te vervangen voor een passende naam, je kunt het ook weglaten. Er is ook een mogelijkheid om een klein plaatje in de muziekspeler te plaatsen. Zorg ervoor dat tussen <image> en </image> de juiste verwijzing naar het plaatje staat. Ook dit kan je weglaten, als je hiervan geen gebruik wilt maken. In bovenstaande code staan slechts twee tracks, maar je kunt de playlist zo groot maken als jij wilt. Hehaal telkens het gedeelte tussen <track> en </track> om nieuwe nummers aan de playlist toe te voegen. Tenslotte sla je de playlist op als een .xspf bestand. Bijvoorbeeld playlist.xspf

De muziekspeler plaatsen

Nu gaan we de muziekspeler in een webpagina plaatsen. Plaats onderstaande code op de plek waar de muziekspeler moet komen.


Zorg ervoor dat de codes <param name=”movie”> en de <embed> tags goed doorlopen en er geen returns in die regel staan. Hierbij dien je ook http://www.jedomeinnaam.nl/ te veranderen in je eigen directory. En te verwijzen naar de juiste map. Je ziet in de code vraagtekens staan, achter dit vraagteken kun je een aantal parameters opgeven. playlist_url moet je altijd gebruiken, anders kan de muziekspeler de playlist niet vinden. Een parameter kun je toevoegen door eerst het &-teken te typen, daarna de naam van de parameter, gevolgd door het = teken en de waarde.

De volgende parameters kunnen gebruikt worden:

• autoload = de playlist wordt automatisch geladen zonder dat de bezoeker op de muziekspeler hoeft te klikken. De waardes zijn true of false.
• autoplay = de muziek wordt automatisch afgespeeld zonder dat de bezoeker op de playknop hoeft te drukken. De waardes zijn true of false.
• repeat_playlist = dit geeft aan of de playlist na het laatste nummer, herhaald moet worden. De waardes zijn true of false.

De laatste stap

Upload zowel het playlist bestand al de pagina waarin je de muziekspeler hebt toegevoegd naar je server. Vernieuw de pagina en zie het resultaat