HTML5 audio/mp3 einbinden funktioniert !

HTML5 audio/mp3 einbinden funktioniert ! - Printable Version

+- GetSimple Support Forum (http://get-simple.info/forums)
+-- Forum: International (http://get-simple.info/forums/forumdisplay.php?fid=4)
+--- Forum: German - Deutsch (http://get-simple.info/forums/forumdisplay.php?fid=18)
+--- Thread: HTML5 audio/mp3 einbinden funktioniert ! (/showthread.php?tid=7276)

HTML5 audio/mp3 einbinden funktioniert ! - triangle - 2015-05-10

Ich möchte ein Audiofile im GetSimple CMS anbieten. Da ich hier im deutschsprachigen Bereich dazu nicht gefunden habe, will ich hier kurz das Thema dokumentieren. Die aktuellen Browser unterstützen inzwischen alle mp3. Sorry, aber vor einiger Zeit war das noch nicht so. HTML5 ist lange noch nicht vollständig in den Browsern implementiert... http://de.wikipedia.org/wiki/HTML5#Fortschritt_in_der_Entwicklung

Den HTML5 Audio Code habe ich einfach in den Quellcode-Editor im mitgelieferten Editor von GetSimple kopiert.
Der Player wird vom Browser an der Stelle automatisch eingebunden. Die Info ist für viele sicherlich ein alter Hut. Das Audio einbinden so einfach im CMS funktioniert war mir aber noch nicht klar.

Code:
   <audio id="audio_with_controls" controls>

      <source src="http://[url]/audio.mp3" type="audio/mp3" />

       Ihr Browser kennt das HTML5-audio-Element noch nicht.

    </audio>

Allerdings doppelt sich der Quellcode nach dem Abspeichern in:

Code:
<audio autoplay="" controls="" id="audio_with_controls" loop="">

    <source src="http://[url]/audio.mp3" type="audio/mp3"> Ihr Browser kennt das HTML5-audio-Element noch nicht. </source></audio>

<p><source src="http://[url]/audio.mp3" type="audio/mp3">

    <p><source src="http://[url]/audio.mp3" type="audio/mp3"></source></p>

    <source src="http://[url]/audio.mp3" type="audio/mp3">

    <p><source src="http://[url]/audio.mp3" type="audio/mp3"> </source></p>

    <source src="http://[url]/audio.mp3" type="audio/mp3"><source src="http://[url]/audio.mp3" type="audio/mp3">

    <p><source src="http://[url]/audio.mp3" type="audio/mp3"></source></p>

    <source src="http://[url]/audio.mp3" type="audio/mp3"><source src="http://[url]/audio.mp3" type="audio/mp3"><source src="http://[url]/audio.mp3" type="audio/mp3">

Was ist da los? Muss ich im CMS den Code anders einbinden? Einen anderen Editor benutzen, oder was? Funktionieren tut es anscheinend trotzdem.

triangle

RE: HTML5 audio/mp3 einbinden funktioniert ! - Lars - 2015-05-11

Vielleicht ist es eine Alternative - ohne es jetzt konkret in diesem Fall ausprobiert zu haben - mit Dynpages ein Macro zu erstellen. Ich würde sagen, das wäre eine flexible Möglichkeit auch unterschiedliche Dateien (per Parameter) abspielen zu lassen.

RE: HTML5 audio/mp3 einbinden funktioniert ! - triangle - 2015-05-12

Lars Vorschlag mit Dynpages muß ich noch ausprobieren.

Jetzt habe ich den Quellcode-Editor zufällig in mehreren Browsern angeschaut. Wie gesagt geht es um den Quellcode-Editor, der bei GetSimple 3.3.3 mitgeliefert wird.
Der Quellcode-Button zeigt mir im Firefox viel mehr Dopplungen an als im Internet Explorer.

Firefox 31.6.0

Code:
<audio controls="" id="audio_with_controls">

<source src="http://[url]/audio.mp3" type="audio/mp3"> 

Ihr Browser kennt das HTML5-audio-Element noch nicht. </source></audio>

<p><source src="http://[url]/audio.mp3" type="audio/mp3">

<p><source src="http://[url]/audio.mp3" type="audio/mp3"></source></p>

<source src="http://[url]/audio.mp3" type="audio/mp3">

<p><source src="http://[url]/audio.mp3" type="audio/mp3"> </source></p>

<source src="http://[url]/audio.mp3" type="audio/mp3">

<source src="http://[url]/audio.mp3" type="audio/mp3">

IE9

Code:
<audio controls="" id="audio_with_controls">

<source src="http://[url]/audio.mp3" type="audio/mp3">

Ihr Browser kennt das HTML5-audio-Element noch nicht. </source></audio>

<p>

<source src="http://[url]/audio.mp3" type="audio/mp3">

Sehr merkwürdig. Im IE ist es aber bis auf eine Zeile nichts gedoppelt und funktionieren tut es im IE, Firefox und Chrome. Ein paar Tags, z.B. </p> fehlt. Solange die Browser das nicht falsch interpretieren reicht mir das.

triangle