Geluid weergeven bij klikken op afbeelding

Status
Niet open voor verdere reacties.
A

afarensis

Verenigingslid
Lid geworden
12 jul 2011
Berichten
586
Besturingssysteem
Windows 11
Office versie
365
Op mijn site www.lucyonline.nl heb ik een pagina http://www.lucyonline.nl/algemene_informatie/kinderen/dinosauriers/dinosauriers.htm van waaruit je op de afbeeldingen van drie dino's kunt klikken. In een popup venster kun je dan vervolgens op de afbeelding van de betreffende dino klikken waarbij er een dino-geluid te horen 'zou moeten zijn'.
Jaren geleden heb ik dit in elkaar gefrobeld (ben maar een amateurtje). Werkte overigens alleen in IE.
Echter, op een of andere manier lukt dat ook niet meer. Ik heb er al een tijdje geen aandacht meer aan geschonken en mogelijk is het met de komst van versie 11 mis gegaan.

Dit is het stukje code wat ik ervoor gebruik:
Code: 
<div align="center"><img src="../de-dieren/plaatjes/pachycephalosaurus.jpg" alt="pachycephalosaurus" width="189" height="301" onClick="document.all.geluid.src='../geluid/dino-geluid-1.wav'"><br>
<BGSOUND id='geluid' SRC="none.wav" LOOP="1"></div>

Wellicht is een kleine aanpassing voldoende om het (misschien ook in Chrome en Edge?) weer te laten werken. Maar als het (in het HTML5 tijdperk) lastig te realiseren is, dan haal ik het gewoon weg; is niet noodzakelijk, wel leuk!

Ik werk overigens met Windows 10.

Hopelijk kan iemand mij hierbij behulpzaam zijn?
 
Hi, de tag <audio> is weliswaar html5 maar als je die in een html4 pagina zet dan zullen de moderne browsers daar geen probleem mee hebben.
Code: 
<script type="text/javascript">
function afspelen(mp3) {
  var audio = document.getElementById('geluid');
  audio.src = mp3; audio.load(); audio.play();
}
</script>
<audio id="geluid" loop="loop">
  <source src="" type="audio/mpeg">
</audio>

<div align="center">
  <img src="../de-dieren/plaatjes/pachycephalosaurus.jpg" width="189" height="301"
    alt="pachycephalosaurus" onClick="afspelen('../geluid/dino-geluid-1.mp3')" />
</div>
Zet alle wav bestanden om in mp3 (ondersteuning in alle moderne browsers)
Het <script> en <audio> gedeelte 1x op je pagina zetten!
Bij elk plaatje kun je bij onClick het mp3 bestand invullen

Suc6.
 
Excuus, door gedoe met mijn pc kon ik even niet eerder reageren....

Geweldig, het is opgelost en nog wel met alle bekende browsers. Ik ben er blij mee. Bedankt!

Omdat het geluid in een 'loup' zat en ik dit ook niet uit kon zetten, ben ik nog wel even aan het klungelen geweest met die instelling. Inmiddels <audio id="geluid" loop> veranderd in <audio id="geluid" loop-"1"> en nu werkt het perfect.

Nogmaals Beiden dank, dus ook PHP4U voor zijn 'hover'-suggestie, maar dat vond ik toch wat ingewikkeld.

Groet, George
 
Super dat het werkt :thumb: De loop in de <audio> tag is zo:
Code: 
<audio id="geluid" loop="loop">  :  loop in html-4 of xhtml
<audio id="geluid" loop>         :  loop in html-5
<audio id="geluid">              :  geen loop (html-4, xhtml, html-5)
Suc6.
 
Laatst bewerkt:
Bedankt voor je aanvullende info. Weer wat geleerd!

Groet, George
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan