Audioplayer für Homepage

dominiksturm · 22. November 2021

Hallo zusammen. Ich würde gerne einen einfachen AudioPlayer auf meine Homepage einbauen, der einen Stream abspielen kann.
Den Audioplayer selbst konnte ich schon einbinden, er spielt auch meine Musik ab.

audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Allerdings bräuchte ich einen HTML Quellcode zum Generieren, der den Player auch als "pop-up" offen lässt, d.h. ich will ja, dass der Player weiterläuft, auch wenn ich die Startseite von meiner Homepage verlasse und weiter durch meine Page surfe. Geht das? Danke euch!

[ChAoZ] · 22. November 2021

Du willst auch kein Popup da die meisten Browser diese standardmäßig blocken.

Joshinator · 22. November 2021

Das Portal-Element sollte dafür ein Fix sein, das ist quasi ein Iframe der die URL entführen darf.
Die HTML-Seite würde dann also nur aus einem Portal und dem Audioplayer bestehen, und alle Links funktionieren isoliert in dem Portal und ändern die URL.
Nachteil: https://caniuse.com/?search=portal experimentelles Chrome-Feature hinter einer Flag

Aktuell kommst du um Javascript nicht rum:

Option 1:
Da Portal vereinfacht ein Iframe ist, hab die selbe Seite mit einem Iframe (also <body><iframe /><audio /></body>). Der User navigiert innerhalb des Iframes und du manipulierst die URL händisch.
Da beide Frames dir gehören kannst du frei zwischen den Kommunizieren, wenn der User im Iframe auf foo.html navigiert kannst du mit der History API die URL der eigentlichen Seite ersetzen.
Weil sich die eigentliche Seite nicht ändert wird Audio nicht gestoppt.

Option 2:
Noch mehr Javascript & Ajax. Deaktivier alle Links auf deiner Seite mit Javascript damit der Browser nicht navigiert. Per Javascript rufst du im Hintergrund die eigentliche URL auf, und ersetzt das HTML der Seite und manipulierst per History API die aktuelle URL.
Also auch wieder <body><div id='inhalt'><audio /></body>.
Wenn ein Link aufgerufen wird die Navigation unterdrücken, Ajax an die URL und den alten #inhalt mit dem von der neuen URL ersetzen.
Wirdst dann auch ein paar Meta-Tags aus dem Ajax holen müssen damit sich z.B. der Seitentitle updated.

Es gab eine Libaray die das fertig angeboten hat, also das Hijacken der Links damit dann nur der Body ersetzt wird und nicht die ganze Seite neu aufgebaut wird.
Der Name will mir nur nicht einfallen. Das war irgendein "Hyperlink.js"-ähnliches Wort.

Edit: Hab definitiv nicht 15min lang gesucht weil mich das nicht in ruhe gelassen hat: Turbolinks

Suche

Audioplayer für Homepage

dominiksturm

Lieutenant

[ChAoZ]

Rear Admiral

Joshinator

Commander

Ähnliche Themen