Wie kann ich den HTML Audio Player-Pfad korrigieren?

Hier ein Snippet der JSON-Daten:

"AllSongs": [{
  "Interpret": "2Raumwohnung",
  "Title": "Mit viel Glück",
  "path": "D:/Songs/2Raumwohnung/2Raumwohnung - Mit viel Glück.mp3"
}, {
  "Interpret": "Angelo Branduardi & Teresa Salgueiro",
  "Title": "nelle paludi di venezia francesco si fermò per pregare e tutto tacque",
  "path": "D:/Songs/Angelo Branduardi & Teresa Salgueiro/Angelo Branduardi & Teresa Salgueiro - nelle paludi di venezia francesco si fermò per pregare e tutto tacque.mp3"
}]

Mit solchen Zuweisungen

AudioPlayer.src = DB.AllSongs[0].path;

lade ich das Lied.

Dies funktioniert mit allen Pfaden perfekt, auch denen mit Leerzeichen im Pfad.

Aber mit Sonderzeichen: äöü, französische Zeichen, etc. wird der Pfad nicht gefunden. Das Lied lädt nicht. Der Debugger wirft einen Fehler auf GET.

Auch im Debugger wird schon mit dem "?" angedeutet, dass hier Handlungsbedarf ist.

Bild zum Beitrag

Plan A) hier wäre ein Tipp hilfreich.

Beim Einlesen muss ich mich wohl um diese Zeichen kümmern. Aber wie?

Muss ich nur am Header etwas ergänzen?

<html lang="de-DE">
  <head>
    <meta charset="utf-8">

Plan B) Ich benenne alles um, sodass die Pfade direkt ISO sind. Das wäre aber bitter, wegen der Lesbarkeit vieler Titel, besonders anderer Sprachen.

Die Google-Ergebnisse haben mich bislang nicht weitergebracht. ☹

2 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

Fridleif

02.04.2023, 12:18

Hey,

liegen die Daten in einer Datei? Dann guck mal z.B. in Notepad++ ob die Datei auch entsprechend in UTF-8 kodiert ist.

https://notepad-plus-plus.org/downloads/

Ich wünsch Dir viel Erfolg mit Deinem Projekt!

IchMalWiederXY

Beitragsersteller

02.04.2023, 12:21

Danke. Eigentlich funktionert schon alles. Endlich ein Player, der dies macht was ich will ;-)
Nur diese -Sonder- Pfade wollen noch nicht. Ich prüfe dies gleich mal.

IchMalWiederXY

Beitragsersteller

02.04.2023, 12:30

@IchMalWiederXY

habe in NotePad++ "Convert to UFT-8" durchgeführt. Jetzt geht es :-))))

Fridleif

02.04.2023, 12:31

@IchMalWiederXY

Na sehr schön - ein träumchen. Ich freu mich, dass ich helfen konnte.

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, JavaScript

02.04.2023, 12:32

Stelle zum einen einmal sicher, dass die JSON-Datei selbst eine UTF-8-Zeichenkodierung nutzt und gib zum anderen via meta-Tag UTF-8 als Zeichenkodierung für deine Webseite an.

Für Ersteres sollte es genügen, die Datei in einem Texteditor zu öffnen und neu abzuspeichern. Im Speicherdialog findest du eine Option, in der du die Kodierung festlegen kannst.

Leerzeichen im URL-Pfad lassen sich übrigens via %20 maskieren.

Beispiel:

https://some-page.de/file%20with%20spaces%20in%20name.txt

IchMalWiederXY

Beitragsersteller

02.04.2023, 12:37

Werde mich in Zukunft erst um die richtigen Formate, dann die Funktion kümmern.
Habe in NotePad++ "Convert to UFT-8" durchgeführt. Jetzt geht es :-))))

Ähnliche Beiträge

Wann kann man JavaScript gut?

Also, ich kann von APIs Daten abrufen. Voice Recorder, Wetter Webseite etc.

Slideshows kann ich auch programmieren. Ist auch einfach. Node.js kann ich nicht und json habe ich noch nicht ganz verstanden.

HTML und CSS beherrsche ich richtig gut.

Wann würdet ihr sagen, dass man gut JavaScript Code schreiben kann?

...zum Beitrag

Wird HTMX JavaScript nutzlos machen?

...zum Beitrag

Schnell Geld mit Html und Css?

