Wie man den Standard Audio Media Player HTML5 / iPhone tauglich macht

Der Standard Player von Typo3 benötigt Flash, deshalb funktioniert dieser beim iPhone/iPad nicht. In diesem Artikel wird gezeigt wie man einen HTML5 tauglichen Player einbindet.

Ausgangslage

Der Standard TYPO3 Audio Player sollte auf HTML5 umgebaut werden, damit MP3 Dateien auch mit Mobile Geräten (konkret iPhone) angehört werden können. HTML5 <audio> ist zwar eine tolle Sache, aber leider können dies die meisten bisherigen Browser nicht. Eine TYPO3 Condition für Mobile Geräte wäre eine Möglichkeit gewesen, aber wie aus anderen Artikel bereits ersichtlich, bin ich nicht nur aus Performance Gründen ein Verfechter davon. Somit musste eine Lösung gefunden werden, welche zwar ein <audio> Element erstellt, jedoch auch ein Fallback für die älteren Browser bietet.

Lösung

Eine clevere wie auch einfache Lösung lautet audio.js. In diesem Artikel wird beschreiben wie man diese im TYPO3 einbauen und farblich anpassen kann.

Das Vorgehen ist ziemlich einfach: Audio.js Dateien downloaden, den JavaScript Code im Template einbinden und das media (MP3) Element so abädern das ein <audio> HTML Code ausgegeben wird.

PS: Das der Player keine Ogg Vorbis Dateien abspielen kann ist mir egal.

JavaScript im Template einbinden

Wenn mit Templates gearbeitet wird, kann der JavaScript Code direkt im Template eingebunden werden. Wer es lieber per typoscript einbindet, macht es über diese Lösung. Schön wäre es, wenn der JavaScript Code nur eingebunden wird, wenn mindestens ein <MP3 Media Element> auf der Seite eingebunden ist. Ist sicherlich machbar, würde aber in diesem Artikel zu weit gehen. Daher nur die kurze Version.


page = PAGE
page {
  headerData.400 = TEXT
  headerData.400.value (
<script type="text/javascript" src="/pfad-zur-datei/audiojs/audio.min.js"></script>
<script>
	audiojs.events.ready(function() {
		var as = audiojs.createAll();
	});
</script>
  )
 # restlicher Code
}
Einbinden JavaScript Code im Template
alternativ ab TYPO3 4.3.x

page = PAGE
page {
  # ist nicht zwingend zu deaktivieren
  config.removeDefaultJS = 1

  # einbinden der lib
  includeJSlibs.audiojs = pfad-zu-datei/audiojs/audio.min.js

  # inline JavaScript Code
  jsInline {
	10 = TEXT
	10.value (
		audiojs.events.ready(function() {
			var as = audiojs.createAll();
		});
	)
  }
}
Einbinden JavaScript Code per typoscript

Media Element für MP3 ädern

Okay, dieser Teil wurde aufwendiger als gedacht. Es geht nicht so einfach per typoscript, ohne das man einiges umbauen müsste. Somit musste wieder der PHP Code von class.tslib_content_media.php und class.tslib_content_multimedia.php analysiert werden. Wie sich herausgestellt hat, gibt es einen Hook (customMediaRender) damit man seine eigene Media Elemente erstellen kann.

Hm, in Hooks für TYPO3 4.5.x einlesen, oder mal im TYPO3 TER schauen ob es bereits etwas für HTML5 Audio Elemente gibt.

Die Extension html5media (0.1.0 / Alpha) machte vom Namen her auf den ersten Blick (trotz fehlender Dokumentation) einen guten Eindruck. Jedoch kam diese nach einem kurzen Code Review ( ohne Installation ) für mich nicht in Frage. Drei Gründe sprachen dagegen.

  1. Will ich keine zusätzliche Extension, welche mir noch eine Content Element mehr macht.
  2. Will ich eine Fallback Lösung und audiojs einbinden können.
  3. Geht es ganz und gar nicht, das der alternative Content hardcodiert im PHP Code steht und es keine Möglichkeit gibt, diesen ohne die Extension anzupassen zu übersteuern.

Hooks im TYPO3 4.5.x. Einige Neuerungen gibt es da ja schon, aber wie baut man sich ein Hook?

Den Media Hook für TYPO3 4.5.x erstellen

In Hooks einlesen könnt Ihr euch in diesem Artikel nicht! ;-)

In diesem Artikel ist es nur das Ziel, einen HTML5 tauglichen Audio Player für das iPhone zu haben. Aus diesem Grund wird als Code Schnipsel nur die absolut einfachste Version gezeigt.

Für den folgenden Code muss eine eigene Extension vorhanden sein.

Einfügen des Codes in einer anderen Extension ist auch möglich...


# ext_localconf.php

// media mp3 => audiojs hook
$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['tslib/hooks/class.tx_cms_mediaitems.php']['customMediaRender'][$_EXTKEY] = 'EXT:' .$_EXTKEY. '/hooks/class.tx_audiojs.php:tx_audiojs';

# hooks/class.tx_audiojs.php

<?php
class tx_audiojs {
  function customMediaRender($renderType, $conf) {
    if ($renderType == 'audiojs') {
      return '<audio src="'.$conf['file'].'" preload="auto" />';
    }
  }
}
?>
PHP Code für den Hook

Für MP3 Dateien einen Hook im TYPO3 verwenden

Zum Schluss muss an TYPO3 noch mitgeteilt werden, dass es nun für MP3 Dateien einen customMediaRender Hook gibt.


tt_content.media.20.fileExtHandler.mp3 = AUDIOJS
typoscript für Hook aktivieren
Player Demo
Weiterführende Links