ID3 Daten mit JavaScript von Audio Dateien auslesen

Ausgangslage

In einem anderen Artikel wurde gezeigt wie man das TYPO3 Medien Element auf HTML5 Audio ädern kann. Als Ergäzung werden nun der Audio Datei mittels JavaScript die ID3 Daten ausgelesen und angezeigt.

JavaScript Libs

Damit die ID3 Daten ausgelesen werden können, benötigt man binaryajax.js und id3.js. Beide Dateien findet man im src Ordner des JavaScript-ID3-Reader Projekts.

In diesem Beispiel werden jedoch die Dateien aus der ZIP Datei vom Blog Beitrag verwendet. Weil einige Browser den <audio> Tag nicht verstehen wird ebenfalls der AudioJs Player eingesetzt.

Oops, an error occurred! Code: 202010240003184a228d90Oops, an error occurred! Code: 2020102400031887a90a6f

JavaScript zum auslesen der ID3 Daten

Mit jQuery werden zuerst alle <audio> Tags der Seite eingelesen. Danach wird der ID3 Lib der Pfad der Datei übergeben und unterhalb dem <audio> Tag ein DIV Element erstellt, in welchem die ID3 Daten angezeigt werden.

Nachtrag: Leider klappt es im Firefox (3.6.x) nur beim ersten laden. Sobald die Datei im Cache ist, werden die Daten nicht mehr angezeigt.

Oops, an error occurred! Code: 202010240003187be2536c

ERROR: Content Element with uid "384" and type "media" has no rendering definition!