Audioplayer direkt im Block

Extensions, Bedingungen und Preise, Third Party Apps
Raffi
Mitglied (Level 1)
Mitglied (Level 1)
Beiträge: 4
Registriert: So 27. Aug 2023, 18:12

Audioplayer direkt im Block

Ungelesener Beitrag von Raffi »

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
bild mit player.jpg
vielen Dank für eure Hilfe
Gruss Raffi
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 6210
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Audioplayer direkt im Block

Ungelesener Beitrag von Tommy Herrmann »

Hallo Raffi,

... und willkommen bei uns im Forum :hallo:

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).
Raffi
Mitglied (Level 1)
Mitglied (Level 1)
Beiträge: 4
Registriert: So 27. Aug 2023, 18:12

Re: Audioplayer direkt im Block

Ungelesener Beitrag von Raffi »

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
audioplayer_1.jpg
Ich habe dann auch noch einen "Block Player" ausprobiert, der funktioniert mit Edge und Chrome
aber mit Firefox dreht sich nur im Kreis :(
audioplayer_2.jpg
audioplayer_2.jpg (11.48 KiB) 5649 mal betrachtet
was mache ich falsch?

Gruss Raffi
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 6210
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Audioplayer direkt im Block

Ungelesener Beitrag von Tommy Herrmann »

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":


Article - einfacher Textblock.jpg


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:


Audio-Tag im Code-Editor.jpg


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>
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:

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>
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.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 6210
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Audioplayer direkt im Block

Ungelesener Beitrag von Tommy Herrmann »

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
Raffi
Mitglied (Level 1)
Mitglied (Level 1)
Beiträge: 4
Registriert: So 27. Aug 2023, 18:12

Re: Audioplayer direkt im Block

Ungelesener Beitrag von Raffi »

Hallo Tommy

bitte entschuldige die späte Antwort
Ich bin dank Deiner Hilfe immerhin schon einen Schritt weiter gekommen :tu:
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?
audio_css.jpg
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 6210
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Audioplayer direkt im Block

Ungelesener Beitrag von Tommy Herrmann »

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.
Raffi
Mitglied (Level 1)
Mitglied (Level 1)
Beiträge: 4
Registriert: So 27. Aug 2023, 18:12

Re: Audioplayer direkt im Block

Ungelesener Beitrag von Raffi »

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?
audio_links.jpg
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
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 6210
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Audioplayer direkt im Block

Ungelesener Beitrag von Tommy Herrmann »

... 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.
Antworten

Wer ist online?

Mitglieder in diesem Forum: Ahrefs [Bot] und 1 Gast