Mijn-eigen-website.nl

Websitebouw voor doe-het-zelvers

Verras je bezoekers met achtergrondmuziek op je website

Met deze html-code laat je je bezoekers achtergrondmuziek horen als ze een pagina van je website oproepen.

Een pagina van je website van achtergrondmuziek voorzien is écht helemaal niet moeilijk. Het enige dat je hoeft te doen is een geluidsbestand op de server van je webhost zetten en een stukje html-code plaatsen op de pagina waarop die achtergrondmuziek te horen moet zijn. Meer komt er niet bij kijken! Verderop vind je de code van de achtergrondmuziek van deze webpagina.

Maar wees voorzichtig met achtergrondmuziek: als je geluidsbestand erg groot is, kan het erg lang duren voordat je pagina is geladen in Internet Explorer (of een andere browser). Je loopt dan het risico dat je bezoeker alweer vertrekt voordat hij de pagina zelfs maar heeft gezien! En dat kan natuurlijk nooit je bedoeling zijn.

Het beste kun je een mp3-bestand gebruiken voor je achtergrondmuziek. Dit formaat is een van de meest populaire, heeft een goede compressie en een hoge kwaliteit. Eigenlijk alle browsers ondersteunen dit formaat.

Zorg er ten slotte voor dat je een goede webhost hebt. Waarom? Veel gratis web hosting services bieden maar erg weinig ruimte op hun server, dus tegen de tijd dat je muziekbestanden op hun server staan, heb je maar weing ruimte meer over voor andere zaken. (Ik heb een first class hostingpakket bij Alphamegahosting, en dat biedt genoeg ruimte voor wat achtergrondmuziek.)

De html-code voor achtergrondmuziek

  1. Zoek eerst een muziek- of geluidsbestand dat je wilt gebruiken. Weet je niet waar je een geschikt muziekbestand vandaan moet halen? De achtergrondmuziek die je op deze pagina hoort, is afkomstig van ccMixter.org.

  2. Upload je muziekbestand naar de server van je web hosting provider.

  3. Nu open je in je html-editor de pagina waarop je de muziek wilt laten horen. Ergens op de pagina – het doet er niet zoveel toe waar – zet je de volgende html-code:

    <audio autoplay>
    <source src="muziek/grapes_-_I_dunno.mp3" type="audio/mpeg">
    <source src="muziek/grapes_-_I_dunno.ogg" type="audio/ogg">
    </audio>

Uitleg:

  • <audio autoplay>
    ...
    </audio>
    :
    Bovenstaande code maakt gebruik van de html5-audio-tag. (Op de plaats van de drie puntjes komen de links naar je audio-bestanden te staan.) Deze code wordt ondersteund door de moderne browsers, maar in oudere browsers kan het zijn dat je achtergrondmuziek niet te horen is. Met autoplay geef je aan dat het bestand automatisch moet worden afgespeeld zodra de pagina wordt opgeroepen. Volg je ook nog loop aan de audio-tag toe, dan wordt het bestand steeds opnieuw afgespeeld.

  • source src="muziek/grapes_-_I_dunno.mp3"
    Je moet je achtergrondmuziek in twee formaten aanleveren: in mp3 (voor Internet Explorer, Chrome, nieuwere Firefox-versies en Safari) en in ogg (oudere Firefox-versies en Opera). Als je je bestand alleen maar in mp3-formaat hebt, kun je het laten converteren bij Online-Convert.com.

  • type="audio/mpeg" en type="audio/ogg":
    Hiermee wordt het internet mediatype (MIME) van de bestanden vastgelegd. Neem dit maar gewoon over.

Ten slotte upload je het webpagina met de muziekcode en je muziekbestanden naar de server. Dat is alles!