Beim click auf einen button einen sound machen, JavaScript?

Hallo, ich habe einen Button erstellt undzwar:

<button class="button"> Bam </button>

Jetzt will ich dass bei jedem klick auf dem Button ein Sound abgespielt wird.

Wie soll ich das in JavaScript schreiben?

2 Antworten

TechPech1984

Nutzer, der sehr aktiv auf gutefrage ist

im Thema Computer

16.06.2022, 17:40

<button class="button" onclick="hierdeinefunktion()"> Bam </button>

und hier das javascript beispiel

https://www.codegrepper.com/code-examples/html/sound+play+function+javascript

Jqjsjskqkqkw

Beitragsersteller

16.06.2022, 17:50

Dankeeee hat funktioniert

EinAlexander

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, JavaScript

16.06.2022, 17:48

Wie soll ich das in JavaScript schreiben?

<script>
function playsound(file) {
  new Audio(file).play();
}
</script>

<button onclick="playsound('bam.wav')">Bäm</Button>

Alex

Ähnliche Beiträge

Zwei funktionen auf ein button packen?

Wie kann ich zwei funktionen auf einen Button packen? Also ich will das bei jedem click auf meinen button

1. immer plus 1 addiert wird: onclick="pluszahl()"

2. das ein Sound abgespielt wird: onclick="play()"

Leider konnte ich nur den counter machen und frage mich jetzt wie ich den sound auch aktivieren kann

HTML:

    <span class="center">Bam?</span>
    <div onclick="custom()" class="btn-container">
        <button onclick="pluszahl()"; twoclick="play()"    class="button1">
            Bam
        </button>
    </div>

    <div id="resultArea">0</div>

JavaScript:

function play() {
  var audio = new Audio('bam.mp3');
  audio.play();
}

function pluszahl() {
  document.getElementById("resultArea").innerHTML = parseInt(document.getElementById("resultArea").innerHTML)+1;
  }

...zum Beitrag

HTML, CSS, Javascript EventHandler und .innerText?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test DOM Manipulation</title>
    <script src="inner.Text.js" defer></script>
</head>
<body>

<div>
    <button id="button">click me</button>
    <input type="submit" id="Einreichen" name="Einreichen" value="Testen">
</div>

</body>
</html>
const meinBody = document.body;
const e1 = document.createElement('div');

const innerText1 = "Programmieren ";
const innerText2 = document.createElement("b");
innerText2.innerText = "3";
const innerText3 = " FTW!";

e1.append(innerText1, innerText2, innerText3);
meinBody.append(e1);

const button = document.getElementById('button');

button.addEventListener('click', () =>  {
button.innerText = "Klicken";}

Wenn ich den button klicken, warum wird dann das click me nicht durch Klicken ersetzt?
Warum wird das meinBody.append(e1); nicht ausgeführt?

MFG

...zum Beitrag

JavaScript: Bei jedem Klick plus 1 in der resultArea?

Moin, ich habe einen Button gemacht und zwar:

<div onclick="play()" class="button">
  <button class="button1">
    Bam
  </button>
</div>

und eine Result Area

<div id="resultArea"></div>

Wie kann ich es machen, dass bei jedem Klick auf den Button in der Result Area 1 addiert wird (sowas wie ein Cookie-Klicker)? Also so eine Art Counter.

...zum Beitrag

Audio Tag Ton abspielen mit Button verknüpfen?

Hallo,

ich habe herausgefunden dass, es nicht mehr erlaubt ist das Ton automatisch abgespielt wird. (Dies bezüglich habe ich keinen Fix gefunden.)

Ich benutze das "Audio Attribut", und wenn ich mute eingebe funktioniert autoplay.

Nun, ist es möglich einen Button mit diesem Audio-Tag zu verknüpfen? Meine Idee wäre es den sehbaren Audio Tag mit "hidden" zu verstecken und mit Hilfe des "verknüpften Buttons" den Sound einzuschalten. Somit spielt der Sound synchron mit der Video ab, ohne auf Play klicken zu müssen.

Idee:

Ein Video mit einem Lautsprecher in der Mitte dahinter verbirgt sich das Audio Attribute mit "hidden" und wird sofort abgespielt durch autoplay, man klickt auf den Lautsprecher in der Mitte und man hat Sound.

...zum Beitrag

Javascript Button erstellen?

Hallo,

ich habe einen Button in HTML erstellt und möchte, dass dieser per Click, die Farbe eine Textelements in Schwarz ändert. Den Button habe ich erstellt, komme aber bei der Funktion nicht weiter, kann jemand helfen? Danke im Voraus.

<button type="button" onclick=document.getElementById('Liste').style.color = 'black'">Drück mich!</button>

Aktueller Stand

...zum Beitrag

Undisabled eines Buttons durch JavaScript?

Hallo,

ich möchte mit Hilfe von JavaScript einen Button, der vorher disabled war, wieder aktiviert, sodass er undisabled ist. Die funktioniert leider nicht und ich habe kein Ahnung an was es liegen könnte.

Mein HTML Code:

<body>

</body>

}

Mein Javascript Code:

let button = document.getElementbyid('button' );

function Test() {

button.disabled = false;

}

Weiß jemand an was es liegen könnte?

...zum Beitrag

Ton abspielen Javascript?

Hallo,

Ich möchte auf meiner html Seite einen Sound abspielen, wenn ein Button geklickt wird. Die Seite läuft über den Localhost.

html:

 <script src="script.js"></script>
    <script src="anmeldungj.js"></script>
   <script src="/socket.io/socket.io.js"></script>
    <audio id="ringtone" src="Sound2.mp3"></audio>

JavaScript

var RingSound;
var Sound = new Audio('Sound2.mp3')
RingSound = document.getElementById("ringtone");
...
function Send() {
    if (delay && messageInput.value.replace(/\s/g, "") != "") {
        delay = false;
        setTimeout(delayReset, 1000);
        socket.emit("send", messageInput.value);
        messageInput.value = "";
        RingSound.play();
        Sound.play();
    }
}

Der Pfad stimmt:

Es wird aber kein Sound abgespielt, ich habe es über zwei Varianten versucht.

Ich hoffe jemand kann mir helfen

Jannik

...zum Beitrag

Fehler bei JS innerHTML?

Hallo. Ich habe einen kleinen, großen Bug in meinem Code. Vorerst mein Ziel ist es, dass beim Click auf einen expand Button von Bootstrap ein Array als List Element lädt. Es soll für jeden Array Eintrag ein einzelner List Eintrag erstellt werden.

Mein Bug :

Beim Klicken auf den Expand Button finde ich folgende Fehlermeldung vor :

Wenn ich danach nochmal 2 mal auf den Button drücke um das Feld zu schließen und wieder zu öffnen passiert folgendes

Mein Code :

Danke für jede Hilfe. (Man könnte natürlich auch einfach die Funktion beim laden der Seite einmal ausführen, aber ich würde gerne den konkreten Fehler finden)

...zum Beitrag

PHP Variable mit Button über javascript an Popup übergeben?

Hallo,
ich habe eine mit PHP dynamisch erstellte Tabelle zum anzeigen von Anträgen. In jeder Zeile meiner Tabelle gibt es einen Button zum öffnen eines Popups. An dieses Popup soll die ID des jeweiligen Antrags übergeben werden um alle Daten auszulesen.

Wie kann ich es schaffen, dass in einer dynamischen Tabelle (alle Button Namen gleich) jeder Button unterschieden wird, oder erkannt wird welchen Button ich gedrückt habe? Und wie kann ich die Variable aus PHP über javascript an das Popup übergeben?

Ich würde mich über jede Hilfe freuen, versuche es nun schon seit Tagen, komme aber zu keinem Ergebnis

...zum Beitrag

javascript const in html ausgeben?

Hallo,

untenstehender Code wartet auf ein clickevent in meiner Tabelle und speichert dann die value des geklickten buttons in const dialogId. Das ganze möchte ich dann gerne in html ausgeben. Kann mir jemand helfen?

    const table = document.querySelector('#meineTabelle');
    table.addEventListener('click', event => {
      if (event.target.matches('.dialog-open')) {
        const dialogId = "Hello there";
        dialogOeffnen(dialogId);
      }
    });

...zum Beitrag

Hallo, wie kann ich einen Button in HTML/Javascript erstellen, der die Farbe ändert?

Ich möchte einen Button erstellen, der dann die Textfarbe von einer Liste ändert. Also die Begriffe in der Liste sind zuerst rot und sollen nach dem Klick auf einen Button schwarz werden. Geht das?

Ich habe die Schriftfarben mit CSS über eine ID gemacht:

diese 3 Punkte sollen über einen Klick auf einen Button schwarz werden.

...zum Beitrag

Html und Javascritp Gif ein und ausblenden lassen?

Ich möchte mit Html und Javascript ein Gif per button einfügen lassen. Ich habe schon einiges ausprobiert aber es funktioniert nicht, ich würde mich gerne über Hilfe freuen. (Die Aufgabe war es einen Kopfrechentrainer zu programmieren, als Zusatz ein Bild einfügen,...)

<html>
	<head>
		<title> Kopfrechentrainer Ultimate </title>
	</head>
	<body>
<script language=javascript>


{	var a;
	var b;
	var c;
	var d;
	var f=0;
	var r=0;
	var x;
}	
	function random()
	
{
	a=Math.floor(Math.random()*90)+10;
	document.rechnen.eingabe1.value=a;
	
	b=Math.floor(Math.random()*9)+1;
	document.rechnen.eingabe2.value=b;	
}


	function kontrolle()
{
	c=document.rechnen.vergleich.value;
	if(a*b==c){r++;document.rechnen.richtig.value=""+r}
	if(a*b!=c){f++;document.rechnen.falsch.value=""+f}


	if(r+f==50)
{
	if(r==0){alert('soos')}
	else if(0<r<=10){alert('saas')}
	else if(10<r<=20){alert('sees')}
	else if(20<r<=30){alert('siis')}
	else if(30<r<=40){alert('suus')}
	else if(40<r<=50){alert('fiif')}
}


}
	function zurück()
{
	document.rechnen.richtig.value=""
	document.rechnen.falsch.value=""
}


	function shutdown()
{
	window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ');
}


	function bka()
{
   	var audio = new Audio('sirene.mp3');
   	audio.play();


	document.getElementById("bkaf").style.display="none";
}


</script>








	
		<font color ="red"> <h2 align = center>  Kopfrechentrainer Ultimate </h2> </font>
		<br>
		<p align = center> <b>  
		Du kannst hier Multiplikationsaufgaben üben. <br>
		Beim Klicken auf den Button werden dir dir nacheinander 50 Aufgaben gestellt.
		</p> </b>
		<br>
		<br>
		<h1 align = center> Bereit? </h1>
		<br>
	<form name="rechnen">
		<input type=button value="Start" onclick=random()>
		<br> <br>
		<INPUT type=text name=eingabe1 value=""> *
		<INPUT type=text name=eingabe2 value=""> =
		<INPUT type=text name=vergleich value="">
		
			<input type=button value="Kontrolle" onclick=kontrolle()>
			<input type=button value="Zurücksetzen" onclick=zurück()>
				
		<br> <br> 
	<p align = center> <b>
		Richtig gelöst Falsch gelöst
	</b> 
		<br> <br>
		<INPUT type=text name=richtig value=""> 
		<INPUT type=text name=falsch value="">
	<br> <br>
		<input type=button value="shutdown" onclick=shutdown()>
	<br> <br>
		<input type=button value="BKA Modus" onclick=bka()>
		
		<audio autoplay>
 		 <source src="sirene.mp3" type="audio/mpeg">
		</audio>
		<br>
	<div id="bkaf">
	<img id="blaulicht" src="blaulicht.gif">	
	</div>


	</form>










	</body>
</html>

...zum Beitrag

Kann mir jemand bei der Funktion in JavaScript helfen?

// init

let count = 0;

// counter element

const counter = document.getElementById("value");

// increment function

function incrementCounter() {

count = Number(localStorage.getItem("count"));

counter.innerText = count;

localStorage.setItem("count", count + 1);

}

// event listener

window.onload = incrementCounter;

let zurücksetzen = document.getElementById("resetbutton");

function aufnull (){

zurücksetzen = localStorage.setItem("count", 0)

count = Number(localStorage.getItem("count"));

zurücksetzen.addEventListener("click", aufnull);

incrementCounter();

};

zurücksetzen.addEventListener("click", aufnull);

ZUR FRAGE: Ich baue einen Besucherzähler und möchte, dass sich der Wer wieder auf 0 zurücksetzt, wenn man auf den Button Reset drückt. Leider setzt es sich erst zurück, wenn man reset drückt und die seite anschließend wieder aktualisiert.
Kann mir jemand helfen und es erklären?

...zum Beitrag

Ist es möglich in php eine JavaScript Funktion auszulösen?

Ich muss eine JavaScript Funktion auslösen um auf Seite „2“ zu kommen die aber durch ein neu Ladens von php nach einen button clicks geschlossen wurde aber ich bekomme das irgendwie nicht hin obwohl ich allen regeln die ich im Internet lese befolge, weiß jemand was ich falsch mache?

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen