Mehrere HTML5-Audioplayer - HTML5-Audio allgemein - wie?

[hideatsu]

Hallo,

ich habe S9Y 1.73. Ich möchte Audio am liebsten als HTML5-Elemente einbinden. Das Easy Podcasting Plugin hat ja einen HTML5-Teil voreingestellt, ich habe diesem "mp3" zugewiesen... Nun füge ich einen Audio-Link wie ein Bild aus der Medien-Datenbank ein. Das ist dann in Chromium nicht klickbar... andere Browser klappen. Aber das Podcasting Plugin erzeugt einen Link, den ich so gar nicht haben will.

Füge ich es als Quelltext so ein:

Code: Select all

<audio controls>
<source src="/uploads/medien/audio/infocamp.mp3" type="audio/mpeg">
<p>Browser unterstützt den HTML5-<span lang="en">Audioplayer</span> nicht, bitte manuell runterladen.</p>
</audio>

Dann klappt es in allen Browsern, hat aber immer noch Nachteile: a) ich bekomme mehrere Player in einem Posting nicht hin. b) der mitgelieferte WYSIWYG-Editor zerstört mir das recht schnell, wenn ich zwischen Quelltextansicht und WYSIWYG wechsle (es fürgt <p> ein).

Meine Frage ist vielleicht erstmal: Was ist denn der State-Of-The-Art-Weg, mehrere Audiospuren in ein Posting reinzupacken?

Danke!

Micha

[Timbalu]

Dann klappt es in allen Browsern, hat aber immer noch Nachteile: a) ich bekomme mehrere Player in einem Posting nicht hin. b) der mitgelieferte WYSIWYG-Editor zerstört mir das recht schnell, wenn ich zwischen Quelltextansicht und WYSIWYG wechsle (es fürgt <p> ein).

Nicht das ich mich mit (mehrfachen) Audio Playern in Postings irgendwie auskennen würde, aber der mitgelieferte JS-EDITOR Xinha stammt noch aus einer Zeit in der HTML5 noch in weiter Ferne lag, nehme ich an, so dass ich hier zuerst einmal den Editor wechseln würde, vorzugsweise auf CKEDITOR. (gibt es als Plugin). Vielleicht genügt das schon um die Probleme zu beseitigen. Ansonsten könnte man versuchen der Einbindung eine wie auch immer geartete unique ID mitzugeben.

[hideatsu]

Danke für Deine Antwort! ckeditor hatte ich versucht zu nutzen, aber er wird nicht angezeigt. Wenn ich diesen als Plugin eingebunden habe, bekomme ich keinen WYSIWYG-Editor angezeigt. Ich hatte das erstmal aufgegeben.

Mein Testszenario war durcheinander, ich hatte einen falschen Blogbeitrag angeschaut.

Es klappt nun so:

- Easy Podcast habe ich deaktiviert.

Code: Select all

<audio controls="true">
<source src="/uploads/Gewinn-A.mp3" type="audio/mpeg" />
Browser unterstützt den HTML5-<span lang="en">Audioplayer</span> nicht, bitte manuell herunterladen.</audio>
<br />
<audio controls="true">
<source src="/uploads/Gewinn-B.mp3" type="audio/mpeg" />
Browser unterstützt den HTML5-<span lang="en">Audioplayer</span> nicht, bitte manuell herunterladen.</audio>
<br />
Text.

Nur mein Chromium-Opera zeigt die Player unklickbar an. Keine Ahnung warum, er kann das normalerweise auch.

[onli]

Dieses HTML5-Audioelement ist leider verdammt wackelig in den momentanen Browsern. Dass der Play-Button nicht angezeigt wird kann mehrere Gründe haben, einer davon ist ein falscher Content-Type-Header der verlinkten Datei. Das kann man in den Chrome-Devtools im Netzwerk-Tab relativ gut nachgucken (im Zweifel hier einfach mal ein Beispiel verlinken. Vll fällt etwas auf).

[yellowled]

Das audio-Element sollte prinzipiell im Chrome funktionieren – wir verwenden es im InfoCamp ja auch, nur eben von Hand erzeugt, (noch) nicht vom Easy Podcasting Plugin.

Spontan fällt mir auf, dass im Beispiel schließende Tags fehlen, könnte sein, dass das verwirrt, dass Chrome also versucht, zwei Tracks in einen Player zu packen. Generell wäre ein konkreter Link tatsächlich ganz gut, damit man mal live gucken kann.

YL

[hideatsu]

Ich habe keine Ahnung, was Opera 19 dev. hat.

Ich habe Euren Quellcode aus dem s9ycamp geklaut, direkt als Quellcode gespeichert (ckeditor friemelt da leider immer noch dran herum) und das gibt die Seite aus:

Code: Select all

<audio controls>
                        <source src="/uploads/vorbis/S9y-Infocamp-Podcast-Ausgabe-021.ogg" type="audio/ogg">
                        <source src="http://s9ycamp.podspot.de/files/S9y-Infocamp-Podcast-Ausgabe-021.mp3" type="audio/mpeg">
                        <p>Browser unterstützt den HTML5-<span lang="en">Audioplayer</span> nicht, bitte manuell runterladen.</p>
                    </audio>

Ein Player, in dem der Play-Button kurz weiß aufblinkt und dann grau wird. Man kann nichts klicken. Aber man kann mit Rechtsklick herunterladen.
Auf Eurer Seite ist der gleiche Quelltext und da klappt das Abspielen. Vermutlich spielt es Vorbis ab.

Also ich muss das unerforscht lassen, komme nicht dahinter warum mp3 nicht tut. Vielleicht darf es kein VBR sein. Mit Vorbis habe ich Erfolg, dann nehme ich das.

[Timbalu]

Spiel doch mal mit dem mime type ein wenig herum:
http://msdn.microsoft.com/de-de/library ... 85%29.aspx
so wie hier

Code: Select all

    <audio controls="true">
        <source src="demo.mp3" type="audio/mp3"> 
        <source src="demo.ogg" type="audio/ogg"> 
        <source src="demo.aac" type="audio/mp4"> 
        <!-- If no support at all. -->
        HTML5 audio not supported 
    </audio>

Oder klick dich mal durch:
http://msdn.microsoft.com/de-de/library ... 85%29.aspx