Ik heb het volgende opgenomen op mijn site:
<img src="../../../Media/geluid kievit.png" class= "kievit" onclick="playSound('../../../Media/Kievit.mp3');"/><br>
met script:
function playSound(soundfile) {
document.getElementById("dummy").innerHTML=
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
en in HTML
<span id="dummy"></span> <!--nodig voor het geluid van de kievit-->
Dat leek altijd goed te werken totdat ik het eens uittestte in plaats van onder Chromium, onder Firefox; toen kreeg ik een foutmelding over een plug-in. Uitgetest onder Windows gaf hetzelfde beeld met dat verschil dat ik nu geen bericht over een plug-in bij Firefox kreeg; zelfs Internet Explorer gaf geluid. Bij een wav-file of ogg ligt het weer iets anders, maar Firefox blijft onder Linux om een plug-in-roepen en geeft bij geen enkele extensie enig geluid.
Ik begrijp nu dat de verschillende browsers verschillende formaten ondersteunen en dat ik daar rekening mee moet houden. Ik ben toen gestuit op het volgende, wat goed werkt in verschillende browsers:
<audio controls autoplay>
<source src="../../../Media/Kievit.ogg" />
<source src="../../../Media/Kievit.mp3" />
<p>This browser does not support our audio format.</p>
</audio>
Mijn probleem hierbij is dat ik het niet gecombineerd krijg: ik wil als ik op het plaatje kievit.png klik - zonder dat een spelerbalkje verschijnt - het geluid laten horen in tenminste Firefoc en Chrome/Chromium. Dat spelerbalkje verwijderen is gemakkelijk (controls) en autoplay spreekt ook voor zich.
Iemand een idee hoe ik het in elkaar schuif, of een andere oplossing die volledig recht doet aan de eerste coderegel? Een verzorgde foutmelding als gevolg van 'onclick' mag ook, zonder een blok te vertonen over een ontbrekende plug-in (storend en site lay-out verstorend).
Ik werk overigens onder Ubuntu 12.04, al staat dat hier los van: ik wil natuurlijk mijn geluidje laten horen op iedere computer en besturingssysteem die mijn site bezoekt.
