drucken :: thefox: 08.05.2011

Wie man die Farben des Audio Players im TYPO3 4.5.x ändert

Der Standard SWF Audio Player (aus dem Wordpress Projekt) von TYPO3 kann man in der Darstellung und Funktionalität anpassen. In diesem Artikel wird ein möglicher Lösungsweg gezeigt.

Content Media Constants

Standardmässig kann man bei Content 'Media' nicht viel in den Constanten anpassen. Beim media Element können über Zusätzliche Parameter > Benutzerdefinierte Parameter diverse Optionen angegeben werden und somit der Player im Aussehen und Verhalten verändert werden. Jedoch ist es mühsam diese jedes Mal angeben zu müssen, und vor allem herauszufinden wie man diese Flashvariablen, -parameter oder -attribute eingeben muss. Per TypoScript kann man die Default Werte festlegen und übersteuern.

Um den <audio> Aufbau zu verstehen kann man in der Datei class.tslib_content_media.php etwas nachforschen, oder die Dokumentation auf typo3.org lesen.


styles.content.media {
	videoPlayer = typo3/contrib/flashmedia/flvplayer.swf
	defaultVideoWidth = 600
	defaultVideoHeight = 400

	audioPlayer = typo3/contrib/flashmedia/player.swf
	defaultAudioWidth = 300
	defaultAudioHeight = 30
}
Content Media Constants

Flashvars

Folgende Flashvars sind möglich. Von mir nicht getestet sind die Werte encode, checkpolicy, transparentbg, pagebg.

Audio Informationen
Option Beschreibung
soundFile Kommaseparierte Liste von MP3-Dateien; wird vom TYPO3 Medien-Inhaltselement automatisch gesetzt. Man kann jedoch per Komma (ohne DAM) auch mehrere Dateien angeben
titles Kommaseparierte Liste mit Titeln; überschreibt die entsprechende ID3-Information aus der MP3-Datei
artists Kommaseparierte Liste mit z.B. Interpreten; überschreibt die entsprechende ID3-Information aus der MP3-Datei
Optionen
Option Default Beschreibung
autostart false wenn yes; Player startet automatisch
loop false wenn yes; Am Ende wird Automatisch wieder von vorne abgespielt
animation true wenn no; Player ist immer offen
remaining false wenn yes; Zeigt der Player die verbleibende Abspielzeit anstatt der vergangenen
noinfo false wenn yes; Die Informationen zu Titel und Interpret werden nicht angezeigt
initialvolume 60 Anfangseinstellung der Lautstärke (von 0 bis 100)
buffer 5 Puffer in Sekunden
encode false wenn die mp3-Datei-URLs kodiert werden
checkpolicy false tells Flash to look for a policy file when loading mp3 files(this allows Flash to read ID3 tags from files hosted on a different domain)
width 290 Breite des Players. z.B. 290 (290 Pixel) oder 100%
transparentbg false wenn yes; Ist der Player Hintergrund transparent ist (entspricht dem Seite Hintergrund)
pagebg NA Player Hintergrundfarbe
rtl false wenn yes;Ändert die Richtung auf "von rechts nach links" für z.B. Hebräisch und Arabisch
Farben
Audio Player Farben
Option Default Beschreibung
bg E5E5E5 Background
border CCCCCC Rahmen um Abspielbalken
leftbg CCCCCC Lautsprecher/Lautstärkeregler Hintergrund
lefticon 333333 Lautsprecher icon
rightbg B4B4B4 Play/Pause Hintergrund
rightbghover 999999 Play/Pause Hintergrund (bei hover)
righticon 333333 Play/Pause icon
righticonhover FFFFFF Play/Pause icon (bei hover)
loader 009900 Ladebalken
skip 666666 Vorwärts/Zurück icon bei mehreren Audio-Dateien pro Player
text 333333 Text
track FFFFFF Ladebalken/Abspielbalken Hintergrund
tracker DDDDDD Abspielbalken
voltrack F2F2F2 Lautstärkeregler
volslider 666666 Lautstärkeanzeige

TypoScript Erweiterung für die Audio Player Farben


# constants.txt
styles.content.media.flashvars {
	# cat=content/cMedia/l10; type=; label= Background
	bg =E5E5E5
	# cat=content/cMedia/l11; type=; label= Rahmen um Abspielbalken
	border =CCCCCC
	# cat=content/cMedia/l12; type=; label= Lautsprecher/Lautstärkeregler Hintergrund
	leftbg =CCCCCC
	# cat=content/cMedia/l13; type=; label= Lautsprecher icon
	lefticon =333333
	# cat=content/cMedia/l14; type=; label= Play/Pause Hintergrund
	rightbg =B4B4B4
	# cat=content/cMedia/l15; type=; label= Play/Pause Hintergrund (bei hover)
	rightbghover =999999
	# cat=content/cMedia/l16; type=; label= Play/Pause icon
	righticon =333333
	# cat=content/cMedia/l17; type=; label= Play/Pause icon (bei hover)
	righticonhover =FFFFFF
	# cat=content/cMedia/l18; type=; label= Ladebalken
	loader =009900
	# cat=content/cMedia/l19; type=; label= Vorwärts/Zurück icon bei mehreren Audio-Dateien pro Player
	skip =666666
	# cat=content/cMedia/l20; type=; label= Text
	text =333333
	# cat=content/cMedia/l21; type=; label= Ladebalken/Abspielbalken Hintergrund
	track =FFFFFF
	# cat=content/cMedia/l22; type=; label= Abspielbalken
	tracker =DDDDDD
	# cat=content/cMedia/l23; type=; label= Lautstärkeregler
	voltrack =F2F2F2
	# cat=content/cMedia/l24; type=; label= Lautstärkeanzeige
	volslider =666666
}

# setup.txt

tt_content.media.20.mimeConf.swfobject.audio.default.flashvars {
	bg ={$styles.content.media.flashvars.bg}
	border ={$styles.content.media.flashvars.border}
	leftbg ={$styles.content.media.flashvars.leftbg}
	lefticon ={$styles.content.media.flashvars.lefticon}
	rightbg ={$styles.content.media.flashvars.rightbg}
	rightbghover ={$styles.content.media.flashvars.rightbghover}
	righticon ={$styles.content.media.flashvars.righticon}
	righticonhover ={$styles.content.media.flashvars.righticonhover}
	loader ={$styles.content.media.flashvars.loader}
	skip ={$styles.content.media.flashvars.skip}
	text ={$styles.content.media.flashvars.text}
	track ={$styles.content.media.flashvars.track}
	tracker ={$styles.content.media.flashvars.tracker}
	voltrack ={$styles.content.media.flashvars.voltrack}
	volslider ={$styles.content.media.flashvars.volslider}
}
typoscript erweitern

Eingabe von benutzerdefinierter Parameter


# Hintergrund des Flash-Players transparent 
params.wmode = transparent

# Automatisch starten
flashvars.autostart=yes

# Endlos Schlaufe
flashvars.loop=yes
Parameter beim Inhaltselement

Player Demo

 

Screenshots

1# Standard Media Constants