Audio in JS klappt nicht?

Moin,

in mein JS Code versuche ich ein Audio einzubetten. Jedoch wenn ich mein HTML Seite abspiele, höre ich garnichts. Kann mir jemand erklären woran das liegt bzw. was ich falsch mache?

Hier mein JS Code:

Bild zum Beitrag

also klar, da steht unten ein if, aber wenn ich das aus lasse würde das dennoch nicht funktionieren...

Danke im vorraus.

1 Antwort

Destranix

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

programmieren, Informatik, Programmiersprache

19.11.2023, 15:48

Du darfst nicht einfach so ein Audio abspielen, das verhindern moderne Browser üblicherweise.

Bau das so, dass das Audio bei einer Handlung des Nutzers (beispielsweise einem Klick auf einem Button) abgespielt wird, dann geht es vielleicht.

Brotherbro

Beitragsersteller

19.11.2023, 15:57

Vielen Dank für den Tipp! Problem hierbei ist, zwar würde das mit dem Button klappen und habe es auch so ausprobiert, aber es soll auch ohne Button funktionieren…

Destranix

19.11.2023, 16:09

@Brotherbro

Dann musst du das an eine andere Nutzeraktion koppeln.

Oder beispielsweise autoplay verwenden und das durch den Browser erlauben. Bzw. generell durch den Browser das Abspielen erlauben.

Ähnliche Beiträge

Gute KI um HTML-, CSS- und JS-Code für eine Webseite zu erstellen?

Hallo kennt jemand eine gute KI, um HTML-, CSS- und JavaScript-Code für eine Webseite zu erstellen?

...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

Welche programier Sprache für Audio Software?

Moin, ich würde gerne einen eigenen audio Software (Daw) coden. Die sollte sowohl auf Mac als auch Linux und Windows funktionieren. Noch hab ich davon aber keine Ahnung (nur HTML, CSS, Javascript Kenntnisse) und wollte daher mal fragen welche programierSprache bzw. Kombination aus Programmiersprachen ihr mir empfehlen könnt.

Schonmal im voraus vielen dank.

...zum Beitrag

programmieren wie weiter machen?

Hallo, ich habe jetzt seit einigen monaten an einer "App" in python gearbeited. Das Programm funktioniert soweit, aber halt leider nur in der Console. Ich hätte gerne eine GUI, ich kann auch ein bisschen JS, HTML und CSS. Ich weiß aber nicht wie man den code dann verbindet, also den JS code mit dem python code und bin mir auch nicht sicher ob JS die beste option ist.

Ich freue mich auf eure Antworten und bin dankbar für jede Hilfe.

...zum Beitrag

Ist HTML eine Programmiersprache? Argumente „Ja/Nein“?

Ich finde nein, weil es kein if, while oä. gibt außerdem kann HTML keine Variablen und keine Logischen Berechnungen!

HTML ist trotzdem ein guter Einstieg da man danach gut mit JS Weitermachen kann…

...zum Beitrag

HTML file permanent ändern?

Moin,

bin gerade dabei mir ein kleines Wiki aufzubauen und möchte die Page mit JS direkt bearbeiten, allerdings bleiben diese Changes logischerweise nicht für immer und hab 2Ideen wie ich die Änderungen permanent ändern kann. Dennoch wollte ich mal nach euren Ideen fragen ob ihr evlt eine bessere kennt.

Info: Die Seite soll fürs erste sowieso nur auf einem PC benutzt werden
Danke im voraus :)

...zum Beitrag

HTML, CSS, JS If-Statement wird erst nach Reload ausgeführt?

Hallo zusammen,

ich habe folgenden Code:

const radiomore = document.getElementById('qty-more');

const lower = document.getElementById('lower-section');

const more = document.getElementById('more-section');

if(radiomore.checked) {

lower.style.display = "none";

more.style.display = "initial";

} else {

lower.style.display = "initial";

more.style.display = "none";

}

Die Funktion wird allerdings erst ausgeführt, wenn ich die Seite manuell reloade.

Kennt jemand dafür eine Lösung?

Vorab Danke.

...zum Beitrag

Unterschied zwischen P5js und Js?

Moin,

In denn Sommerferien will ich vielleicht an einer Aktion wo wir ein Spiel programmieren und designen.

Ich lerne derzeit HTML und CSS und will danach mit Js anfangen. Bei diesem Workshop wird mit P5js programmiert,und man könnte auch selbst versuchen zu programmieren, sonst würde man halt nur die Hintergründe Figuren usw. Designen, undzwar auf Papier, und dann einscannen.

Jetzt will ich wissen was der Unterschied zwischen P5js und Js ist, da P5js ja auf js(JavaSkript) basiert.

Und wäre es gut zum lernen diesen Workshop eurer Meinung zu besuchen(3 tägig), und so erste Erfahrungen mit P5js zu Sammeln?

Danke für eure Meinung

...zum Beitrag

CSS keyframe Animation über JS mehrmals abspielen lassen?

Hallo, Wie ihr es schon aus der Frage entnehmen könnt, versuche ich eine Keyframe animation via JavaScript zu aktivieren. Jedoch habe ich das problem, dass sich diese animation nur einmal abspielen lässt. Könnt ihr mir bitte sagen woran das liegen könnte und mir dabei helfen den code zu vervollständigen? Hier der Code:

<head>
    <title>Beispiel</title>
    <style>
        #y {
            height: 50px;
            position: relative;
            top: 20;
            color: rgba(100, 100, 100, 0);
        }
        #y:active{
            animation: showEffect 0.5s;
        }
    @keyframes showEffect {
        0% {
            content: 'ICH';
            top: 20;
            color: rgba(100, 100, 100, 0);
        }
        20% {
            top: 10;
            color: rgba(100, 100, 100, 1);
        }
        100% {
            top: 0;
            color: rgba(100, 100, 100, 0);
        }
    }
    </style>
</head>
<body>
    <div id="container" align="center">
        <div id="y"></div>
        <br>
        <br>
        <input type="button" value="On" onclick="showEffect()">

        <script>
            function showEffect() {
                var on = 1;
                if (on == 1) {
                    document.getElementById('y').innerHTML = "A";
                    document.getElementById('y').style.animation = "showEffect 0.5s";
                    on = 0;
                } else {
                    document.getElementById('y').innerHTML = "B";
                    document.getElementById('y').style.animation = "showEffect 0.5s";
                    on = 1;
                }
            }
        </script>
    </div>
</body>

...zum Beitrag

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.

...zum Beitrag

Wie kann man den Code erst aktivieren, wenn er weiter unten steht?

Bei meiner Testseite habe ich Code im HTML & JS Format, der das Bild ab einem gewissen Scroll wert ändert, aber dieser Code befindet sich nicht am Anfang der Seite sondern weiter unten. Wenn ich bereits am Anfang der Seite scrolle, werden die Werte gezählt und wenn ich dann zum Code gelange, wird bereits das Endbild angezeigt. Wie kann ich sicherstellen, dass der Effekt erst eintritt wenn ich zum relevanten Abschnitt scrolle?

Html:

  <a href="#!" class="brand-logo">
    <img src="http://placekitten.com/200/200">
  </a>

Javascript:

$(document).ready(function() {
    $(window).on("scroll", function() {
      var scrollPos = $(this).scrollTop();
      if (scrollPos >= 1000) {
        // Bild - 1
        $(".brand-logo img").attr("src", "http://placekitten.com/300/300");
      } else if (scrollPos >= 500) {
        // Bild - 2
        $(".brand-logo img").attr("src", "http://placekitten.com/400/400");
      } else {
        // Standard - Bild
        $(".brand-logo img").attr("src", "http://placekitten.com/200/200");
      }
    });
  });

...zum Beitrag

Formular auslese Fehler VIA JS?

Hallo,

mein Name ist Nils. Ich habe jetzt mit dem Programmieren angefangen, HTML, CSS (sind ja keine richtigen Programmiersprachen) kann ich schon. Nun habe ich angefangen JS zu lernen. Ich wollte erst einmal eine einfache ToDO Webanwendung entwickeln. Also habe ich angefangen via JS ein Formular auszulesen und anzuzeigen. Nur leider klappt dies nicht. Woran liegt es?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<h1>ToDoListe</h1>


<dive id="addToDoDive">
    <form>
        <input type="text" id="ToDoName" placeholder="ToDo Name">
        <input type="button" id="ToDoSaveBtn" value="ToDo speichern" onclick="AddToDo">
    </form>


    <script>
        function AddToDo(){
        var listElement = document.getElementById("ToDoName").value;
        var ToDoName = console.log(listElement);
 }


    </script>
</dive>


<dive id="seeToDo">
</dive>
</body>
</html>

...zum Beitrag

Script funktioniert nur intern?

Mein Javascript-Code funktioniert einwandfrei, aber nur, wenn es in der Html-Datei eingebettet ist. Wenn ich es in die externe Js-Datei packe funktioniert es nicht, obwohl alles andere wie zB Dropdown-Menu und so weiter funktionieren. Weswegen könnte das sein?

...zum Beitrag

Warum wird diw HTML Index Dateie nicht im Browser angezeigt?

Hallo zusammen,

bin absoluter Neuling der kürzlich erst die Basics von Python gelernt hat und wollte nun mit Js und Node JS etwas arbeiten. Habe über Visual Studio einen Code geschrieben, aber wenn ich diesen in chrome Aufrufe wird nichts angezeigt. Kann mir da vielleicht wer helfen?
Danke im Voraus:)

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen