drucken :: thefox: 21.01.2012

ID3 Daten mit JavaScript von Audio Dateien auslesen

In diesem Artikel wird gezeigt wie mit JavaScript ID3 Daten aus einer Mediendatei (mp3) ausgelesen werden kann.

Ausgangslage

In einem anderen Artikel wurde gezeigt wie man das TYPO3 Medien Element auf HTML5 Audio ändern kann. Als Ergänzung 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.

JS Libs in HTML einbinden (template)


<script src="pfad-zu-datei/binaryajax.js"></script>
<script src="pfad-zu-datei/id3.js"></script>

<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

<!-- datei mit js code aus diesem artikel -->
<script src="pfad-zu-datei/audiojs_id3.js"></script>
Einbinden der JavaScript Dateien

JS Libs in HTML einbinden (typoscript TYPO 4.3.x)


# externe JS Lib
page.includeJSlibs.jquery = http://code.jquery.com/jquery-1.4.4.min.js
page.includeJSlibs.jquery.external = 1

# Der IE Browser (7 & 8) ist etwas <alt> und braucht diese Datei im Header ;-)
page.includeJSlibs.audiojs = EXT:my_extension/res/js/audiojs/audio.min.js

# restliche Dateien in Footer einbinden 
page.includeJSFooter.binaryajax = pfad-zu-datei/binaryajax.js
page.includeJSFooter.id3 = pfad-zu-datei/id3.js
page.includeJSFooter.audiojs_id3 = pfad-zu-datei/audiojs_id3.js
Hinweis: *page* alias *htmlpage* oder *seite*

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.

JavaScript Code


audiojs.events.ready(function() {
	var as = audiojs.createAll();
});

jQuery.noConflict();
jQuery(document).ready(function($){
	var audiojs_id3 = {

		/**
		 * Collector for audio items
		 */
		listItems : false

		,start : function () {
// einlesen der audio tags
			this.listItems = $('audio');
			if(this.listItems) this.parseListItems();
		}

		,parseListItems : function () {
			$.each(this.listItems, function(index, listItem) {
// durchsuchen der elemente und id3 daten auslesen
				audiojs_id3.addId3data(index, listItem);
			});
		}

		,addId3data : function(index, audioObj) {
			var titleTag = $('<div id="audiojs_wrapper'+ index +'id3" class="id3info">');
// datei pfad von audio tag auslesen
			var file = $(audioObj).attr('src');

			function onSuccess() {
				var artist = ID3.getTag(file, 'artist');
				var title = ID3.getTag(file, 'title');
				if(title) title = ' - ' + title;
				if(title || artist) {
					titleTag.html(artist + title);
				}
			}

			if(file) {
// auslesen der id3 daten
				ID3.loadTags(file, onSuccess);
			}
// einfügen des div elements nach dem audio tag
			$(audioObj).after(titleTag);

		}

	};
	audiojs_id3.start();
});
auslesen der ID3 Daten aus Audio Tags
Player Demo