Share |
World time
Sarah Jordan Photograhy
Sarah Jordan Photograhy
Sarah Jordan, Autorenseite
Sarah Jordan, Autorenseite
Sarah Jordan Story
Sarah Jordan Story
Homepage erstellen
Tutorial Hintergrundmusik
Tutorial Hintergrundmusik

Tutorial Hintergrundmusik

In diesem Tutorial möchte ich Euch die Möglichkeiten für das Einbinden von Hintergrundmusik, auf Eurer Jimdo Page, vorstellen.

 

Vorab aber ein rechtlicher Hinweis:

 

Ich darf und kann auch keine Rechtsberatung vornehmen, dennoch möchte ich auf einige rechtlich relevante Sachlagen hinweisen.

 

Wenn ihr auf eurer Homepage Musik, Hintergrundmusik laufen lassen möchtet, so seid euch bitte darüber bewusst, welche Musik ihr dort einbindet. Ihr dürft im Grunde nur eigen komponierte Musik einbauen. Wenn ihr ander Musikstücke einbaut, ist darauf zu achten, dass jegliche Musik rechtlich geschützt ist, insbesondere wenn es sich um Objekte handelt, die der GEMA unterliegen. Diese dürft ihr ohne Genehmigung nicht auf der Homepage ablaufen lassen, es sein denn ihr erwirbt bei der GEMA eine entsprechende Lizenz. Es gibt spezielle Lizenzen für private Homepages, die ca. 35,-€ im Jahr kostet. Näheres dazu findet ihr hier.

 

Im Weiteren habt ihr die Möglichkeit auf GEMA freie Musikstücke zurückzugreifen, wobei auch hier auf die Urheberrechte zu achten ist. Diese Musikstücke werden meist kostenlos angeboten und dürfen der angegebenen Creative Commons Lizenzen entsprechend genutzt werden. Ein Anbieter solcher Musikstücke wäre Jamendo, wo ihr die entsprechenden Musikstücke und weiterführende Infos erhaltet. Weitere Infos zur Rechtslage und Anbieter von GEMA freier Musik findet ihr, wenn ihr danach googelt.

 

Hinweis:

 

Alle hier zu Demonstrationszwecken verwendeten Musikstücke sind GEMA frei und werden im Rahmen der Creativ Commons Lizenzen genutzt bzw. besitze ich die Genehmigung des Künstlers (ist mein Freund und Kumpel).

 

 

Hier nun die verschiedenen Möglichkeiten fürt das Einbinden von Hintergrundmusik.

 

Vorab ladet ihr das/die entsprechende(n) Musikstück(e) per Downloadmodul, auf eine versteckte Seite eurer Jimdo Page. Hiernach wechselt ihr in den Ansichtmodus und kopiert die Downloadlinks per rechter Maustaste und fügt sie z.B. in den Windows Editor ein. So habt ihr die Links greifbar, ohne ständig von einer Seite auf die andere wechseln zu müssen  und auch erspart ihr euch somit den mehrfachen Wechsel vom Bearbeitungs- in den Ansichtmodus.

 

Jetzt brauchen wir einen entsprechenden Code um die Musik einzubinden und ablaufen zu lassen.

 

Dazu nehmen wir zum Anfang mal folgenden HTML Tag:

 

<embed wmode="" src="Url der DateiHier die Url der Downloaddatei (Mp3) einfügen" width="150" height="45" autoplay="false" loop="true" />

 

In diesen Html Tag fügt ihr an der bezeichneten Stelle die URL eure Mp3 Datei ein. Dann legt ihr auf der gewünschten Seite ein Widget/Html an und fügt den HTML Tag dort ein, abspeichern und dann die Seite neu laden (F5).


Wenn ihr wollt, dass die Musik auf jeder Seite laüft, so müsst ihr das Widget/Html Modul in die Sidebar einbauen.

 

Anmerkung: Die Musik beginnt bei jedem Seitenwechsel vom Anfang bzw. beginnt sie wieder von vorne. Dies lässt sich auch nicht ändern.

 

Nun zur Erklärung des HTML Tag's:

 

bei wmode="" kann zwischen die  beiden "  " transparent eingefügt werden.Dies ist dann sinnvoll, wenn ihr die Musik automatisch ablaufen lassen wollt und der Player dabei unsichtbar bleibt. Bei width und height könnt ihr die Größe des angezeigten Players angeben. Bei Autoplay kann man die Werte true oder false benutzen, wobei true zumindest dann benutzt werden sollte, wenn der Player auf transparent eingestellt ist. Bei der Einstellung fasle sollte der Player sichtbar sein, damit der User/Besucher den Player selbst starten kann.  Am Ende des Tag's kann man Loop auch auf true oder false einstellen, wobei true eine Schleife bedeutet, so dass die Musik, ohne Neustart des Players, wieder von vorne beginnt. Soll das Musikstück nur einmal abgespielt werden empfiehlt sich die Einstellung auf false.

Unten der Player der mit diesem Html Tag erzeugt wird.

 

Die Musik kommt von Ralf Holl

Hintergrundmusik in einem Popup

 

 

Um das Problem mit dem Neustarten der Musik bei einem Seitenwechsel zu unterbinden gibt es folgende Möglichkeit.

 

Wie gehen hin und erzeugen ein Popup. Da die <body onlad> bei Jimdo nicht funktioniert verzichten wir auf einen Autostart. So kann der Besucher selbst bestimmen, ob er die Musik hören will oder nicht.

 

Für dieses Popup brauchen wir zwei Codes. Einmal ein Javascript und zum zweiten einen Button um das Musikstück bzw. das Popup aufzurufen. Aber dazu gleich.

 

Um nun die Musik im Popup abspeilen zu lassen, reicht es nicht mehr aus, unsere Mp3 per Downloadmodul auf seine Seite zu laden und den Downloadlink zu kopieren und in den Code einzufügen.

Hier brauchen wir nun einen externen Webspace, den man kostenlos erhalten kann um die Mp3 Datei abrufen zu können. Per Downloadlink würde sich in diesem Falle nur das Downloadfenster des Browser öffnen und nachfragen, ob die Datei geöffnet oder gespeichert werden soll.

 

Nun zurück zum Webspace. Hierbei benötigen wir einen Webspace Anbieter, der es uns erlaubt, Mp3 Dateien auf den Webspace zu laden, was zum Besipiele bei Lima City nicht erlaubt ist bzw. muss die Mp3 auf den Downloadserver geladen werden, was uns aber nichts bringt. Für unseren Zweck wäre z.B. der Anbieter bplaced eine gute Wahl. Anders wie bei Lima City benötigt ihr aber bei bplaced ein FTP Programm um die Dateien von unserem Rechner auf den Webspace zu übertragen. Es gibt dazu einige Freeware Programme, wobei ich jetzt nur mal eins benennen möchte. FILEZILLA ist eine Open Source Software und ist kostenlos.

 

Wenn wir den Webspace eingerichtet und unsere Musik in den Filemanager hochgeladen haben, kopieren wir dort den Link zur Mp3 Datei.

 

Jetzt kommen wir zum Script, dass wie folgt aussieht:

 

<script language="JavaScript">
function openWindow() {
  popupWin = window.open('Url der Mp3 DateiHier die Url der MP3 einfügen. Sehr wichtig ist, die Url zwiechen die beiden ' ' zu setzen und kein Zeichen beim Einfügen zu löschen', '761110738', 'width=200,height=100,left=100,top=100,menubar=no,status=no,scrollbars,toolbar=no,hotkeys,location=no')
}

//-->
</script>

 

 

Jetzt haben wir zwei Möglichkeiten für den Einbau des Codes auf unserer Jimdo Page. Zum Ersten können wir das fertige Script in den HeadEinstellungen-Webseite-Head bearbeiten einfügen oder wir legen- sinnigerweise in der Sidebar- ein Widget/Html Modul an und fügen den Code dort ein. Abspeichern und die Seite neu laden. Ihr müsst euch jetzt für eine Variante entscheiden. Der spätere zweite Teil (Html Tag) kommt in beiden Fällen in die Sidebar.

 

Hinweis: Das soeben eingebaute Modul oder dessen Inhalt wird nicht dargestellt. Auch ist es so, dass es im Bearbeitungsmodus nur als sehr schmaler Streifen dargestellt ist. Hier ist nun ein wenig Mausgefühl angesagt, um es wieder greifen bzw. bearbeiten zu können. Für späteren Einbau weiterer Module gut zu wissen, dass dort noch etwas ist.

 

Wir benötigen nun noch ein weiteres Widget/Html Modul, dass wir unter dem anderen anlegen. Dort fügen wir nun folgenden Tag ein:

 

<input name="button" type=button onClick="openWindow();" value="Play Music">

 

Das Ergebnis in der Sidebar sieht dann so aus:

 

 

Tipp: Ihr könnt im Tag, bei value, auch eine andere Bezeichnung für den Button (jetzt Play Music) eingeben.

 

Jetzt speichert ihr ab und ladet die Seite neu (F5). Jetzt sollte beim Klick auf den Button das Popup aufgehen, sofern kein Popup Blocker sein Werk verrichtet. Wenn doch, so müsst ihr das Popup jetzt zulassen. Um es auszutesten könnt ihr nun hingehen und auf andere Seiten eurer Jimdo Page wechseln,ohne dass die Musik wieder von vorne beginnt.

 

Ihr könnt es auch mal testen, indem ihr jetzt, oberhalb, auf den Button klickt.

 

Tipp: Woll ihr verschiedene Musikstücke, auf mehreren Seiten, oder nur auf einer bestimmten Seite im Popup öffnen lassen, so müsst ihr nur hingehen und beide Widget/Html Module auf die jeweilige Seite setzen, natürlich müsst ihr zuvor die entsprechenden Links im jeweiligen Script einfügen.

Generell würde ich aber für Letzteres den normalen Player dazu benutzen, ansonsten hat der Besucher schnell mal drei Popups mit verschiedenen Songs geöffnet.

Auch solltet ihr unter oder über den Button einen Hinweis für Eure Besucher anbringen, dass die Musik in einem Popup abgespielt wird und sie dieses Popup zulassen, falls ein Blocker eingestellt ist.

Ein weiterer Player mit verschiedenen Einstellmöglichkeiten würde so daherkommen.

 

 An dieser Stelle erfolgt nun die Codeerklärung. Den Code selbst könnt ihr im Anschluss in der Auswahlbox kopieren.

 

Zuerst braucht ihr die Url eurer Musikdatei. Für diesen Player könnt ihr entweder die Mp3 per Donwloadmodul auf eine versteckte Seite laden, den Downloadlink im Anschichtmodus, per rechter Maustaste kopieren und in den Code an den bezeichneten Stellen einfügen, Achtung!Die Musik Url muss an zwei Stellen im Code eingefügt werden, oder den Link der Musikdatei, die ihr auf einem externen Webspace vorliegen habt.

 

An den Stellen width und height könnt ihr die Größe des Players ändern. Kommt im Code zwei mal vor und sollte auch an beiden Positionen identisch sein. Bei Autostart- kommt auch zwei mal vor- könnt ihr 1 oder 0 eingeben, wobei 1 für den automatischen Start einzugeben ist. Bei 0 muss der Besucher den Player selbst starten.

Wenn bei Showaudiocontrols eine 1 eingetragen wird, ist die Lautstärkereglung aktiviert.

 

Alle Werte kommen zweimal im Code vor, einmal bei der Parameterliste und dann noch im unteren Abschnitt des Codes. Die Werte müssen immer an beiden Stellen identisch sein.

 

Auch die jetzt nicht näher beschriebenen Parameter Werte könnt ihr ändern, in 1 oder 0

 

Wenn ihr euren Code fertig konfiguriert habt, so fügt ihr diesen in ein Widget/Html Modul eurer Seite ein.

 

<OBJECT ID="MediaPlayer" classid="CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6"
CODEBASE="http://activex.microsoft.com/activex/controls/mpla
yer/en/nsmp2inf.cab#Version=5,1,52,701"
width="150" height="53" standby="Loading Microsoft Windows Media Player components..."
type="application/x-oleobject">
<PARAM NAME="FileName" VALUE="Url der Mp3Hier die Url der Musik einfügen">
<PARAM NAME="TransparentAtStart" Value="1">
<PARAM NAME="AutoStart" Value="1">
<PARAM NAME="AnimationatStart" Value="1">
<PARAM NAME="ShowStatusBar" Value="1">
<PARAM NAME="ShowControls" Value="1">
<PARAM NAME="autoSize" Value="0">
<PARAM NAME="displaySize" Value="0">
<PARAM NAME="ShowAudioControls" Value="1">
<PARAM NAME="ShowPositionControls" Value="0">
<Embed type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/Windows/Downloads/Cont
ents/Products/MediaPlayer/"
src="Url der Mp3Hier die Url der Musik einfügen" Name="MediaPlayer"
width="150" height="53" transparentAtStart="1" autostart="1"
animationAtStart="0" ShowControls="1" ShowAudioControls="1"
ShowPositionControls="0" autoSize="0" ShowStatusBar="1" displaySize="0">
</embed></OBJECT>

In der Box hier drunter könnt ihr den Code auswählen und kopieren.



Player mit Playlisten

Découvrez la playlist Mucke avec Pink Cream 69