Audio Datei unter Bedingungen ausführen

echelon · 31. Dez 2023

Hallo Community,

ich bin absoluter Anfänger in Java.
Ich möchte gerne eine Audio Datei in einer HTML-Seite abspielen wenn eine bestimmte Bedingung zutrifft.
Der aktuelle Code den ich angefangen habe lautet wie folgt:

<script type="text/javascript">
var audio = new Audio('https://dasisteineurl/ping.wav');
audio.play();
if (data.destName = "Status") {
}
</script>

In der HTML Seite wird mit dem Wert {{data.destName}} gearbeitet. Die Inhalt sind dort variabel. Es soll die wav. Datei nur ausgeführt werden wenn dort der Wert "Status" lautet.

Ich bekomme es einfach nicht realisiert. Könnt' ihr mir helfen?

VG
Dennis

Oneixee5 · 31. Dez 2023

Java ist nicht JavaScript! https://www.ionos.de/digitalguide/websites/web-entwicklung/java-vs-javascript/

Java:

if (data.destName = "Status")

= ist eine Zuweisung
== oder === ist ein Vergleich
In einem IF muss man einen Vergleich verwenden, da IF das Ergebnis des Vergleichs auswertet.

JavaScript/Operatoren/Vergleichsoperatoren – SELFHTML-Wiki

wiki.selfhtml.org

M.L. · 31. Dez 2023

Firefox / Chrome /... haben Tools, die Syntaxfehler (*) in JavaScript aufstöbern helfen könnten. Weiterhin müsste der Code wohl so umgestellt werden:

Javascript:

if (data.destName = "Status") {  //<- Link zu Selfhtml beachten
var audio = new Audio('[URL='https://dasisteineurl/ping.wav%27);']https://dasisteineurl/ping.wav');[/URL]
audio.play();
}

(*) nicht Logikfehler

echelon · 31. Dez 2023

Hallo,

danke soweit erstmal.
Wie müsste denn mein Code aussehen? Ich finde es wahnsinnig kompliziert.

Ich möchte einfach nur erwirken das diese Sound-Datei abgespielt wird, wenn der Wert "Status" lautet.

<script type="text/javascript">
if (data.destName == "Status") {
var audio = new Audio('https://test.de/ping.wav');
audio.play();
}
</script>

echelon · 31. Dez 2023

M.L. hat gesagt.:
Firefox / Chrome /... haben Tools, die Syntaxfehler (*) in JavaScript aufstöbern helfen könnten. Weiterhin müsste der Code wohl so umgestellt werden:

Javascript:

if (data.destName = "Status") { //<- Link zu Selfhtml beachten var audio = new Audio('[URL='https://dasisteineurl/ping.wav%27);']https://dasisteineurl/ping.wav');[/URL] audio.play(); }

(*) nicht Logikfehler

Hallo,

also gar nicht mit <script> in HTML arbeiten sondern Deinen Code genau so einfügen?

M.L. · 31. Dez 2023

echelon hat gesagt.:
Sound-Datei abgespielt wird, wenn der Wert "Status"

Solche Lösungen sind wohl auch browser-abhängig. Ein mit einer KI generierter Vorschlag (mit <script>-Tag):

Code:

<html>
<head>
<title>Ungerade Datums-Audio</title>
</head>
<body>
<audio controls>
<source src="Musikstueck.mp3" type="audio/mpeg">  //passenden Namen einsetzen
</audio>
<script>
// Prüfen, ob das aktuelle Datum ungerade ist, auch mangels Zugriff auf "data.destName"
var heute = new Date();
var istUngleich = (heute.getDate() % 2 !== 0);

// Audiodatei abspielen, wenn das aktuelle Datum ungerade ist
if (istUngleich) {
  document.querySelector("audio").play();
}
</script>
</body>
</html>

echelon · 1. Jan 2024

Hallo,

ich bekomme es einfach nicht hin. Die data.destName ist kein Datum. Daran kann ich es nicht fest machen.
Es kommen dort variabel nur Buchstaben vor. ALso Beispiel: Status, FN, 1_TX_2, ABC, etc.

Mit nachfolgendem Code klappt es leider auch nicht:

Javascript:

var quelle = document.getElementById('destName').innerText;
if (quelle.includes("Status")) {var audio = new Audio('https://xxx.de/ping.wav');
audio.play();
}

Oneixee5 · 1. Jan 2024

Das sollte doch funktionieren, wenn "data.destName" wirklich "Status" enthält. Zur Sicherheit kann man das auch noch ausgeben.

Javascript:

<script type="text/javascript">
// Debug Output zur Kontrolle
console.log(data.destName);
// oder
alert(data.destName);

if (data.destName == "Status") {
    new Audio('https://dasisteineurl/ping.wav').play();
}
</script>

Du kannst ja mal etwas mehr Code zeigen, z.B. wie du "data.destName" mit einem Wert belegst. Sollte sich "data.destName" zu Laufzeit ändern, dann wird das so nicht funktionieren.

echelon · 1. Jan 2024

Mhm. Okay. Der Parameter "data.destName" ändert sich fortlaufend.
Die Webseite wird einmalig geladen und dann ändern sich die Inhalte in {{data.destName}} fortlaufend.

Wenn es noch einen anderen Ansatz gibt, gerne her damit 🙂
Es würde auch genügen wenn wie unten im Code hinter jedem z. Bsp.

}
.status-2, .status-8004 {

die .wav aufgerufen werden kann. Das ist dann zwar 9 x der Code... aber besser als gar nicht ;-)
Das ganze ist leider Teil eines Programmes und ich habe keine Mögliochkeit den Entwickler etc. zu Fragen.

Anbei der komplette HTML-Code der Seite:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="de">
<head>
  <style>
.status-0{
border-left: none !important;
border-top: solid 45px greenyellow !important;
}
.status-1, .status-8003 {
border-left: none !important;
border-top: solid 45px dodgerblue !important;
}
.status-2, .status-8004 {
border-left: none !important;
border-top: solid 45px darkgreen !important;
}
.status-3, .status-8005 {
border-left: none !important;
border-top: solid 45px red !important;
}
.status-4, .status-8006 {
border-left: none !important;
border-top: solid 45px yellow !important;
}
.status-5, .status-8007 {
border-left: none !important;
border-top: solid 45px seashell !important;
}
.status-6, .status-8008 {
border-left: none !important;
border-top: solid 45px darkgray !important;
}
.status-7, .status-8009 {
border-left: none !important;
border-top: solid 45px lawngreen !important;
}
.status-8, .status-800A {
border-left: none !important;
border-top: solid 45px cyan !important;
}
.status-9, .status-800B {
border-left: none !important;
border-top: solid 45px white !important;
}
.status-875A {
border-left: none !important;
border-top: solid 45px white !important;
}
  </style>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="color: rgb(0, 0, 0);" alink="#ee0000" link="#0000ee"
 vlink="#551a8b">
<div style="background-color: rgb(0, 0, 0);" class="container">
<div style="width: 340px; height: 1808px;" class="row">
<table
 style="text-align: left; background-color: rgb(0, 0, 0); width: 350px; height: 1576px;"
 id="data" class="table">
  <thead style="font-family: Yu Gothic;">
  </thead> <tbody>
    <tr ng-repeat="data in datas | bytypes: typefilter"
 class="{{data.style}}">
      <td
 style="text-align: center; vertical-align: middle; font-size: 10pt; width: 342px; height: 100%; white-space: nowrap; background-color: rgb(0, 0, 0);"
 class="Rufname"><big style="font-family: Yu Gothic;"><big><span
 style="color: rgb(255, 255, 255);"><big><big><big><big><span
 style="font-weight: bold;"></span></big></big></big></big></span></big></big>
      <div
 style="text-align: left; font-family: Arial Black; width: 340px; height: 1542px; background-color: rgb(0, 0, 0);"><big><big><span
 style="color: rgb(255, 255, 255);"><big><big><big><big><span
 style="font-weight: bold;"></span><big style="font-weight: bold;"><big><small><span
 class=""></span></small></big></big></big></big></big></big></span></big></big><br>
      <div style="text-align: center; background-color: rgb(0, 0, 0);"><big><span
 style="color: rgb(255, 255, 255);"><big><big><big><big><big
 style="font-weight: bold;"><big><small><span class=""><small>
      <br>
      <br>
      <br>
      <span style="color: rgb(255, 255, 255);">{{data.srcName}}</span></small></span></small></big></big></big></big></big></big></span></big><small
 style="color: rgb(255, 255, 255);"><small><br>
      </small></small></div>
      <small style="color: rgb(255, 255, 255);"><small><small>
      </small></small></small>
      <div
 style="text-align: center; color: rgb(255, 255, 255); background-color: rgb(0, 0, 0);"><big
 style="font-weight: bold;"><big><big><big><big>&raquo;</big></big></big></big></big><big><big><span
 style="font-weight: bold;"></span>
      <big><big><big><big><small>{{data.message}}</small></big></big></big></big></big></big><small><small><br>
      </small></small></div>
      <big style="color: rgb(255, 255, 255);"><big><big><big><big>
      </big></big></big></big></big><big
 style="color: rgb(255, 255, 255);"><big><big><big><big><small
 id="destName"><br>
      </small></big></big></big></big></big>
      <div
 style="text-align: center; color: rgb(255, 255, 255); background-color: rgb(0, 0, 0);"><big><big><big><big><big><small
 id="destName">{{data.destName}}</small></big></big></big></big></big><br>
      </div>
      <div
 style="text-align: center; color: rgb(255, 255, 255); background-color: rgb(3, 0, 0);"><big><big><big><big><big><small>{{data.timestamp
| date: 'HH:mm'}}</small></big></big></big></big></big><big><big><span
 =""></span></big></big><br>
      <big><big><span =""> </span></big></big></div>
      </div>
      <big style="color: rgb(255, 255, 255);"><big><br>
      <big><big><big><big><small>
      </small></big></big></big></big></big></big></td>
    </tr>
  </tbody>
</table>
</div>
<div id="filter" class="navbar-default">
<div style="text-align: left; font-family: Arial Black;"> </div>
</div>
<script type="text/javascript">
if (data.destName = "Status") {
    new Audio('https://test.de/ping.wav').play();
}
</script>
</body>
</html>

echelon · 1. Jan 2024

Ergänzend dazu... es gibt noch eine app.js-Datei.
Hier sehen die Parameter wie folgt aus:

Javascript:

 }

    function parseStatus(data) {
        data.style = "status-" + data.status;
        data.readableType = "Status";
        data.message = data.statusText;
        data.dur = "Stat";
    data.destName = "Status";
        data.timestamp = window.ToJavaScriptDate(data.ts);

        $scope.$apply(function () {
            $scope.datas.unshift(data);
        });
    }

mrBrown · 1. Jan 2024

Benutzt du irgendein JS-Framework, Angular vielleicht?

echelon · 1. Jan 2024

Hey,

ja... es gibt eine Datei "angular.min.js" und "angular-route.min.js"

Oneixee5 · 2. Jan 2024

... und warum fügst du die Zeile new Audio('https://dasisteineurl/ping.wav').play(); nicht einfach in parseStatus ein?

echelon · 2. Jan 2024

... weil es so auch nicht funktioniert. Er spielt dann nach wie vor nur die .wav beim erstmaligen laden der Webseite ab, nicht aber bei Veränderung.

Oneixee5 · 2. Jan 2024

echelon hat gesagt.:
... weil es so auch nicht funktioniert. Er spielt dann nach wie vor nur die .wav beim erstmaligen laden der Webseite ab, nicht aber bei Veränderung.

der Wert wird nie verändert: data.destName = "Status"; er wird immer auf den gleichen konstanten Wert gesetzt.

Marinek · 2. Jan 2024

Hi 😉

Ich bin nicht so ein Java Script experte... Aber irgentwie fehlt mir auch ein Event auf das reagiert wird, damit der Sound abgespielt werden kann.

So wie das jetzt implementiert ist, wird das Script einmalig beim Öffnen der Seite wiedergegeben. Es funktioniert, wie implementiert.

echelon · 2. Jan 2024

Hey,
anbei der Code der app.js. Demnach ist das Event:

websocket.addEventListener("message", function (event) {
onMessage(event);

Javascript:

app.controller('TetraCtrlLive', function ($scope) {
    $scope.typefilter = {
        sds: true,
        status: true,
        call: true
    };
    $scope.datas = [];
    var config = getConfig();
    var websocket = new WebSocket(wsUri + "?MaxAlter=" + config.age);
    websocket.addEventListener("open", function (event) {
        onOpen(event);
    });
    websocket.addEventListener("close", function (event) {
        onClose(event);
    });
    websocket.addEventListener("message", function (event) {
        onMessage(event);
    });
    websocket.addEventListener("error", function (event) {
        onError(event);
    });

    $scope.toggleFilter = function (event, value) {
        if ($(event.currentTarget).hasClass("checked")) {
            $(event.currentTarget).removeClass("checked");
            $(event.currentTarget).addClass("unchecked");
        }
        else {
            $(event.currentTarget).addClass("checked");
            $(event.currentTarget).removeClass("unchecked");
        }
        setTimeout(function () {
            $scope.$apply(function () {
                switch (value) {
                    case 'sds':
                        $scope.typefilter.sds = !$scope.typefilter.sds;
                        break;
                    case 'call':
                        $scope.typefilter.call = !$scope.typefilter.call;
                        break;
                    case 'status':
                        $scope.typefilter.status = !$scope.typefilter.status;
                        break;
                }
            });
        }, 50);

    }

    function onOpen(evt) {
        console.log("Connected. (" + evt + ")");
    }

    function onClose(evt) {
        console.log("Disconnected. (" + evt + ")");
    }

    function onError(evt) {
        console.log("Error. (" + evt + ")");
    }

    function onMessage(evt) {
        var data = JSON.parse(evt.data);
        data.style = "";
        switch (data.type) {
            case 'call':
                parseCall(data);
                break;
            case 'status':
                parseStatus(data);
                break;
            case 'pos':
                parsePos(data);
                break;
            case 'sds':
                parseSds(data);
                break;
            case 'devupd':
                break;
            case 'radio':
                break;
            default:
                console.error("Unexpected message recieved");
                break;
        }
    }

    function parseStatus(data) {
        data.style = "status-" + data.status;
        data.readableType = "Status";
        data.message = data.statusText;
        data.dur = "Stat";
    data.destName = "Status";
        data.timestamp = window.ToJavaScriptDate(data.ts);
var audio = new Audio('https://xxx.de/ping.wav');
audio.play();
    

        $scope.$apply(function () {
            $scope.datas.unshift(data);
        });
    }

VG
Dennis

echelon · 6. Jan 2024

Hallo,

kann mir denn keiner diesbezüglich weiterhelfen?
Mir ist unklar aus welchem Grund die *wav nur beim laden der Seite abgespielt wird.

VG
Dennis

Marinek · 6. Jan 2024

Wie oft wird die Funktion parseStatus() aufgerufen?

Kannst du da eine Consolen Ausgabe hinzufügen und das prüfen.

echelon · 11. Feb 2024

Hallo,

das Problem hat sich gelöst.
Der Code an sich funktioniert.

Leider nicht im mobilen Browser (Android), da dort die autmatischen Wiedergaben verhindert werden.
Dies hatte ich beim Testen nicht bemerkt.
Sofern hier noch jemand einen Tipp hat mit dem man dies umgehen kann, bin ich dankbar.

Vielen Dank für die Hilfe an Alle.

VG
Dennis

Audio Datei unter Bedingungen ausführen

Mitglied

Top Contributor

Top Contributor

Mitglied

Mitglied

Top Contributor

Mitglied

Top Contributor

Mitglied

Mitglied

Super-Moderator

Mitglied

Top Contributor

Mitglied

Top Contributor

Bekanntes Mitglied

Mitglied

Mitglied

Bekanntes Mitglied

Mitglied

Ähnliche Themen