Joomla! mit Hintergrundmusik, die beim Wechseln der Unterseiten nicht unterbricht

Im Joomlaportal wurde bereits mehrfach nach einer Lösung gefragt, wie man einen fortlaufenden Mp3-Player in eine Joomla!-Site einbinden kann. Mit dieser Kurzanleitung möchte ich eine Möglichkeit aufzeigen. (Dieses Tutorial funktioniert nicht nur mit Joomla!, sondern eigentlich mit jeder Website!)

Allgemein würde es folgendermaßen funktionieren:

1. Seite komplett in Flash (Joomla! entfällt)
2. Player im Popup (leicht realisierbar, aber nicht in Seite integriert)
3. Player in einem Frame laden
4. AJAX (?)

Diese Anleitung erläutert die 3. Möglichkeit:

Mp3-Player mit Hilfe von Frames in einer Joomla!-Site beim Wechseln auf Unterseiten ununterbrochen ablaufen lassen.

Bevor ihr diese Lösung wählt und das Tutorial umsetzt, lest euch bitte in die Bedeutung, sowie den Vor- und Nachteilen von Frames ein: Wikipedia

Weitere hilfreiche Links (Frames optimieren, Frames definieren...): SelfHTML , Site-Check

Dieses Tutorial kann in allen Joomla! Versionen umgesetzt werden.
Bei Joomla! 1.5 gibt es beim 3. Punkt etwas zu beachten, nähere Erläuterung im Exkurs weiter unten.

Tutorial MP3 Player in Joomla! Start

1. start.php anlegen:

Die neue Startseite mit folgendem Inhalt anlegen: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="description" content="Hier eine Beschreibung!" /> 
<meta name="keywords" content="hier, die, keywords" />
<title>Das ist der Titel der Seite</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
</head>
<frameset rows="*,18" frameborder="NO" border="0" framespacing="0">
<frame src="/index.php" name="Index">
<frame src="/player.php" name="Navigation">
<noframes>
<body>
<p><a href="/index.php">Navigation</a> <a href="/player.php">Player</a></p>
</body>
</noframes>
</frameset>
</html>

Erläuterung:

Das ist die neue Startseite, über die die Besucher die Seite aufrufen werden. Wichtig ist, dass ihr die Keywords und Desciption passend und ausführlich setzt.
Der Frameset-Teil bestimmt die aufgerufenen Frames, in diesem Beispiel index.php (das ist die Startdatei von Joomla) und player.php (dazu kommen wir noch).
<frameset rows="90%,10%" ...> bedeutet, dass die erste Datei (index.php) 90 Prozent des Fensterinhaltes einnimmt ( 10% die Datei player.php). Möchte man den Player quasi unsichtbar einblenden lassen, dann wählt man "100%,0%". Möchte man den Player mit einer bestimmten Größe einbauen, kann man die Werte "*,20" nehmen. In diesem Fall stehen dem Player 20 Pixel im unteren Frame zur Verfügung.
<noframes> - Sehr wichtig für die Indexierung in Suchmaschinen, da sie beim Einlesen der Seiten Probleme haben könnten und für Browser, die keine Frames unterstützen.

2. player.php anlegen

Sucht euch einen Flash - Mp3 Player aus, erzeugt den nötigen Code zum Abspielen der Dateien und erstellt die Datei player.php

Zum Beispiel: JW FLV MEDIA PLAYER , XSPF Web Music Player (Flash), EMFF oder einen für Joomla! programmierten Player.

(Dieses Tutorial und die Beispiele unten wurden mit dem sehr guten JW FLV MEDIA PLAYER umgesetzt!)

Quelltext für player.php: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>MP3 Player</title>
</head>
<body> 
HIER CODE DES GEWÄHLTEN PLAYERS EINTRAGEN
</body>
</html>

Die Dateien start.php und player.php in das Root-Verzeichnis der Joomlainstallation hochladen.

Auf Anfrage noch eine kleine Anleitung für den JVW:
Dateien auf oben beschriebenen Seite runterladen und auf den Server laden. Den Setup Wizard benutzen, um den Code für den Player zu erzeugen.

3. .htaccess anpassen

Damit die Frameseite direkt beim Betreten der Website geladen wird, muss noch die .htaccess angepasst werden. Dadurch lässt sich die Startseite direkt bestimmen. Folgenden Eintrag muss man hinzufügen oder anpassen: 

DirectoryIndex start.php index.php

Somit wir bei der Eingabe der Seite (www.deineseite.de) die Datei start.php als Indexdatei festgelegt. Index.php auch eintragen, um keine Probleme beim Einloggen ins Backend zu haben.
Achtung: Das automatische Abspielen sollte wirklich nur im Notfall gewählt werden. Die Besucher sollten die Möglichkeit haben, selber zu entscheiden, ob sie Musik hören möchten.

Exkurs: Wie kann man in Joomla! 1.5 das mehrfache Laden des Players (bei der Option mit .htaccess) unterbinden?

Problem bei Joomla 1.5:

Ziel: Player startet beim Aufrufen der Domain automatisch. Bei einem Klick auf Startseite soll er nicht ein weiteres Mal geladen werden. Menülink, der diesen Vorgang ermöglicht, darf nicht angezeigt werden.

Lösung:

Es gibt eine relativ einfache Lösung:

  1. Neues Menü unter Menüs / Menüs erstellen
    Name des Menüs zum Beispiel "Startseite" - Name für Modultitel leer lassen!
  2. Richtige Startseite (als Standard definiert) in dieses Menü verschieben.
  3. Im Hauptmenü einen Link erzeugen, der auf index.php führt. Diesen Menüpunkt dient als "Pseudo"-Startseite.
  4. In die .htaccess folgendes eintragen:
DirectoryIndex start.php index.php

Resultat: Wird die Site über die Domain aufgerufen, wird der Player geladen, weil die Datei start.php durch .htaccess eingebunden wird. Klickt der Besucher auf "Startseite" im Hauptmenü, dann wird die index.php direkt und der Player kein weiteres Mal geladen.

ACHTUNG: Durch ein selbsterstelltes Modul sollte man dem Besucher die Möglichkeit geben, den Player abzuschalten!
Hier ist einfach ein Link auf index.php mit dem Parameter target="_top" einzutragen.

TIPP: Soll der Player nicht beim Betreten der Site geladen werden, dann ist die Änderung in der .htaccess nicht nötig. Im Menü oder Modul auf die start.php verlinken und der Player wird nach einem Klick drauf geladen. Die Verlinkung im Modul sollte mit dem Parameter target="_top" erfolgen, damit der Player nicht nach einem erneuten Klick ein weiteres Mal geladen wird.