Tutorial:Musik_abspielen
Wie kann eigentlich auf einer Clansphere-Seite Musik unterbrechungsfrei abgespielt werden?
via iFrame
Über einen iFrame können Sie es einfach lösen. Alle Dateien gibt es auch gesammelt am Ende des Artikel zum Download.index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Clansphere mit Musik</title>
</head>
<frameset style="border:0;" rows="50,*">
<frame frameborder="0" src="[HTML-DATEI MIT DER MUSIK]" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="player">
<frame frameborder="0" src="index.php" name="mainFrame" id="mainFrame" title="mainFrame">
<noframes>
<body>
<h1>Keine Frames!</h1>
<p>Leider unterstützt dein Browser keine Frames!</p>
<p>Du kannst die Seite aber trotzdem nutzen: <a href="index.php">!! weiter !!</a></p>
</body>
</noframes>
</frameset>
</html>
Dieses einfach als index.html in das Clansphere-Hauptverzeichnis. Sofern eine Enter-Seite verwendet wird, kann diese Datei auch ohne Probleme umbennant werden, z.B. home.html. Der Platzhalter [HTML-DATEI MIT DER MUSIK] muss noch durch die Datei mit dem integrierten Player ersetzt werden, z.B. /templates/apple/player.html
In der Zeile
<frameset style="border:0;" rows="50,*">kann mit rows="50,*" die Größe der Frames festgelegt werden. Sofern nur der Player angezeigt werden soll, reicht hier auch 20.
Dies wäre eine HTML-Valide index.html. Leider wird hier ein weißer Rand zwischen den beiden Frams angezeigt. Falls dies stört, muss leider die nicht HTML-valide Version benutzt werden: Es muss im obigen Beispiel das
<frameset style="border:0;" rows="50,*">durch dieses ersetzt werden
<frameset frameborder="no" border="0" framespacing="0" rows="50,*">
player.html
Ein Beispiel für einen Player wäre der JW FLV Player. Nachdem Sie den Player heruntergeladen haben, laden Sie bitte die player.swf in ihren Templates-Ordner (/templates/[IHR TEMPLATE]/). Dort erstellen Sie nun bitte eine Datei mit dem Namen player.html. In diese kommt folgender Inhalt:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css"> body{background-color:#CCEEBB;};</style>
<title>Player</title>
</head>
<body>
<b>Der Player:</b><br />
<object type="application/x-shockwave-flash" style="width:440px; height:20px;" data="player.swf?file=[LINK ZUR DATEI]"><param name="music" value="player.swf?file=[LINK ZUR DATEI]" />
<param name="allowscriptaccess" value="always" />
<param name="wmode" value="transparent" /></object>
</body>
</html>
Überall, wo jetzt [LINK ZUR DATEI] steht, müssen Sie den Link zu ihrer MP3 einfügen.
Nach dem 1. "player.swf?file=[LNK ZUR DATEI] kann noch ein &autostart=true hinzugefügt werden. Dann startet der Player automatisch!
Download
Hier gibt es nun noch alle benötigten Dateien zum Download. In der player.html muss noch der Link zur Datei korrekt eingegeben werden.via AJAX (ab Clansphere 2008.2.1)
Ab Clansphere 2008.2.1 wird es möglich sein, den Content über AJAX laden zu lassen. Somit wird nun nur noch der Content und nicht die ganze Seite neu geladen. Hier ist es noch einfacher einen Player einzufügen:Einfach in der index.html des Templates den Player integrieren.
Allerdings werden im Moment Formulare noch per POST versendet. Daher muss beim Absenden von Formularen die Seite leider neu gestartet werden. Somit stoppt dort die Musik! Ab Version 2009.0 wird dieses "Problem" gelöst sein.