Hallo ich habe gute Html und css kenntnisse ich muss schnell an geld kommen was würdet ihr mir empfehlen ich rede nicht von tausenden euros sondern ein bisschen

...zum Beitrag

Welche Programmiersprache soll ich lernen?

Ich möchte entweder C# oder Javascript lernen.

C# programmieren finde ich persönlich viel interessanter als Javascript aber ich weiß, dass mir Javascript mehr bringen würde, wenn ich mich da vertiefe.

Was soll ich also lernen?

...zum Beitrag

Wordpress oder selbst programmieren?

Ich hatte eine Diskussion mit einem Bekannten, der selbstständiger Webdesigner in Deutschland ist.

Ich meinte, dass professionelle Webdesigner bei der Erstellung von Webseiten auf Baukastensysteme oder Programme wie Wordpress verzichten und Seiten von Null selbst programmieren. Wordpress kann meiner Meinung nach jeder Laie relativ schnell selbst erlernen und ist nicht kompliziert.

Daraufhin meinte er, dass Wordpress auch sehr anspruchsvoll bzgl. Updates von Plugins und vielen anderen Punkten ist und man dafür viel Vorwissen braucht. Und man bräuchte immer Dienstleister / Freelancer wie ihn, die Wordpress-Support gegen Geld anbieten oder eben Webseiten via Wordpress erstellen.

Er meinte, dass Wordpress Zeit sparen würde und trotzdem Geld von Kunden einbringen würde.

Wer von uns beiden hat jetzt Recht ?

...zum Beitrag

wie fix ich diese fehler?

Fehler:Access to fetch at 'file:///C:/Users/justin/Documents/dev/music/app/desktop/windows/bin/songs_en.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-app.Fehler nachvollziehenAI
index.html:557 
     
     
    GET file:///C:/Users/justin/Documents/dev/music/app/desktop/windows/bin/songs_en.json net::ERR_FAILED
loadSongs @ index.html:557
MusicPlayer @ index.html:549
(anonym) @ index.html:692Fehler nachvollziehenAI
index.html:561 Error loading songs: TypeError: Failed to fetch
  at MusicPlayer.loadSongs (index.html:557:36)
  at new MusicPlayer (index.html:549:14)
  at index.html:692:16

Der quellcode ist zulang. hier ist der link zu pastebin, werde es löschen nach dem meine frage beantwortet wurde.
https://pastebin.com/2jiMawCv
vielen dank im voraus!

...zum Beitrag

An die Programmierer?

Wie lange würdet ihr eurer Meinung nach brauchen um so eine Seite wie Zalando zu programmieren und mit welchen Programmiersprachen?

...zum Beitrag

HTML/JS Icon Link lädt zu lange?

Hey,

ich lade meine Icons über diesen Link:

<script src="https://kit.fontawesome.com/03a9efeaa3.js" crossorigin="anonymous"></script>

Dieser Link ist im head. Mein anderer script-Tag ist im body und lautet so:

<script type="module" src="./JS/main.js"></script>

Nun habe ich das Problem, dass wenn ich meine Seite neu lade, es lange lädt und dann abstürzt.

Die Konsolenausgabe sieht so aus:

Was kann ich tun?

...zum Beitrag

Wieso funktioniert meine "Browser Extension" nicht auf dieser Seite?

Mir ist unter Linux aufgefallen das ich gar nicht den Auto-Scroll von Windows habe in zb. Google Chrome wenn man auf das Mauspad klickt, nutze ich gerne und dachte mir als Challenge ohne Chat Gpt dass ich mal schnell probieren könnte ein eigenes zu programmieren.

Ich weiß da gibt es fertige Software und Extension's, die laufen ohne Probleme und Ressourcen sparender wahrscheinlich.

Hab das erst in einer Html Datei (Extension in "") gemacht zum testen dann in anderen Websites den JS Code in eine Konsole eingefügt und es funktioniert eigentlich ganz gut.

Das Problem ist das ich nicht verstehe wieso er nicht hier funktioniert https://www.tennon.io/ , mir fällt beim inspizieren nichts auf und es scheint mit Next JS umgesetzt zu sein.

<!DOCTYPE html>
<html lang="de">


<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Auto Scroll Extension</title>
    <style>
        html {
            min-width: 100%;
        }
    </style>
</head>


<body>
    <script>
        /* Render Dummy Content, cursor change wont work with min-height */
        for (let i = 0; i < 1000; i++) {
            document.body.innerHTML += "Lorem Ipsum ";
        }
        const scrollSpeed_Up = -1;
        const scrollSpeed_Down = 1;
        const middlehalf = window.innerHeight / 2;
        let AutoScroll_Interval; /* Global acess */
        let isScrolling = false;
        let isScrollingUp = false; /* Default Scrolling Down, Prevent Errors */


        const ToggleScrolling = Enable => {
            if (Enable) {
                console.log("Auto Scroll Active");
                document.body.style.cursor = "all-scroll";
                AutoScroll_Interval = setInterval(AutoScroll, 1);
                isScrolling = true; /* Prevent Multiple Interval's */
            } else if (!Enable && isScrolling) {
                /* Stop Interval , Reset Cursor and Variables */
                console.log("Auto Scroll Stopped");
                document.body.style.cursor = "auto";
                clearInterval(AutoScroll_Interval);
                isScrolling = false;
            }
        }


        const AutoScroll = () => {
            /* Get Current Vertical Scroll Position : console.log(window.scrollY); */
            isScrollingUp ? window.scrollBy(0, scrollSpeed_Up) : window.scrollBy(0, scrollSpeed_Down);
        }


        window.addEventListener("mousemove", e => {
            e.clientY > middlehalf ? isScrollingUp = false : isScrollingUp = true;
        });


        /* Check if Scroll Button is Pressed */
        window.addEventListener("mousedown", e => {
            e.button === 1 && !isScrolling ? ToggleScrolling(true) : ToggleScrolling(false);
        });


        /* ############## IGNORE ##############
        Check if Client has reached Bottom
        const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
        if (window.scrollY >= scrollableHeight) { 
            // Reached Bottom Code ... 
        } else {
            // Code ...
        }
        */
    </script>
</body>


</html>

...zum Beitrag

wie kann man in JavaScript eine Funktion erstellen, die eine zufällige Zahl generiert?

Hi Leute!

Wie kann ich ich JavaScript eine Funktion erstellen, die jede Zahl zufällig von 1 bis 16 auswählt, jedoch darf keine mehrmals vorkommen.

Vielen dank im voraus🙂

...zum Beitrag

Erstellte website nicht aufrufbar?

Bin Anfänger im Thema Webseiten und programmieren und habe mir mal ein Tutorial angeschaut. In dem wurde mir erzählt, dass ich mit dem Editor und HTML eine Website erstellen kann. Wenn ich aber nach abspeichern des Editors etc. den Link, der in der Suchtleiste bei Chrome steht bei einem anderen Gerät eingebe, finde ich diese Seite nicht. Ich hatte auch nicht erwartet, dass das erstellen von einer Website auf diese Weise funktioniert, aber was fehlt mir, dass diese Seite, auch wenn es nur eine Testseite sein soll im Internet aufrufbar ist?

...zum Beitrag

Auf der Stelle scrollen in HTML?

Hallo,

wie kann man in HTML scrollen, allerdings nicht nach unten gehen, sondern nur z. B. eine Farbe ändern? Wie bei Apple.

...zum Beitrag

WordPress mit eigenem HTML, CSS und JSCode?

Hallo Leute, ich brauche mal ein paar Infos zu WordPress in Verbindung mit eigenem HTML, CSS und JavaScript Code.

1.) Ich habe mit den 3 besagten Sprachen ein kleines interaktives Bild in einer HTML Datei erstellt mit einem Umfang von gut 180 Zeilen und dieses Bild würde ich gerne in WordPress einbinden, funktioniert das? Wenn ja wie? Per Shortcode? Direkt einbinden? muss ich das in ein Plugin umwandeln?

2.) Wenn es möglich ist, kann ich das Erstellte leicht exportieren und auf einer anderen WordPress Seite ebenfalls leicht Importieren?

3.) Kann ich überhaupt mit der kostenlosen Version bzw. mit der Persönlichen oder maximal Premium Version besagtes umsetzen? Oder müsste ich für eigenen Code ein höheren Tarif wählen?

Vielen dank schonmal und Beste Grüße!

...zum Beitrag

Wordpress vs Webflow für Agenturen?

Was findet ihr besser um Webseiten zu verkaufen, Webflow oder Wordpress und warum?

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen