Hi Image may be NSFW.
Clik here to view.
If this is the wrong subforum, please move it.
I have a question regarding an HTML website.
Is it possible to read the media information of an audio or video file using a self-created website?
It would also be interesting to read the information sent from a web stream of radio stations (usually in .m3u stream format).
I would have liked to continue trying it myself, but unfortunately I'm stuck here.
Currently, my website code would look like this...
I would be grateful for any help. Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Clik here to view.

If this is the wrong subforum, please move it.
I have a question regarding an HTML website.
Is it possible to read the media information of an audio or video file using a self-created website?
It would also be interesting to read the information sent from a web stream of radio stations (usually in .m3u stream format).
I would have liked to continue trying it myself, but unfortunately I'm stuck here.
Currently, my website code would look like this...
I would be grateful for any help. Image may be NSFW.
Clik here to view.

Clik here to view.

Code:
<!DOCTYPE html><html lang="de"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Audio-Datei Player</title> <script src="https://cdn.jsdelivr.net/npm/jsmediatags@3.9.5/dist/jsmediatags.min.js"></script> <style> :root { --text-color: #007BCF; /* Variablenwert für die Textfarbe */ } body { font-family: Arial, sans-serif; margin: 20px; } #audioPlayer { display: block; margin-bottom: 20px; /* Abstand nach unten */ } .file-input-container { text-align: left; /* Links ausgerichtet */ margin-bottom: 20px; /* Abstand nach unten */ } .metadata-container { display: flex; justify-content: space-between; align-items: center;color: var(--text-color); } #title { color: var(--text-color); /* Textfarbe für Titel */ } #artist { text-align: center; /* Mittige Ausrichtung */ flex-grow: 1; /* Füllt den Platz aus, damit der Text zentriert bleibt */ color: var(--text-color); /* Textfarbe für Interpret */ } </style></head><body> <audio id="audioPlayer" controls></audio> <div class="file-input-container"> <input type="file" id="fileInput" accept="audio/*"> </div> <div class="metadata-container"> <p><strong>Titel:</strong> <span id="title">Nicht verfügbar</span></p> <p id="artist"><strong>Interpret:</strong> <span>Nicht verfügbar</span></p> </div> <script> const fileInput = document.getElementById('fileInput'); const audioPlayer = document.getElementById('audioPlayer'); const titleElement = document.getElementById('title'); const artistElement = document.getElementById('artist'); fileInput.addEventListener('change', (event) => { const file = event.target.files[0]; if (file) { const url = URL.createObjectURL(file); audioPlayer.src = url; // Metadaten auslesen jsmediatags.read(file, { onSuccess: (tag) => { titleElement.textContent = tag.tags.title || "Unbekannt"; artistElement.textContent = tag.tags.artist || "Unbekannt"; }, onError: (error) => { console.error("Fehler beim Auslesen der Metadaten:", error); titleElement.textContent = "Nicht verfügbar"; artistElement.textContent = "Nicht verfügbar"; } }); } }); </script></body></html>
Statistics: Posted by Rooky_89 — Yesterday, 8:05 pm — Replies 7 — Views 134