Einen Sound beim klicken eines Textes abspielen (JavaScript)?
Hi,
Ich arbeite gerade an einem ARG und für einen Rätsel muss man auf einer Seite einen Text finden und darauf klicken. Jetzt will ich, dass dann ein Ton ertönt, wenn man darauf geklickt hat. Wie mache ich das ? Ich habe auf jeglichen Foren geschaut, aber alle Scripte haben keinen Ton abgespielt.
Danke im voraus
3 Antworten
Ich habe mir gerade einmal dein unten gepostetes Markup angeschaut. Dieses ist an verschiedenen Stellen fehlerhaft (Beispiel: falscher link-Tag, center gehört nicht zum HTML5-Standard, doppelte ID, ...). Du solltest die Quelle, von der du deine Informationen beziehst, wechseln. Das MDN bietet eine aktuelle und valide Referenz.
Wie es eher aussehen sollte: https://jsfiddle.net/6fzbrm8j/
Dazu ein paar Anmerkungen:
1) Inline-Styles habe ich dabei durch CSS-Selektoren in einem style-Tag ersetzt. Optimalerweise sollten diese mit in deine StyleSheet.css.
2) Ich weiß nicht, was in Script.js steht (daher habe ich deinen JS-Code erst einmal in ein eigenes script-Tag gesetzt), doch ich vermute, sie soll dein Skript beinhalten, welches die Audioquelle steuert. Das Skript sollte erst ausgeführt werden, sobald alle Seitenelemente geladen wurden (andernfalls werden die gesuchten Elemente im DOM noch nicht gefunden). Das lässt sich erreichen, indem man den script-Tag kurz vor dem schließenden body-Element einbindet.
3) Da du zweimal die ID play vergeben hast (was ein Fehler ist), habe ich sie nun dem Paragraph mit dem Code geschenkt.
<p class="code" id="play">dOEZIqGjsRF7h0qibHupMPkcJgfTsY</p>
Da an das Element im script-Block ein Klick Handler gebunden wird, fliegt das onclick-Attribut heraus und die Aktion von TestsFunktion kommt mit in einen Handler.
playBtn.addEventListener('click', function() {
document.getElementById("TestsDiv").style.display = "none";
}, false);
Ein leerer String ist im Übrigen kein valider Wert für das display-Property. Ich habe dafür nun einfach none gesetzt. Das blendet das angesprochene Element aus. Wenn du einen anderen Zustand möchtest, schau auf MDN nach dem display-Property.
4) Du hast bisher eine nicht existente Variable (audio) angesprochen. Die habe ich noch ergänzt.
5) Sollte deine Webseite im Übrigen über HTTPS laufen, solltest du für deine Audioquelle ebenso schauen, dass diese gesichert (mit HTTPS) eingebunden werden kann. Andernfalls kann es dazu führen, dass die Quelle blockiert wird.
Das geht, allerdings benötigst du einen öffentlich zugänglichen / für die Webseite erreichbaren (Web-)Server, der die Anfrage der Webseite entgegennehmen und an deine Anwendung weiterleiten kann. Die Webseite kann via JavaScript und WebSockets oder einem AJAX Request die Anfrage verschicken.
Einfach auf Lorem ipsum klicken
Danke, aber ich höre auf meiner Website irgendwie garkeinen Sound. Auf den Foren geht es, aber bei mir geht es irgendwie nicht.
Ich weiß nicht, wie du das meinst, aber auf der Website klappt alles, aber wenn ich den code auf meine Website übertrage, sind zwar die Buttons und der Lorem Ipsum Text zu sehen, aber wenn ich auf die Buttons drücke, hört man keinen Sound
Also dieses Beispiel http://jsfiddle.net/g12Lsowh/ spielt sound ab wenn du auf Lorem Ipsum drückst, ja??
Genau. Aber auf meiner Webseite aufeinmal nicht mehr.
Jetzt schon und das hat den Fehler leider nicht behoben.
Das ist sehr ausführlich und gut erklärt. Ich denke ich habe es verstanden. Aber im JavaScript stand ein Code, was einen anderen Text erscheinen lies, wenn man auf den Text gedrückt hat welches den Sound abspielt. Wie kann ich ihn hier einbinden ? Einfach auch in den <script> Tag mit rein packen oder ?