Hi ![:bow:]( "Bow")
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.![:givelove:]( "Give Love")
![:rosegift:]( "Rose Gift")
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.
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