script aanpassen

Status
Niet open voor verdere reacties.
hanna

hanna

Gebruiker
Lid geworden
8 sep 2000
Berichten
966
Is het mogelijk om onderstaand script zo aan te passen dat als de site in FF opent het script een .ogg pakt en geen mp3 ?

Code: 
<script language="javascript" type="text/javascript">
 function playSound(soundfile) {
 document.getElementById("music").innerHTML="<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />"; }
 </script>

Ik zelf kan niet scripte in javascript, dus graag enige hulp.
 
Ik zou inplaats van embed, audio gebruiken, dan kiest de browser zelf welk file hij wilt gebruiken :)
 
Dan hou het op want ik weet echt niets anders.
 
Eventueel kun je dit doen:

Code: 
function playSound(soundfile) {
    if(navigator.userAgent.indexOf("Firefox") !== -1) {
        // bestand voor Firefox hier
    } else {
        document.getElementById("music").innerHTML="<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />"; 
    }
}
 
Laatst bewerkt:
kan op // bestand voor Firefox hier zo een url gezet worden, geen afsluit tags?
 
<audio> verdient de voorkeur: http://www.w3schools.com/html/html5_audio.asp

Met MP3 en OGG vang je alle moderne browsers af.

Deze kun je gewoon altijd in je broncode zetten en dan het .play()-event er op los laten wanneer er op een knop wordt geklikt. Of je stelt autoplay in.
 
@hanna

Ja, maar je moet uiteraard daar de code van het audio element plaatsen, maar ik ben het helemaal eens met Tha Devil.
 
Maar hoe zit zo'n script dan in elkaar, jullie praten er zo makkelijk over maar ik heb geen kaas gegeten van JavaScript.
 
<audio> heeft in prinicipe niks met javascript te maken, als je het voorbeeld op de link die ik gaf bekijkt zul je zien dat er geen javascript aan te pas komt.
 
Als je de html5-audio gebruikt volgens w3schools, werkt het nog niet in Internet Explorer 8 en oudere IE's.
Maar dat valt af te vangen door voor IE8 en eerder de tag <bgsound> in de <head> op te nemen. Dat werkt alleen in IE (zie hier), en het is eigenlijk ongeldige html-code. Maar hier komt het goed van pas!
Door het in een zogenaamd "Conditional Comment" te zetten dat alleen voor IE8 en eerder geldt, wordt het buiten het bereik van de andere browsers gehouden.

  • Het javascript playSound(soundfile) en de <span id="music"></span> kunnen dan helemaal gemist worden.
Probeer dit eens:
HTML: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test sound</title>
    <!--[if lte IE 8]>
    	<bgsound src="http://www.w3schools.com/html/horse.mp3">
    <![endif]-->
</head>

<body>

<h1>test sound</h1>

<audio autoplay>
	<source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
	<source src="http://www.w3schools.com/html/horse.ogg" type="audio/ogg">
</audio>

