JavaScript Current Song Info aus mp3 Source auslesen

end0fseven · 30. März 2021

Guten Abend

Ich habe vor längerer Zeit eine kleine Webradio Seite Programmiert. (webradiofm.splitup.ch)

Das ganze habe ich so Clean wie möglich und mit den gängisten HTML5 Standarts und JS umgesetzt. Da ich aber definitiv kein Profi bin sondern Blutiger anfänger, brauche ich eure Hilfe.

Ich würde das ganze gerne mit den Song-Titeln ergänzen.

So sollte das dann aussehen.

Erstmal der Aufbau der Webseite.

Javascript:

function playRadio(sender){
    player=document.getElementById('player');
    sourceOgg=document.getElementById('player');
    sourceMp3=document.getElementById('player');

    switch(sender) {
        case "radiobern1":
            sourceMp3.src='http://mp3.radiobern1.ch/radiobern1128k';
        break;
        case "bigfm":
            sourceMp3.src='http://streams.bigfm.de/bigfm-deutschland-128-aac?usid=0-0-H-A-D-30';
        break;
        case "pinguinr":
            sourceMp3.src='http://streams.pinguinradio.com/PinguinOnTheRocks192.mp3';
        break;
        case "virgin":
            sourceMp3.src='http://icecast.unitedradio.it/Virgin.mp3';
        break;
        case "pure":
            sourceMp3.src='http://radionetz.de:8000/purefm-bln.mp3';
        break;
        case "my105latino":
            sourceMp3.src='http://stream01.my105.ch/my105ritmolatino.mp3';
        break;
        case "rautehouse":
            sourceMp3.src='http://house-high.rautemusik.fm';
        break;
        case "tophundert":
            sourceMp3.src='http://stream.top100station.com/top100station.mp3';
        break;
        case "onelive":
            sourceMp3.src='http://wdr-1live-live.icecast.wdr.de/wdr/1live/live/mp3/128/stream.mp3?ar-distributor=ffa1';
        break;
        case "vintage":
            sourceMp3.src='https://vintageradio.ice.infomaniak.ch/vintageradio-high.mp3';
        break;
        case "schlagerradio":
            sourceMp3.src='https://schlagerradio.ice.infomaniak.ch/schlagerradio-high.mp3';
        break;
        case "pulsfm":
            sourceMp3.src='http://icepool.silvacast.com/PULSFM.mp3';
        break;
        case "technobasefm":
            sourceMp3.src='http://mp3.stream.tb-group.fm/tb.mp3';
        break;
        case "slam":
            sourceMp3.src='https://20863.live.streamtheworld.com/WEB11_MP3_SC?';
        break;
        case "country-105":
            sourceMp3.src='http://live.leanstream.co/CKRYFM';
        break;
        default:
            return player.pause();
    }
    player.load(); //just start buffering (preload)
    player.play(); //start playing
}

Webseite:

HTML:

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>WebRadioFM</title>
    <link rel="stylesheet" href="css/main.css" type="text/css"/>
    <link href="/images/favicon.ico" rel="icon" type="image/x-icon" />
    <!-- Icons fuer Mobile Geraete -->
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="icon" type="image/png" href="/favicon.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/favicon.png" sizes="96x96">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="/mstile-144x144.png">
    <!-- Icons fuer Mobile Geraete -->
    <meta name="viewport" content="width=device-width">
    <img src="images/banner.jpg" alt="Banner Image"/>
    <script src="audio.js"></script>
  </head>
  <body>
<div id="miniplayer">
  <audio id="player" src="sourceMp3"></audio>
  <source id="sourceOgg" src="" type="audio/ogg" />
  <source id="sourceMp3" src="" type="audio/mp3" />
    <button id="buttonp" onclick="document.getElementById('player').play()"><img src="images/play.png"/></button>
    <button id="buttonp" onclick="document.getElementById('player').pause()"><img src="images/pause.png"/></button>
    <button id="buttonp" onclick="document.getElementById('player').volume-=0.1"><img src="images/vol-down.png"/></button>
    <button id="buttonp" onclick="document.getElementById('player').volume+=0.1"><img src="images/vol-up.png"/></button>
</div>
        <table>
        <tbody>
        <tr>
        <td><button onclick='playRadio("radiobern1")')><img src="images/bern1.png"/></button></td>
        <td><button onclick='playRadio("bigfm")'><img src="images/big_fm.png" /></button></td>
        <td><button onclick='playRadio("tophundert")'><img src="images/top100.png" /></button></td>
      
        </tr>
        <tr>
        <td><button onclick='playRadio("virgin")'><img src="images/virgin.png" /></button></td>
        <td><button onclick='playRadio("pinguinr")'><img src="images/pinguinr.png" /></button></td>
        <td><button onclick='playRadio("pure")'><img src="images/pure.png" /></button></td>
        </tr>
        <tr>
        <td><button onclick='playRadio("rautehouse")'><img src="images/raute_house.png" /></button></td>
        <td><button onclick='playRadio("my105latino")'><img src="images/my105_latino.png" /></button></td>
        <td><button onclick='playRadio("onelive")'><img src="images/1live.png" /></button></td>
        </tr>
        <tr>
        <td><button onclick='playRadio("technobasefm")'><img src="images/technobasefm.png" /></button></td>
        <td><button onclick='playRadio("slam")'><img src="images/slam.png" /></button></td>
        <td><button onclick='playRadio("pulsfm")'><img src="images/pulsfm.png" /></button></td>
        </tr>
        <tr>
        <td><button onclick='playRadio("vintage")'><img src="images/vintage.png" /></button></td>
        <td><button onclick='playRadio("schlagerradio")'><img src="images/schlager-radio.png" /></button></td>     
        <td><button onclick='playRadio("country-105")'><img src="images/country-105.png" /></button></td>
        </tr>
        </tbody>
        </table>
  </body>
   <footer>
    <p>WebRadioFM by <a href="https://www.splitup.ch">SplitUP.ch</a> / Copyright © 2014 - 2021</br>
    Diese Seite ist auch für Smartphones angepasst</br>
    Kontakt: <a href="mailto:info(at)splitup.ch">info(at)splitup.ch</a>
</p>
</footer>
</html>

Wie setzte ich das ganze um? Ich habe was gelesen das man einen ID3 Tag leser verwenden kann. Kann das bei mir Funktionieren? Wenn ja, wie genau implementiere ich das ganze bei mir?

Habe diesen Code gefunden:

Code:

document.querySelector('input[type="file"]').onchange = function (e) {
    var reader = new FileReader();

    reader.onload = function (e) {
        var dv = new jDataView(this.result);

        // "TAG" starts at byte -128 from EOF.
        // See http://en.wikipedia.org/wiki/ID3
        if (dv.getString(3, dv.byteLength - 128) == 'TAG') {
            var title = dv.getString(30, dv.tell());
            var artist = dv.getString(30, dv.tell());
            var album = dv.getString(30, dv.tell());
            var year = dv.getString(4, dv.tell());
        } else {
            // no ID3v1 data found.
        }
    };

    reader.readAsArrayBuffer(this.files[0]);
};

benneq · 30. März 2021

Benutz dafür eine verbreitete Library. Da weiß man, dass sie problemlos funktioniert. Bei npm gibt's einiges zur Auswahl:

https://www.npmjs.com/search?q=ID3
https://www.npmjs.com/search?q=id3v2

end0fseven · 30. März 2021

Geht das nur dort drüber?

Ich meine, die JS läuft ja bereits im hintergrund, daraus müsste man doch Infos raus kriegen ohne gross noch Software zu installieren?

Fombu · 30. März 2021

end0fseven schrieb:
Ich meine, die JS läuft ja bereits im hintergrund, daraus müsste man doch Infos raus kriegen ohne gross noch Software zu installieren?

Du solltest dir vllt. erst mal grundlegende Kenntnisse aneignen.

end0fseven · 30. März 2021

@Fombu Tut mir leid. War wirklich dumm formuliert. Und ja du hast recht, ich muss mir noch viel Grundwissen aneignen. Das obere Projekt habe ich aber finde ich gut hingekriegt.

Ich habe noch nicht ganz verstanden was @benneq da gepostet hat. Habe mir das kurz angeschaut und da wurde ich halt darauf verwiesen das ich dieses npm installieren muss. Scheinbar ist das aber ein Software Paket für den PC wo vermutlich dann eine Entwicklungsumgebung ist. Muss mich da wirklich erstmal komplett einlesen.

Hatte halt die hoffnung, dass man in JavaScript die Source abgreifen kann und danach den Id3 Tag raus nehmen kann und dann per <div> wieder zurück auf die Webseite bringen.

GrumpyCat · 31. März 2021

Internetradios streamen normalerweise im Shoutcast-Format. Das sind quasi MP3-Rohdaten (nix IDv3!) mit in bestimmten Abständen eingestreuten Metadaten (in einem simplen Format, das mit IDv3 nichts zu tun hat, und die sind auch nur im Stream, falls sie beim HTTP-Request explizit angefordert wurden). Das HTML-Audio-Tag kann damit nicht wirklich umgehen, das wird nur den MP3-Anteil abspielen.

Man kann bestimmt mit ein paar Basteleien einen Shoutcast-Player in JS schreiben, der muss aber vermutlich den Stream zwischenbuffern, die Metadaten rausholen und den Rest an HTML Audio weitergeben. Gibt's bestimmt auch schon fertig.

Yuuri · 31. März 2021

end0fseven schrieb:
Ich habe noch nicht ganz verstanden was @benneq da gepostet hat. Habe mir das kurz angeschaut und da wurde ich halt darauf verwiesen das ich dieses npm installieren muss.

Er will dir damit sagen, dass du nicht in den Wald fahren sollst um Bäume zu fällen, wenn du ein Holzspielzeug haben willst. Dafür gehst du ja auch eher in den Laden. Er will damit sagen, dass es für eigentlich alles bereits fertige Libs gibt, auf die du zurückgreifen kannst, mit denen du schneller und sicherer am Ziel bist.

Mit der Info von @GrumpyCat gibts dafür auch bereits ne fertige Lib: https://www.npmjs.com/package/icecast-parser. Sonst gibts noch mehr Libs dafür: https://www.npmjs.com/search?q=shoutcast

Zur Not kannst du es immer noch selbst implementieren, wenn es keine für dich passende Lib gibt oder eine bereits vorhandene Lib selbst patchen.

end0fseven · 1. April 2021

Ich danke euch erstmal für eure Hilfe. Werde mich da mal einlesen.

Was mich mal interessieren würde, was haltet ihr aber allgemein von der Seite und meinem Code? Für euch Profis wäre diese Seite vermutlich innerhalb paar Stunden fertig gewesen. Ich bin da teilweise Tage daran gesessen ^^

Mir war es wichtig, einen möglichst Cleanen Code zu haben und mit den Standarts zu arbeiten ohne irgendwas einzubinden.

Fombu · 1. April 2021

end0fseven schrieb:
von der Seite und meinem Code

Statt mit table lieber mit display: flex oder grid arbeiten. tables nur für wirkliche tabellarischen Daten.

Amaoto · 5. April 2021

Die Frage findest du fast 1:1 inkl. möglicher Lösung auf Stack Overflow: https://stackoverflow.com/questions/8991015/get-idv3-tags-from-shoutcast-stream-with-javascript

end0fseven schrieb:
Mir war es wichtig, einen möglichst Cleanen Code zu haben und mit den Standarts zu arbeiten ohne irgendwas einzubinden.

Vielleicht besonders dann wäre es empfehlenswert, mal mit dem W3C-Validator drüberzuschauen: https://validator.w3.org/nu/?doc=https://webradiofm.splitup.ch/
Das zeigt dir vor allem syntaktische Fehler im Code an, aber auch einige nützliche Warnungen.

Das Gleiche gibt's auch für CSS: https://jigsaw.w3.org/css-validator/validator?uri=https://webradiofm.splitup.ch/&profile=css3svg&usermedium=all&warning=1

Suche

JavaScript Current Song Info aus mp3 Source auslesen

end0fseven

Lt. Commander

benneq

Fleet Admiral

end0fseven

Lt. Commander

Fombu

Banned

end0fseven

Lt. Commander

GrumpyCat

Lt. Commander

Yuuri

Fleet Admiral

end0fseven

Lt. Commander

Fombu

Banned

Amaoto

Captain