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

Answer 1

[regex9]

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.

Comments

[Blurb1]

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 ?

[regex9]

@Blurb1

In der Zeile:

document.getElementById("TestsDiv").style.display = "none";

block statt none einsetzen.

[Blurb1]

@regex9

Ahhh, danke für die ausführliche antwort. Ich werde das mal gleich probieren

[Blurb1]

@Blurb1

Ah und ich hätte noch eine Frage, hat nichts damit zu tun, aber kann meine Website irgendwie ein Signal an meine Python Script schicken, welches dann auf dem Desktop eine Textdatei mit einem Text darin erstellt ?

[regex9]

@Blurb1

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.

[Blurb1]

@regex9

Achso danke, dann werde ich mal bisschen recherchieren. Nochmals danke für alles

Answer 2

[whgoffline]

http://jsfiddle.net/cpshanLf/

Einfach auf Lorem ipsum klicken

Woher ich das weiß: Studium / Ausbildung – Informatikstudent

Comments

[Blurb1]

Danke, aber ich höre auf meiner Website irgendwie garkeinen Sound. Auf den Foren geht es, aber bei mir geht es irgendwie nicht.

[whgoffline]

@Blurb1

Geht es dann bei meinem Beispiel?

[Blurb1]

@whgoffline

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

[whgoffline]

@Blurb1

Also dieses Beispiel http://jsfiddle.net/g12Lsowh/ spielt sound ab wenn du auf Lorem Ipsum drückst, ja??

[Blurb1]

@whgoffline

Genau. Aber auf meiner Webseite aufeinmal nicht mehr.

[whgoffline]

@Blurb1

Kannst du mal deinen Code auf der Website herzeigen?

[Blurb1]

@whgoffline

Habe sie bei Eutervogel unten gepostet

[whgoffline]

@Blurb1

Hast du deinem Website mal mit strg+f5 aktualisiert?

[Blurb1]

@whgoffline

Jetzt schon und das hat den Fehler leider nicht behoben.

[Blurb1]

@Blurb1

Ich habe gerade auch eine neue Seite erstellt und es dort probiert und ich höre auch da nichts. Liegt es vielleicht an mir und nicht am Code ?

Answer 3

[Eutervogel]

http://jsfiddle.net/dsuket/jTh3v/

Das scheint doch prächtig zu funktionieren.

Comments

[Blurb1]

Genau das ist mein Problem. Wenn ich auf die Buttons drücke, kommt kein Sound. Auf den Foren klappen sie, aber wenn ich sie auf meine Website übertrage, geht es plötzlich nicht. Vielleicht gebe ich etwas auch falsch ein keine Ahnung.

[Eutervogel]

@Blurb1

Dann poste doch mal deinen Code.

[Blurb1]

@Eutervogel

Gleich, wunder dich nicht wegen den komischen Zeichen usw. Gehört zum Rätsel dazu haha.

[Blurb1]

@Blurb1

<!DOCTYPE html>
 
<html lang="en">
    <head>
        <link src="StyleSheet.css"></link>
        <script src="Script.js"></script>
        <meta charset="utf-8" />
        <title>꒒ꐇꁴꂑꄞꈼꌅ</title>
    </head>
    <body>
 
        <center><h1>꒒ꐇꁴꂑꄞꈼꌅ</h1></center>
        
              
        
        <p style="font-size: xx-large">t2R47Q7QWB7c1XSAsdDGTtlPQGWZ4n</p>
        <p style="font-size: xx-large">N34mFsEzZSd3a0QmlJT5j94yPKgmDx</p> 
        <p style="font-size: xx-large">IX1yqM5clq0xrH9nRILFhZVjzCTO9S</p>
        <p style="font-size: xx-large">ACpRjAJDst7ZXT8C4wyWzlQieAKlwl</p>
        <p style="font-size: xx-large">CROTHvyh1XOBpEvRXhyC0xVcMf8YKa</p>
        <p style="font-size: xx-large">i3XDNxD7RLOrNUJGYcmPIQvlGrFRqW</p>
        <p style="font-size: xx-large">gfMhC4fAbIZsJ5lnnilmLR1eJ7Axrl</p>
        <p style="font-size: xx-large">2x5nUwVBjQ4rWX3l11M6hA8vNOicGL</p>
        <p style="font-size: xx-large">fu7ea6L1jQZANKQ01Iqh7zBX1FGlp5</p>
        <p style="font-size: xx-large">nnxD9kxgDnBENL8rdElWJ740Y5atYM</p>
        <p style="font-size: xx-large">vaipRDxjuNxWSE0NhJq5IsnfLFE4wN</p>
        <p style="font-size: xx-large">tjmKOgG6yXGen2aXXHZ1UQERQthGwG</p>
        <p style="font-size: xx-large">2FaBQQ8VKNHQyfka4bQ20IAo0wraye</p>
        <p style="font-size: xx-large">2FaBQQ8VKNHQyfka4bQ20IAo0wraye</p>
        <p style="font-size: xx-large">2FaBQQ8VKNHQyfka4bQ20IAo0wraye</p>
        <p style="font-size: xx-large">2FaBQQ8VKNHQyfka4bQ20IAo0wraye</p>
        <p style="font-size: xx-large">2FaBQQ8VKNHQyfka4bQ20IAo0wraye</p>
        <p style="font-size: xx-large">2FaBQQ8VKNHQyfka4bQ20IAo0wraye</p>
        <p style="font-size: xx-large">2FaBQQ8VKNHQyfka4bQ20IAo0wraye</p>
        <p style="font-size: xx-large">2FaBQQ8VKNHQyfka4bQ20IAo0wraye</p>
        <p style="font-size: xx-large">2FaBQQ8VKNHQyfka4bQ20IAo0wraye</p>
        <p style="font-size: xx-large">2FaBQQ8VKNHQyfka4bQ20IAo0wraye</p>
        <p style="font-size: xx-large">2FaBQQ8VKNHQyfka4bQ20IAo0wraye</p>
 
    <h1>Audio Test</h1>
    <p>Simple example</p>
	<div>
		<audio id="audio" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto"  ></audio>
		<button id="stop">Stop</button>
    <p id="play">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
	</div>
 
 
 
        <p style="font-size: xx-large" onclick="TestsFunction()" id="play">dOEZIqGjsRF7h0qibHupMPkcJgfTsY</p>
        <p style="font-size: xx-large">2FaBQQ8VKNHQyfka4bQ20IAo0wraye</p>
        <p style="font-size: xx-large">2FaBQQ8VKNHQyfka4bQ20IAo0wraye</p>
        <p style="font-size: xx-large">2FaBQQ8VKNHQyfka4bQ20IAo0wraye</p>
        <p style="font-size: xx-large">2FaBQQ8VKNHQyfka4bQ20IAo0wraye</p>
        <p style="font-size: xx-large">2FaBQQ8VKNHQyfka4bQ20IAo0wraye</p>
        <p style="font-size: xx-large">2FaBQQ8VKNHQyfka4bQ20IAo0wraye</p>
        <p style="font-size: xx-large">2FaBQQ8VKNHQyfka4bQ20IAo0wraye</p>
                                                                                        
        
<div id="TestsDiv" style="display:none">
    platzhalter
</div>
 
        
    </body>
</html>

Soll ich den JavaScript code auch schicken ?

[Eutervogel]

@Blurb1

Ja bitte, der ist ja fast noch wichtiger.

[Blurb1]

@Eutervogel

function TestsFunction() {
    document.getElementById("TestsDiv").style.display = "";
}
 
 
 
var playBtn = document.getElementById('play');
var stopBtn = document.getElementById('stop');
 
var playSound = function() {
	audio.play();
};
 
playBtn.addEventListener('click', playSound, false);
stopBtn.addEventListener('click', function(){audio.pause()}, false);