</body>
</html>
Toelichting:
  • Het Doctype is voor html5, zodat de <audio> tag kan werken.
  • In het Conditional Comment betekent "lte": "less then or equal to", dus IE9 en IE10 maken gewoon gebruik van de <audio> (want IE9 en IE10 ondersteunen die wel).
  • In de <audio> is "controls" weggelaten, zodat er op de pagina geen player te zien is.
  • In de <audio> is "autoplay" toegevoegd, zodat het geluid uit zichzelf wordt afgespeeld.
  • In de <audio> is de tekst "Your browser does not support the audio element." weggelaten, omdat er voor niet ondersteunde browsers (= de oude IE's) nu een alternatief is.
PS: Ik zou van zichzelf afspelende geluiden erg zuinig gebruik maken (en wat mij betreft: ze liefst helemaal niet gebruiken!), want veel mensen ergeren zich daaraan.
___________
Edit:
Er is ook nog een ander alternatief. Je kunt i.p.v. het Conditional Comment ook het javascript html5media.min.js in de <head> zetten. De uitleg zit hier op html5media.info.
Dan komt de <head> er uit te zien als:
HTML: 
...
<head>
    <meta charset="utf-8">
    <title>test sound (2)</title>
    <script src="http://api.html5media.info/1.1.5/html5media.min.js"></script>
</head>
De rest blijft hetzelfde.
 
Laatst bewerkt:
Ik ga er mee aan de slag csshunter, je hoort hier nog het resultaat.
De geluiden spelen niet uit zichzelf, maar onclick. Ze worden gekoppeld aan coordinaten in een <map> imagemap.
Ik heb daar ook een hekel aan.

@ Tha Devil, maar ik moet het wel in JavaScript inpassen, dus het is niet alleen html en ook nog moet het in wordpress werken.

Ga het allemaal proberen en laat het weten.
 
Laatst bewerkt:
Jullie ideetjes werken allemaal niet.
Zo staat het er nu, in IE werkt het geluid pas als je de _blank weer sluit, in FF helemaal niks en in Crome werkt alles zoals ik het bedoel.
Het totale script is veel langer, er zitten een heel stel area's in met ieder een ander geluid onclick, dat is het probleem nu.

Code: 
<script language="javascript" type="text/javascript">
 function playSound(soundfile) {
 document.getElementById("audio").innerHTML="<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />"; }
 </script>
</head>

<body>
<span id="audio"></span>
<img src="images/cat.jpg" width="200" height="670" alt="Cat" border="0" usemap="#cat" />
<map name="cat">
  <area shape="rect" coords="30,87,64,113" href="http://www.xxxxx.nl/alle-rondes-in-de-kennisquiz/" target="_blank" alt="Ad" onClick="playSound('http://deweblog.lapzwansnet.nl/sound/ad1.mp3');">
  <area shape="rect" coords="124,88,173,119" href="http://www.xxxxx.nl/alle-rondes-in-de-kennisquiz-voren/" target="_blank" alt="PeterW" onClick="playSound('http://deweblog.lapzwansnet.nl/sound/peterw.mp3');">

Doctype = <!DOCTYPE html> Als iemand nog een goed idee heeft, graag !!!! de oude IE's doe ik al geen moeite meer voor als ik dit maar goed krijg, dan ben ik al heel heel blij.

We hadden dit altijd in flash, werkt perfect, maar niet meer op Iphone en Ipad vandaar de switch.
 
Laatst bewerkt:
Ah, verschillende geluiden bij verschillende hotspots verandert de zaak: dan kan er geen autoplay op gezet worden.
Er moet dan een kleine onclick-functie bij komen, die het benodigde geluid laat afspelen.
HTML: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test sound (4)</title>
</head>

<body>

<h1>test sound (4)</h1>
<p>
	<img src="images/image-map.jpg" width="475" height="270" style="border: 0;" alt="" usemap="#hotspots">
	<map id="hotspots" name="hotspots">
		<area href="link1.htm" target="_blank" shape="rect" coords="179, 102, 235, 155" onclick="playsound(1);">
		<area href="link2.htm" target="_blank" shape="rect" coords="241, 102, 295, 155" onclick="playsound(2);">
	</map>
</p>

<audio id="sound1" preload="auto">
	<source src="horse.mp3" type="audio/mpeg">
	<source src="horse.ogg" type="audio/ogg">
</audio>
<audio id="sound2" preload="auto">
	<source src="frog.mp3" type="audio/mpeg">
	<source src="frog.ogg" type="audio/ogg">
</audio>

<script type="text/javascript">
function playsound(soundNr){
	document.getElementById('sound'+soundNr).play();
}
</script>

</body>
</html>
  • Deze werkt in Chrome, Firefox, Opera en Safari; en als het goed is ook in IE9 en IE10.
  • Of het met toevoeging van de html5media.min.js in de <head> ook werkt in IE8 kan ik momenteel niet testen.
 
Ik ga het vanavond proberen, kijken of dit in wp ook lukt. Hartstikke bedankt , je hoort het nog.
 
Laatst bewerkt:
PS:
  • M'n voorbeeld werkt alleen als de nieuwe pagina met target="_blank" in een nieuw tabblad geopend wordt! Dan blijft de oude pagina nl. open staan, en wordt daar het geluid afgespeeld.
  • Als de nieuwe pagina in hetzelfde tabblad moet openen, werkt het niet: dan floept de oude pagina meteen weg, en is er niets meer waar het geluid afgespeeld kan worden. Oplossing daarvoor is: via javascript een kleine vertraging inbouwen zodat eerst het geluid wordt afgespeeld op de oude pagina, en daarna pas de nieuwe pagina wordt geopend. *)
___________
*) Eventuele andere oplossing: het geluid niet op de oude pagina laten afspelen, maar (automatisch) op de nieuwe pagina's. Die krijgen dan elk hun eigen player met hun eigen geluidje; maar dat gaat natuurlijk niet als er naar externe sites gelinkt wordt.
 
Bedankt csshunter, het is allemaal target="_blank". Ik ga er in het weekend mee aan de slag, want ik heb het nu nog even heel erg druk.
 
Er is hier van alles tussengekomen, dus komt nog. Ja, werkt goed de tegeltjes.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan