MP3 abspielen auf Website mit Player

Die Kollegen vom Support werden Dir morgen bestimmt mehr sagen können; ich als Laie würde die MP3s zu Soundcloud, hearthis oder Mixcloud hochladen und dann deren HTML-Fragment als Artikel einfügen (Typ "Quelltext").

Ich habe mal ein Beispiel erstellt. Meinst du das so ?

[Blockierte Grafik: http://united-host.eu/zeta/audioplayer.jpg]

Link

Gruss swork

Hallo,

Uwe hat recht. Verschiedene Browser unterstützen verschiedene Dateiformate bzw. Codecs etc. und darum möchte man sich nicht auch noch kümmern müssen. Daher überlässt man dies gerne externen Anbietern, die dann auch dafür sorgen, dass die Player immer kompatibel sind und in den jeweiligen Browsern auch laufen.

Schau mal, so hab ich das gemacht: http://www.projekt-fama.de/demos.html

Sicherlich kann man das Aussehen der Player auch noch ändern. Da war ich jedoch zu faul zu... :o)

Hi robmax

Ein einfacher Player ist es halt.

Hier ist der Code dafür. Läuft gut auf den aktuellen Tablets und Smartphones und PC Browser.

Für die Kompatibilität musst du die Stücke im mp3 und ogg Standard bereit halten.

<audio controls>
<source src="media/files/Summer.mp3" type="audio/mpeg">
<source src="media/files/Summer.ogg" type="audio/ogg">
<embed height="50" width="100" src="media/files/Summer.mp3">
</audio>

Dateien über Zeta hinzufügen und den Code als Widget "Quelltext" einfügen

Dateien hinzufügen über ERWEITERT/Dateien und dort dann importieren

Gruss swork

Wenn's bei soundcloud liegt kümmern die sich ums adaptive Streaming, das ist verdammt aufwändig, das wirst du mit deinem eigenen Webserver kaum mit bezahlbarem Aufwand so gut hinbekommen.

Hi robmax

Du siehst im Zeta Producer und in der Vorschau sicher das hier

[Blockierte Grafik: http://united-host.eu/zeta/mp3player.jpg]

Der Producer selbst kommt damit nicht klar, aber wenn du die Seite direkt aus dem Output Ordner
startest, also z.b. einen doppelklick auf die Index.html machst, dann wird die Seite direkt in deinem
Browser angezeigt und der Player läuft. Sollte auch nach dem Hochladen funktionieren.

Ich denke mal du möchtest nur hier und da mal ein paar Audiodateien abspielen, dann reicht das
eigentlich.

Habe das auch gerade mal auf dem iphone und ipad getestet und läuft auch da.

Hallo,

um eine Vorschau im Browser zu bekommen muss man nicht in den Projektordner abtauchen. Einfach in Zeta Producer im Menü "Website" auf den Button "Vorschau" klicken oder die Funktionstaste F5 drücken, dann öffnet sich der Browser und zeigt eine lokale Vorschau (nicht vom Webserver).

Aber genau das mit der Vorschau klappt ja nicht, wie ich beschrieben habe. Die Vorschau wird dann über den Zeta Lokal Server aufgerufen. Dann wird der Player nicht angezeigt. Geht nur wenn die Seite angezeigt wird, ohne es über Zeta zu machen.

Ah, ok. Das mag daran liegen, dass Sie die Dateipfade manuell eingetragen haben anstatt die Objekt-IDs zu nutzen.

Besser ist es, nachdem Sie die Audiodateien in ZP importiert haben in die Dateiverwaltung zu gehen, die entsprechende Datei zu finden, sie mit der Maus zu markieren und dann im Button "Aktionen" die Option Datei-Objekt-ID kopieren" wählen. Nun haben die den korrekten Pfad zur Verwendung in Zeta Producer in der Zwischenablage. Der sieht dann so ähnlich aus:

oid://file/mein-mp3-audio

Diesen Pfad setzen Sie dann in das SRC-Attribut des Players ein. Das Ergebnis dürfte dann ungefähr so aussehen:

<audio controls>
<source src="oid://file/mein-mp3-audio" type="audio/mpeg">
<source src="oid://file/mein-ogg-audio" type="audio/ogg">
<embed height="50" width="100" src="oid://file/mein-mp3-audio">
</audio>

Ok danke. Werde ich später auch mal ausprobieren. Melde dann nochmal ob es geklappt hat.

Gruss swork

Ich habe das dann mal mit den oid Link ausprobiert, aber das Ergebnis bleibt das gleiche, der Player läuft nicht innerhalb von Zeta.
Im Quellcode werden aber die korrekten Pfade gesetzt und nach Veröffentlichung läuft der Player auch, oder man startet
die html Datei im Output Ordner.

Ist jetzt aber auch nicht tragisch. Da man die Audiodateien eh hochladen muss, auch bei Soundcloud, kann man
das auf seinen eigenen Webserver tun und dann die Pfade auf die externe Quelle verweisen lassen:

<audio controls>
<source src="http://webseite.de/media/files/song.mp3" type="audio/mpeg">
<source src="http://webseite.de/media/files/song.ogg" type="audio/ogg">
<embed height="50" width="100" src="http://webseite.de/media/files/song.mp3">
</audio>

Dann läufts auch in Zeta Vorschau und sonst auch.

Bei meinem Tip mit dem Seitenbutton reichte es auch die Button Bilddatei zu importieren
und im Quellcode dann den Ordner "media/files/kontakt.png" anzugeben. Da musste man auch nicht
mit den oid´s arbeiten. Da sollte das Problem wohl nicht liegen.

Hallo,
vielen Dank für den Hinweis. Ich gehe dem bei Gelegenheit mal genauer nach. Kann gut sein, dass der in ZP eingebaute Webserver z.B. noch den falschen MIME-Type für die Audio-Dateien liefert und das mögen dann dir Browser nicht...

Hallo,

ich habe das eben mal getestet und wenn ich den Code wie erwähnt einfüge und dann in Zeta Producer auf den "Vorschau"-Button klicke um die lokale Datei im Webbrowser zu öffnen, funktioniert es einwandfrei. Siehe screenshot (zu hören ist bei mir auch was). Habe es in Chrome, IE10, Firefox und Opera erfolgreich getestet.

Ist das jetzt mit den oid's gemacht?

Vielleicht habe ich dann in der Syntax einen Fehler gemacht.

Ja, das war mit den oids gemacht:

<audio controls>
  <source src="oid://file/test-sound_mp3" type="audio/mpeg">
  <source src="oid://file/test-sound_ogg" type="audio/ogg">
  <b>Ihr Browser unterstützt HTML-5 Audio nicht!</b>
</audio>

Ich werde das heute Abend nochmal verifizieren und gebe eine Rückmeldung.

Danke aber schonmal für die Überprüfung

Ok, ich habe es nochmal ausprobiert und folgendes festgestellt:

Innerhalb von ZETA und auch in der Vorschau bleibt das Problem bestehen. Rufe ich aber
die Zeta Vorschau in Chrome auf, dann klappt es und der Player läuft. Ich kopiere dazu
die Url einfach in Chrome rein: http://localhost:11443/preview/index.html

Rufe ich die index.html direkt im IE10 auf, dann klappts auch da

Da es innerhalb und in der Vorschau micht mit dem IE10 klappt, scheint hier
ein Problem mit dem Producer Local Server und IE10 vorzuliegen. An IE10 alleine
nicht, da ich bei Aufruf der html direkt, den Player starten kann.

Man kann dann doch den Pfad media/files/summer.mp3 benutzen, also
nicht per oid´s, wenn man das Problem jetzt kennt.

Mit dieser Pfadangabe habe ich es gegen geprüft. Per Localhost im IE10 geht nicht
und per Localhost im Chrome, der Player geht.

Auf den IE11 kann man bei Windows 8.0 leider nicht updaten. Micky möchte einen ja
so zum Update auf 8.1 zwingen.

Moin!

Ich bin blutiger Anfänger!

Ich habe den HTML-Code eingegeben. ZP und auch die Vorschau zeigen nur ein scharzes Rechteck mit einem roten Kreuz auf weißem Grund an. Was hab ich falsch gemacht?

Hier mal der Code

<audio controls>
<source src="oid://file/minutenmix_tobiasmoeck_mp3" type=audio/mpeg">
<source src="oid://file/minutenmix_tobiasmoeck_ogg" type=audio/ogg">
<embed height="50" width="100" src="oid://file/minutenmix_tobiasmoeck_mp3">
<b> Ihr Browser unterstützt HTML5-Audios nicht. </b>
</audio>

Gruß

Hallo,

es scheint, dass die Links nicht stimmen. Wie haben Sie denn die OIDs ermittelt?

In der nächsten Version von ZP wird voraussichtlich ein Widget für einen Audio- und Video-Player enthalten sein, der macht das ganze dann sehr viel einfacher.

Hallo.

Ich habe die OIDs - wie oben beschrieben - in der Dateiverwaltung kopiert und dann mit einem Rechtsklick in den HTML-Code eingefügt.

Und zum Zweiten: Falls die neue Version von ZP nicht innerhalb der nächsten zwei Wochen kommt, bringt sie mir wenig. Ich muss die Homepage in den nächsten Tagen funktionierend fertig kriegen.

Danke für Ihre schnelle Antwort.

Gruß

Hallo,

nein, das wird voraussichtlich noch etwas länger dauern mit der neuen Version.

Um Ihr aktuelles Problem lösen zu können, wäre es hilfreich, wenn man die Seite irgendwo online sehen könnte. Können Sie die Seite schon mal veröffentlichen?

Um erst mal wegen der Pfade ganz sicher zu gehen, trage sie mal so ein

http://webseite.de/media/files/song.mp3

und lade die Dateien in ein Verzeichniss deiner Domain hoch. Schreibe die Musikdateien klein und ohne
Leerzeichen, um da auch Fehler auszuschliessen.

<audio controls>
< source src="http://webseite.de/media/files/song.mp3" type="audio/mpeg">
< source src="http://webseite.de/media/files/song.ogg" type="audio/ogg">
< embed height="50" width="100" src="http://webseite.de/media/files/song.mp3">
<b> Ihr Browser unterstützt HTML5-Audios nicht. </b>
< /audio>

Wenn das klappt, kann man sich das nochmal mit der lokalen Pfadangabe anschauen. Du musst
übrigens nicht zwingend die oid´s benutzen, es klappt auch mit der Pfadangabe wie weiter oben
in einem Artikel beschrieben.

Gruss swork

Hallo.

@sseiz ich habe zwar schon eine domain, aber noch keinen webspace. Der ist bestellt. ich versuche dort in Kürze, die Webseite mit den Audios hochzuladen. Können Sie das dann mit wenigen Blicken erkennen, wo der Fehler liegt?

Oder gibt es noch eine andere Möglichkeit, die Seite für Sie sichtbar zu laden? Habe die html-codes noch einmal neu eingegeben, aber 's schaut immer noch so aus.

Vielen Dank

Freundliche Grüße

Wenn die Seite online ist, können wir die Ursache meist erkennen. Versprechen kann man das aber nicht. Sie könnten vorab die Seite lokal mal per F5 in der Vorschau öffnen. Dann die URL im Browser kopieren und diese URL im Chrome Browser öffnen. Da nutzen Sie dann die Console um Fehler zu erkennen. Die Console in Chrome öffnen Sie mit der Tastenkombination STRG-SHOFT-J – wenn die Konsole offen ist, laden Sie die Seite ggf. nochmal mit F5 – fehler werden dann in der Console angezeigt (z.B. Javascript Fehler oder Fehlende Dateien…).