Ich bin ziemlich neu in JavaScript und deshalb sind die hier von irgendeinem Forum übernommen. Viel verstehe ich davon nicht haha

[Eutervogel]

@Blurb1

aktuell hast du 2 mal die id play vergeben. Das funktioniert nicht.

[Blurb1]

@Eutervogel

Habe es gerade beim zweiten von oben gelöscht, aber ist immernoch gleich. Habe auch schon eine neue Seite erstellt und es dort probiert, aber auch da war der Fehler nicht behoben. Vermutlich liegt es an mir und nicht am code. Aber meine Kopfhörer sind auch nicht kaputt oder so deshalb kann ich mir das nicht erklären

[Eutervogel]

@Blurb1

Hmm, haste das mal in nem anderen Browser getestet?
Sonst leg doch einfach mal ein alert auf die id play und guck, ob er das wenigstens macht.

[Blurb1]

@Eutervogel

Ja habe ich, hat auch nichts gebracht. Und wie soll ich das mit dem Alert machen ?

[Eutervogel]

@Blurb1

http://jsfiddle.net/oek5Lw9t/

[Blurb1]

@Eutervogel

ne, tut sich irgendwie nichts

[Eutervogel]

@Blurb1

Wo hast du den Kram denn laufen? Online oder lokal?
Hast du dein JS auch in script Tags?

also

<srcipt>
Code
</script>  

[Blurb1]

@Eutervogel

Lokal und gehören zu JS auch sowas wie <p id="play">Text</p> weil wenn ja, dann nicht. Hab sie in einem <div> Tag

[Eutervogel]

@Blurb1

Nein. Das ist HTML.

Hast du alles in einer Datei, oder in der Script.js die du einbindest. Funktioniert die Einbindung?

[Blurb1]

@Eutervogel

Nein, ich binde JavaScript ein. Bis jetzt hatte das mit dem Text (Draufdrücken damit ein anderer Text irgendwo erscheint)geklappt und das war auch mit JavaScript. Nur das mit dem Sound klappt nicht. Ausserdem benutze ich WebMatrix. Vielleicht hat das irgendwie damit zu tun weil das ja schon etwas älter ist und es eigentlich nicht mehr unterstützt wird.

[Eutervogel]

@Blurb1

Da kann ich nichts zu sagen. Kenne WebMatrix nicht. Gibt es denn Fehler in der Console? Also im Browser F12 drücken und dann auf den Reiter Console (oder Konsole je nach Browser)

[Blurb1]

@Eutervogel

Uncaught SyntaxError: expected expression, got '}'
Script.js:26:40


Uncaught ReferenceError: TestsFunction is not defined
    onclick

Das kommt raus

[Eutervogel]

@Blurb1

Dann bitte mal den kompletten Code der Script.js gerne auch mit pastebin.com

[Blurb1]

@Eutervogel

https://pastebin.com/yW7WAceu

[Eutervogel]

@Blurb1

Ich check es so nicht. Dein Code funktioniert bei mir gut.
Ich musste zwar den Sound austauschen, weil ich nix über http einbinden kann sondern nur https aber das sollte den Braten nicht fett machen.

Ich mach dir jetzt mal ein Kompliment mit der URL wo ich da grade dran spiele.
Wenn du dir den Quelltext 1:1 so kopierst und es geht bei dir immernoch nicht, dann weiß ich auch nicht weiter.

[Blurb1]

@Eutervogel

OMG ES KLAPPT. Danke dir ich war echt am verzweifeln hahaha. Ich hatte vor mein ARG öffentlich zu machen und wenn du willst kann ich dich in die "Credits" eintragen. Danke nochmal, dass du dir die Zeit genommen hast und das wie auch immer hingekriegt hast haha.

[Eutervogel]

@Blurb1

Alles gut. Kein Ding. Der einzige Unterschied dürfte allerdings sein, dass ich das JS nicht ausgelagert habe. Naja, ich kanns nicht so ganz nachvollziehen. Hauptsache es klappt.