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:

Bild zum Beitrag

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

Ich hoffe jemand kann mir helfen

Jannik

18.08.2023, 13:37

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

FritzboxCable

18.08.2023, 13:45

Du sagst das Html Element „ringsound“ soll play ausführen aber das geht nicht, du musst sagen bei onclick auf ringsound Soll die Audiodatei von Sound play ausführen und im idealfall zuerst resetten falls es ein sound ist der oft hintereinander abgespielt wird ansonsten wird es komisch klingen.

Anmeldung.js hat einen tippfehler im Namen und deine Projekt Struktur ist quatsch so verlierst du nach 2 tagen den überblick.
Sortiere alle assets, teile infex.css auf in mehrere dateien, benutze englische Standards bei den Namen.

Vielleicht solltest du noch nicht an socket.io denken wenn du so wenig erfahrung hast.

Hier ein Beispiel

<button id="PlayMusic"> Musik </button>
<script>
const audio = new Audio('./audio_file.mp3');
const PlayMusic = document.querySelector("#PlayMusic");

PlayMusic.addEventListener("click",()=>{
audio.pause();
audio.currentTime = 0;
audio.play();
})
</script>

Woher ich das weiß:eigene Erfahrung

FritzboxCable

18.08.2023, 13:47

Vorallem hat ringsound auch kein const let oder var davor. Es steht nur ringsound = …

Jannik947

Fragesteller

18.08.2023, 13:55

@FritzboxCable

Das ist weiteroben definiert

Jannik947

Fragesteller

18.08.2023, 13:58

Vielen Dank, das sollte funktionieren.

FritzboxCable

18.08.2023, 17:02

@Jannik947

Aber erstelle dir wirklich einen ordner namens assets, und darin unterordner namens css, js, images, audios, videos etc.

dann musst du zwar wenn du in index.html bist so zugreifen

von css

body{
background : url("../images/bg.png");

}
also mit ./ aktueller ordner

mit ../ gehst du einen raus

../../ zwei Ordner raus.

Jannik947

Fragesteller

18.08.2023, 19:18

@FritzboxCable

Hab ich schon gemacht. Danke für den Tipp :)

Destranix

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Programmieren & Softwareentwicklung

18.08.2023, 13:28

Versuch mal

<audio id="ringtone" >
    <source src="Sound2.mp3" />
</audio>

Wenn das auch nicht geht, schau mal, ob du einen Fehler in der konsole erhälst (beispielsweise, dass der Pfad nicht gefunden wird.)

Jannik947

Fragesteller

18.08.2023, 13:37

Vielen Dank für deine Antwort, hat leider nicht geklappt die Browser Konsole ist leer. Ich habe von den Quellen noch ein Bild eingefügt. Es gibt sonst nur 6 Benachrichtigungen, die haben aber nicht viel damit zu tuen. Liegt es am Localhost ?

Destranix

18.08.2023, 13:43

@Jannik947

Da fehlt doch die Sound-Datei im zweitem Screenshot.

Hallo Leute,

Zurzeit beschäftige ich mich mit Javascript und möchte,dass bei einer Seite die Audiodatei automatisch anfängt zu spielen,sobald ich die seite öffne.

Das ist mein Javascript Code:

function ton() {

var audio=document.getElementById("audio");

audio.innerHTML='<audio autoplay><source src="WIN_20211211_16_26_17_Pro.mp4" type="audio/mpeg"/></audio>';

}

</script>

...zur Frage

Javascript: Audio automatisch abspielen?

Hallo

wie schaffe ich es, dass die audio datei versteckt und automatisch läuft ohne das der Benutzer auf play klicken muss?

Danke

</audio>

Ich habe es mit dem hier probiert funktioniert allerdings nicht

...zur Frage

HTML: Start-/Stop-Button für eine mp3-Datei?

Moin,

ich würde gerne meine drei HTML-Buttons mit den Sounds "null", "eins" und "zwei" so umfunktionieren, sodass sie beim zweiten Mal daraufklicken den Sound aufhören zu spielen. Also beim ersten Mal klicken Start und beim zweiten Mal klicken Sound-Stop.

Es wäre cool, wenn Ihr das direkt in mein Skript schreiben würdet. 😀

MfG

Tim

<!DOCTYPE html>
<html>
  <head>
    <style>
      nav#nav1 {
        margin-top: 48px;
      }

      nav#nav1 > a {
        background: #B9E1FF;
        color: #000;
        padding: 20px;
        text-decoration: none;
        border-radius: 10px;
        font-family: "Arial Black", Gadget, sans-serif;
      }

      nav#nav1 > a:hover {
        background: #BBEA00;
      }

      nav#nav1 > a:active {
        background: #EEFFA8;
      }
    </style>
    <script>
      var null = new Audio();
      null.src = 'null.mp3';
    </script>
    <script>
      var eins = new Audio();
      eins.src = 'eins.mp3';
    </script>
    <script>
      var zwei = new Audio();
      zwei.src = 'zwei.mp3';
    </script>
  </head>
  <body>
    <nav id="nav1">
      <a href="#" onmousedown="null.play()">Sound 0</a>
      <a href="#" onmousedown="eins.play()">Sound 1</a>
      <a href="#" onmousedown="zwei.play()">Sound 2</a>
    </nav>
    </script>
  </body>
</html>

...zur Frage

HTML mehrere onclick?

<script>function play() {var audio = document.getElementById("sd_00143");audio.play();}</script><a href="#A1Acura RSX SH_"><img src="bilder/NFSU2/A1Acura RSX SH_.jpg" id="A1Acura RSX SH_" width="220" height="120" onclick="play()"><audio id="sd_00143" src="sd_00143.mp3"></audio></a>

<script>function play() {var audio = document.getElementById("Sexy Beam");audio.play();}</script><a href="#B4Audi A3 nude tits_"><img src="bilder/NFSU2/B4Audi A3 nude tits_.jpg" id="B4Audi A3 nude tits_" width="220" height="120" onclick="play()"><audio id="Sexy Beam" src="Sexy Beam.wav"></audio></a>

Beide Bilder spielen beim Anklicken Sexy Beam.wav. Kann jemand die multiplen Audiodateiaufrufe in einer einzigen HTML-Seite korrigieren?

...zur Frage

Java script onklick button?

Ich möchte ein Javascript in meine Website einbauen um die Website übersetzen zu können. Diser Stadard Google translate Code sieht jedoch sehr unschön aus und ich wollte fragen, ob/wie es geht einen Knopf einzubauen, der einen Alert oder ein Popup auslöst, indem dieses Script ausgeführt wird und man die Sprache wählen kann.

Script:

<div id="google_translate_element"></div>
            <script type="text/javascript">
                function googleTranslateElementInit() {
                    new google.translate.TranslateElement(
                        { pageLanguage: 'de' },
                        'google_translate_element'
                    );
            }
            </script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

P.S. Falls es eine andere Möglichkeit gibt die Seite zu übersetzen (es handelt sich um einen Blog für mein anstehendes Auslandsjahr), also nur Von Deutsch zu Englisch notwendig, dass es Familie UND Gastfamilie lesen können bin ich gerne offen dafür

Danke schon einmal im Vorraus.

...zur Frage

HTML input in JavaScript-Variable?

Wenn ich in HTML ein form ausfülle und abschicke wie bekomme ich dann das eingegeben im Input in eine JavaScript Variable. Habe provisorisch mal das hier gemacht und komme nicht weiter. Danke für eure Hilfe :)

<!DOCTYPE html>

<html>

<head>

<title>Input to Variable</title>

var input = "Wie bekomme ich den eingegebenen input hier hin?"

</script>

</head>

<body>

<button>Submit</button>

</body>

</html>

...zur Frage

Wie kann ich mit Javascript einen zufälligen Sound abspielen?

Ich möchte einen zufälligen Sound aus einem Array abspielen, wenn man auf die Website kommt.

...zur Frage

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?

...zur Frage

JavaScript funktioniert nicht in externer Datei?

Hallo,

ich bin dabei Javascript zu lernen und komme irgendwie mit der externen Datei von Javascript nicht klar. Das einzige, was ich machen möchte ist, die aktuelle Uhrzeit anzeigen zu lassen. in der HTML-Datei selbst funktioniert das, aber nicht in der externen Datei. Muss ich vielleicht noch irgendetwas beachten, was ich nicht gemacht habe? Die einzelnen Bereiche schiebe ich unten rein.

HTML:

<html>
  <head>
    <title>Seitentitel</title>
    <meta charset="UTF-8">
    <link href="Design.css" rel="stylesheet">
    <script src="Programm.js"></script>
  </head>
  <body>
    <p id="az">Aktuelle Uhreit<p>
  </body>
</html>

CSS:

html {
  text-align: center;
  background-color: green;
}

p {
  font-size: 30pt;
  margin: 22%;
  color: darkred;
}

JavaScript:

var timer = document.getElementById("az");
document.write(timer);
var zeit = new Date();
var std = zeit.getHours();
var min = zeit.getMinutes();
var sec = zeit.getSeconds();
var ms = zeit.getMilliseconds();
zeit = std + ":" + min + ":" + sec + "." + ms;
timer.innerHTML = "zeit";

...zur Frage

Könnt ihr mir bei folgendem JavaScript Problem helfen?

programmieren ist mein jüngstes und schwierigstes hobby, ich würd mich freuen wenn ich dieses Problem lösen könnte. Ich möchte, dass jeder Name, der im Eingabefeld eingegeben wird unten erscheint.

danke im voraus.

https://jsfiddle.net/6wcf9j5e/

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form class="guestList" action="index.html" method="post">
      <label>Your Name: </label>
      <input type="text" name="" value="..." id="nameInput;" />
      <input type="submit" name="" value="submit" onclick="pushArray();"/>
    </form>
    <div id="addName"></div>
    <script type="text/javascript" src="dailyrepead.js">
    </script>
  </body>
</html>

JS:

var guestList = [];
var count = document.getElementById("nameInput");
function pushArray() {
  guestList.push(count);
  document.getElementById("addName").innerHTML += guestList[count] +"<br>";
}

...zur Frage

Html mp3 datei aus ordner auslesen und abspielen

Hallo ich möchte gerne mit einem HTML oder PHP script mp3 dateien aus einem bestimmten ordner auslesen und abspielen lassen.

z.b: Im ordner Music befindet sich die datei Play.mp3 ,diese soll abgespielt werden auch wenn sie in keinen html audio playlist oder ähnliches aufgeführt ist.

...zur Frage

Warum wird alert nicht ausgeführt (Javascript)?

Hi ich Frage mich warum mein alert nicht ausgeführt wird wenn ich auf den buten klicke ...könnte jemand der Javascript beherrscht mir den Fehler sagen ?

Code:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

alert ("willkommen hier");

</script>

var beschreibung = "super,mega,hammer";

var alter= 25;

var vergeben = false;

var name = "boy withb the spoon";

var leer = null;

document.write(name + "ist" + beschreibung + alter + "und sein status ist vergeben " + vergeben);

</script>

//diese variable ist sehr komplieziert

function geklickt(){

alert ("willkommen hier zum zweiten mal");

}

</script>

<form>

</form>

</body>

</html>

...zur Frage

JS script richtig importieren?

Wenn ich meine JS Skripte in meinem HTML Dokument schreibe funktionieren die Super. Wenn ich diese dann aber in den Header Schreibe

 <script type="text/javascript" src="scripts/JavaScript.js"></script>

Dann geht alles was mit dem Script zutun hat nicht.

...zur Frage

Wie kann ich mit JavaScript ALLE aktuell laufenden Geräusche beenden?

Wenn eine neue Audio startet sollen erst alle noch laufenden Audios beendet werden, damit man immer nur eine hört und nicht mehrere. Mein Code sieht zurzeit so aus:

function play1() {
    var audio = new Audio('Music/1.mp3');
    audio.play();
    audio.addEventListener('ended', (event) => {
        play2();
    });
}

function play2() {
    var audio = new Audio('../002/Music/1.mp3');
    audio.play();
    audio.addEventListener('ended', (event) => {
    });
}

und es gibt jeweils 1 Knopf für play1 und play2 zum starten.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen