ich möchte den Audioplayer direkt im Bild ( Block ) anzeigen lassen
Geht das mit Mobirise überhaupt
Beispiel habe ich mit einem anderen Programm erstellt
Gruss Raffi
Audioplayer direkt im Block
Audioplayer direkt im Block
Guten Tag
ich möchte den Audioplayer direkt im Bild ( Block ) anzeigen lassen
Geht das mit Mobirise überhaupt
Beispiel habe ich mit einem anderen Programm erstellt
vielen Dank für eure Hilfe
Gruss Raffi
ich möchte den Audioplayer direkt im Bild ( Block ) anzeigen lassen
Geht das mit Mobirise überhaupt
Beispiel habe ich mit einem anderen Programm erstellt
vielen Dank für eure Hilfe
Gruss Raffi
-
Tommy Herrmann
- Site Admin
- Beiträge: 5865
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Audioplayer direkt im Block
Hallo Raffi,
... und willkommen bei uns im Forum
Ja klar - hier mal nur ein Beispiel (mit Anleitung) von mir:
https://www.mobirise-tutorials.com/MP3-Music.html
Das Bild müsste dann ein Hintergrundbild eines Mobirise-Blocks sein.
Fast alle "Header" Blöcke von Mobirise bieten die Möglichkeit bei den Block-Werkzeugen ein Hintergrundbild, Farbe oder Video zu wählen.
... ich bin gerade unterwegs und kann erst morgen wieder wirklich helfen (falls weitere Fargen).
... und willkommen bei uns im Forum
Ja klar - hier mal nur ein Beispiel (mit Anleitung) von mir:
https://www.mobirise-tutorials.com/MP3-Music.html
Das Bild müsste dann ein Hintergrundbild eines Mobirise-Blocks sein.
Fast alle "Header" Blöcke von Mobirise bieten die Möglichkeit bei den Block-Werkzeugen ein Hintergrundbild, Farbe oder Video zu wählen.
... ich bin gerade unterwegs und kann erst morgen wieder wirklich helfen (falls weitere Fargen).
Re: Audioplayer direkt im Block
Hallo Tommy
vielen Dank für die schnelle Antwort.
Das Script habe ich schon gesehen und hier eingefügt
Leider wird der Player nicht angezeigt
Ich habe dann auch noch einen "Block Player" ausprobiert, der funktioniert mit Edge und Chrome
aber mit Firefox dreht sich nur im Kreis
was mache ich falsch?
Gruss Raffi
vielen Dank für die schnelle Antwort.
Das Script habe ich schon gesehen und hier eingefügt
Leider wird der Player nicht angezeigt
aber mit Firefox dreht sich nur im Kreis
- audioplayer_2.jpg (11.48 KiB) 738 mal betrachtet
Gruss Raffi
-
Tommy Herrmann
- Site Admin
- Beiträge: 5865
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Audioplayer direkt im Block
Moin,
da gehört das Script auch nicht hin. Der Bereich "inside <head> code" ist für Links zu CSS-Dateien oder auch andere Verweise gedacht - aber nicht zur Ausführung von HTML-Code, dieser gehört in den <body> Bereich, also in einen Mobirise-Block...
... das Audio-Tag gehört genau dort hin (in einen Block) wo es angezeigt werden soll.
Es handelt sich ja hierbei um das HTML <audio> Tag - ein "Tag" - wie jedes andere und das muss zur Anzeige in einen Block von Mobirise.
https://www.w3schools.com/tags/tag_audio.asp
Ich verwende dafür immer zunächst (zum Üben) ein ganz einfachen Block wie einen Textblock aus der Rubrik "Article" zum Beispiel aus dem Standard-Thema "Mobirise5":
Dann baue ich das im "Code Editor" von Mobirise ein. Entweder ersetze ich den Beispieltext mit dem Audio-Tag oder schreibe das Tag unter den Text:
Natürlich muss der Pfad zur Audio-Datei auch korrekt sein. Die alternative .ogg Datei kannst Du auch weglassen, denn heute können alle Browser das .mp3 Format lesen und abspielen.
Bitte beachte, dass der Player noch nicht auf der Arbeitsseite von Mobirise funktioniert, sondern erst im Browser nach dem Publizieren.
In diesem Beispiel zeigt also der relative Pfad - der Punkt mit dem Slash - im gleichen Verzeichnis auf ein Verzeichnis "music" in das ich meine Musik-Dateien kopiert habe (um Ordnung zu halten):
./ = 1 Punkt vor dem Slash bleibe im gleichen Verzeichnis
../ = 2 Punkte vor dem Slash würde ein Verzeichnis höher ansteuern
Im Code-Beispiel (oben) also in mein Verzeichnis "music" und dann zur Datei "MeineMusik.mp3".
Du musst also die Musik-Datei dann auch entsprechend lokal (im Verzeichnis der lokalen Publizierung) und am Server in dieses dort anzulegende Verzeichnis "music" händisch kopieren. Das machst Du am Server mit einem FTP-Programm wie "FileZilla", denn Mobirise weiß ja von der Datei gar nichts.
Anstelle der relativen Pfadangabe zur Musik-Datei könntest Du da natürlich auch den absoluten Pfad, also die gesamte URL bis zur Musik-Datei, eintragen - also bei mir z.B. so:
https://www.mobirise-tutorials.com/musi ... izards.mp3
... das würde dann mit meiner URL so aussehen - vielleicht ist das einfacher für Dich:
Ein Audio-Tag wird in jedem Browser ein wenig anders dargestellt, jeder Browser-Hersteller hat da ein wenig anderes Design entwickelt.
P.S.:
Mobirise stellt keinen Block mit einem Musik-Player zur Verfügung, welchen Block meinst Du also?
Es gibt von einem Drittanbieter "Zen2cool" aus Belgien einen solchen Block. Meinst Du den vielleicht?
Da kann ich aber nichts zu sagen, da ich persönlich keinerlei solcher "fertigen" Blöcke in Mobirise einbaue. Der Grund ist, dass ich von Mobirise auf mehrere schriftliche Anfragen keine Antwort erhalte, ob das eventuell eine Copyright-Verletzung darstellen könnte - denn es ist eindeutig ein Verstoß gegen deren Nutzungsbedingungen, denn solche Blöcke werden über die Schnittstellen von Mobirise, unter Verwendung der geschützten Technologie von Mobirise, eingelesen und schaden somit dem Hersteller erheblich.
Solche Drittanbieter-Blöcke werden zur Zeit von Mobirise lediglich geduldet. Durch deren Verwendung verliert man aber das Recht auf Support von Mobirise und ich möchte persönlich hier nicht das Risiko eingehen, die vielleicht eines Tages alle wieder entfernen zu müssen.
Meines Wissens verwendet aber "Zen2cool" (Rudy) da auch nichts anderes als genau so ein Audio-Tag, nur eben schon in einen Mobirise-Block eingebaut mit ein wenig zusätzlicher CSS zur bunten und einheitlichen Darstellung.
Mit dem Firefox-Browser kann es dabei keine Probleme geben, auch ich verwende diesen immer noch als meinen Standard-Browser und der kann das .mp3 Format genau wie alle anderen Browser interpretieren. Vielleicht hattest Du gerade eine Internet-Störung oder sonst etwas.
da gehört das Script auch nicht hin. Der Bereich "inside <head> code" ist für Links zu CSS-Dateien oder auch andere Verweise gedacht - aber nicht zur Ausführung von HTML-Code, dieser gehört in den <body> Bereich, also in einen Mobirise-Block...
... das Audio-Tag gehört genau dort hin (in einen Block) wo es angezeigt werden soll.
Es handelt sich ja hierbei um das HTML <audio> Tag - ein "Tag" - wie jedes andere und das muss zur Anzeige in einen Block von Mobirise.
https://www.w3schools.com/tags/tag_audio.asp
Ich verwende dafür immer zunächst (zum Üben) ein ganz einfachen Block wie einen Textblock aus der Rubrik "Article" zum Beispiel aus dem Standard-Thema "Mobirise5":
Dann baue ich das im "Code Editor" von Mobirise ein. Entweder ersetze ich den Beispieltext mit dem Audio-Tag oder schreibe das Tag unter den Text:
Natürlich muss der Pfad zur Audio-Datei auch korrekt sein. Die alternative .ogg Datei kannst Du auch weglassen, denn heute können alle Browser das .mp3 Format lesen und abspielen.
Code: Alles auswählen
<audio id="myPlayer" controls loop>
<source src="./music/MeineMusik.mp3" type="audio/mpeg">
Dieser HTML5 Player wird von Deinem Browser nicht unterstützt.
</audio>In diesem Beispiel zeigt also der relative Pfad - der Punkt mit dem Slash - im gleichen Verzeichnis auf ein Verzeichnis "music" in das ich meine Musik-Dateien kopiert habe (um Ordnung zu halten):
./ = 1 Punkt vor dem Slash bleibe im gleichen Verzeichnis
../ = 2 Punkte vor dem Slash würde ein Verzeichnis höher ansteuern
Im Code-Beispiel (oben) also in mein Verzeichnis "music" und dann zur Datei "MeineMusik.mp3".
Du musst also die Musik-Datei dann auch entsprechend lokal (im Verzeichnis der lokalen Publizierung) und am Server in dieses dort anzulegende Verzeichnis "music" händisch kopieren. Das machst Du am Server mit einem FTP-Programm wie "FileZilla", denn Mobirise weiß ja von der Datei gar nichts.
Anstelle der relativen Pfadangabe zur Musik-Datei könntest Du da natürlich auch den absoluten Pfad, also die gesamte URL bis zur Musik-Datei, eintragen - also bei mir z.B. so:
https://www.mobirise-tutorials.com/musi ... izards.mp3
... das würde dann mit meiner URL so aussehen - vielleicht ist das einfacher für Dich:
Code: Alles auswählen
<audio id="myPlayer" controls loop>
<source src="https://www.mobirise-tutorials.com/music/Land-Of-Wizards.mp3" type="audio/mpeg">
Dieser HTML5 Player wird von Deinem Browser nicht unterstützt.
</audio>P.S.:
Mobirise stellt keinen Block mit einem Musik-Player zur Verfügung, welchen Block meinst Du also?
Es gibt von einem Drittanbieter "Zen2cool" aus Belgien einen solchen Block. Meinst Du den vielleicht?
Da kann ich aber nichts zu sagen, da ich persönlich keinerlei solcher "fertigen" Blöcke in Mobirise einbaue. Der Grund ist, dass ich von Mobirise auf mehrere schriftliche Anfragen keine Antwort erhalte, ob das eventuell eine Copyright-Verletzung darstellen könnte - denn es ist eindeutig ein Verstoß gegen deren Nutzungsbedingungen, denn solche Blöcke werden über die Schnittstellen von Mobirise, unter Verwendung der geschützten Technologie von Mobirise, eingelesen und schaden somit dem Hersteller erheblich.
Solche Drittanbieter-Blöcke werden zur Zeit von Mobirise lediglich geduldet. Durch deren Verwendung verliert man aber das Recht auf Support von Mobirise und ich möchte persönlich hier nicht das Risiko eingehen, die vielleicht eines Tages alle wieder entfernen zu müssen.
Meines Wissens verwendet aber "Zen2cool" (Rudy) da auch nichts anderes als genau so ein Audio-Tag, nur eben schon in einen Mobirise-Block eingebaut mit ein wenig zusätzlicher CSS zur bunten und einheitlichen Darstellung.
Mit dem Firefox-Browser kann es dabei keine Probleme geben, auch ich verwende diesen immer noch als meinen Standard-Browser und der kann das .mp3 Format genau wie alle anderen Browser interpretieren. Vielleicht hattest Du gerade eine Internet-Störung oder sonst etwas.
-
Tommy Herrmann
- Site Admin
- Beiträge: 5865
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Audioplayer direkt im Block
Bitte beachte, dass der Player noch nicht auf der Arbeitsseite von Mobirise funktioniert, sondern erst im Browser nach dem lokalen, bzw. entfernten Publizieren.
... ich habe jetzt noch ein Beispiel eines Audio-Players auf einem Hintergrundbild (wie von Dir gewollt) auf meiner Seite hinzugefügt:
https://www.mobirise-tutorials.com/MP3- ... und-Player
... ich habe jetzt noch ein Beispiel eines Audio-Players auf einem Hintergrundbild (wie von Dir gewollt) auf meiner Seite hinzugefügt:
https://www.mobirise-tutorials.com/MP3- ... und-Player
Re: Audioplayer direkt im Block
Hallo Tommy
bitte entschuldige die späte Antwort
Ich bin dank Deiner Hilfe immerhin schon einen Schritt weiter gekommen
Der Player ist auf der Seite eingebunden und läuft ( sogar im Arbeitsbereich )
Dein CSS habe ich eingefügt, funktioniert soweit
Farbe rot hat der Player in der Vorschau übernommen.
Kann ich den Player auch verschieben?
bitte entschuldige die späte Antwort
Ich bin dank Deiner Hilfe immerhin schon einen Schritt weiter gekommen
Der Player ist auf der Seite eingebunden und läuft ( sogar im Arbeitsbereich )
Dein CSS habe ich eingefügt, funktioniert soweit
Farbe rot hat der Player in der Vorschau übernommen.
Kann ich den Player auch verschieben?
-
Tommy Herrmann
- Site Admin
- Beiträge: 5865
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Audioplayer direkt im Block
Moin,
also der Style (die CSS) ist eine ganz persönliche Sache, die ich mal eingebaut hatte, damit der Player etwas einheitlicher in den unterschiedlichen Browsern aussieht - mehr nicht - und keinesfalls irgendwie wichtig für die Funktion.
Ich weiß gerade nicht, was zu mit "verschieben" meinst.
Bitte zeige doch Deine Seite (URL), damit man überhaupt weiß wie Du das eingebaut hast und wo, sonst fehlt einem da jede Vorstellung.
Kannst ja mal hier lesen - bei "CSS Animation":
https://www.w3schools.com/css/css3_animations.asp
... und auch mal bei unserem Werner auf der Seite gucken:
https://werner-zenk.de/css/_css.php
Kannst ja den Player auch drehen lassen...
https://werner-zenk.de/css/container_ho ... drehen.php
... da gibt es Hunderte von möglichen Einstellungen - da musst Du dann schon selbst etwas kreativ werden und mal im Internet etwas suchen - aber etwas vorsichtig sollte man mit diesem "Gezappel" auf Webseiten schon sein, denn das wirkt immer etwas unruhig und ist oft nur nervig.
Nur zur Info - die GEMA untersagt jede Musik auf Webseiten, die nicht gemafrei ist. Es darf also niemals Musik von Künstlern, die nicht explizit gemafrei gestellt wurde, auf Webseiten abgespielt werden - auch die eigene nicht - sobald Deine Musik zum GEMA-Repertoire gehört, sind GEMA-Gebühren fällig. Im Zweifel erkundige Dich bei der GEMA.
also der Style (die CSS) ist eine ganz persönliche Sache, die ich mal eingebaut hatte, damit der Player etwas einheitlicher in den unterschiedlichen Browsern aussieht - mehr nicht - und keinesfalls irgendwie wichtig für die Funktion.
Ich weiß gerade nicht, was zu mit "verschieben" meinst.
Bitte zeige doch Deine Seite (URL), damit man überhaupt weiß wie Du das eingebaut hast und wo, sonst fehlt einem da jede Vorstellung.
Kannst ja mal hier lesen - bei "CSS Animation":
https://www.w3schools.com/css/css3_animations.asp
... und auch mal bei unserem Werner auf der Seite gucken:
https://werner-zenk.de/css/_css.php
Kannst ja den Player auch drehen lassen...
https://werner-zenk.de/css/container_ho ... drehen.php
... da gibt es Hunderte von möglichen Einstellungen - da musst Du dann schon selbst etwas kreativ werden und mal im Internet etwas suchen - aber etwas vorsichtig sollte man mit diesem "Gezappel" auf Webseiten schon sein, denn das wirkt immer etwas unruhig und ist oft nur nervig.
Nur zur Info - die GEMA untersagt jede Musik auf Webseiten, die nicht gemafrei ist. Es darf also niemals Musik von Künstlern, die nicht explizit gemafrei gestellt wurde, auf Webseiten abgespielt werden - auch die eigene nicht - sobald Deine Musik zum GEMA-Repertoire gehört, sind GEMA-Gebühren fällig. Im Zweifel erkundige Dich bei der GEMA.
Re: Audioplayer direkt im Block
Hallo Tommy
mit verschieben meinte ich die Player-Anzeige. Die war bei mir jetzt ganz links am Rand und in der Mitte des Bilds.
Wie kann ich die Position ändern? Zum Beispiel nach unten an den Rand mittig?
Ich habe das jetzt mit dem anderen Programm (WYSIWYG) gelöst in dem ich dort das gleiche gemacht habe und mir den Code vom Player heraus kopiert habe
Betreffend Musik: ist mir schon klar mit der Gema, ist ja auch nur ein Test und zudem habe ich die Seite jetzt PW geschützt
Vielen Dank für Deine Tipps
mit verschieben meinte ich die Player-Anzeige. Die war bei mir jetzt ganz links am Rand und in der Mitte des Bilds.
Wie kann ich die Position ändern? Zum Beispiel nach unten an den Rand mittig?
Betreffend Musik: ist mir schon klar mit der Gema, ist ja auch nur ein Test und zudem habe ich die Seite jetzt PW geschützt
Vielen Dank für Deine Tipps
-
Tommy Herrmann
- Site Admin
- Beiträge: 5865
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Audioplayer direkt im Block
... nachdem Du das ja schon gelöst hast, erübrigt sich eine genaue Antwort ja eigentlich.
Überprüfe aber die Position vom Player auch an anderen Geräten - wie z.B. dem Smartphone. Da ist diese nämlich immer anders als am Desktop.
Da der Player ja auf dem Hintergrund sitzt, verwendest Du ja zum Beispiel einen Textbereich für den Code vom Player. Diesen Bereich kannst Du doch in Mobirise über die Block-Werkzeuge auch zentrieren.
Um den dann nach unten zu schieben, könntest Du z.B. ganz simpel (etwas unelegant) einige Leerzeilen darüber einfügen oder mit einem Innenabstand "padding" das über CSS positionieren.
Da gibt es etliche Möglichkeiten.
Überprüfe aber die Position vom Player auch an anderen Geräten - wie z.B. dem Smartphone. Da ist diese nämlich immer anders als am Desktop.
Da der Player ja auf dem Hintergrund sitzt, verwendest Du ja zum Beispiel einen Textbereich für den Code vom Player. Diesen Bereich kannst Du doch in Mobirise über die Block-Werkzeuge auch zentrieren.
Um den dann nach unten zu schieben, könntest Du z.B. ganz simpel (etwas unelegant) einige Leerzeilen darüber einfügen oder mit einem Innenabstand "padding" das über CSS positionieren.
Da gibt es etliche Möglichkeiten.
Wer ist online?
Mitglieder in diesem Forum: 0 Mitglieder und 102 Gäste